Introdução à depuração do JavaScript

Este artigo ensina o fluxo de trabalho básico para depurar qualquer problema de JavaScript usando DevTools.

Etapa 1: reproduzir o bug

A primeira etapa na depuração é encontrar uma sequência de ações que reproduza consistentemente um bug.

1. Abra a página da Web de demonstração Introdução à depuração do JavaScript em uma nova janela ou guia. Para abrir a página da web, clique com o botão direito do mouse no link e selecione "Abrir link em uma nova guia" ou "Abrir link em uma nova janela" na janela pop-up. Como alternativa, você pode pressionar e segurar Ctrl (para Windows, Linux) ou Command (para macOS) e clicar no link.

   Dica: Abra o Microsoft Edge no modo InPrivate para garantir que o Microsoft Edge seja executado em um estado limpo. Para obter mais informações, confira Navegar InPrivate no Microsoft Edge

2. Digite 5 na caixa de texto Número 1 .

3. Insira 1 na caixa de texto Número 2 .

4. Clique em Adicionar Número 1 e Número 2. O rótulo abaixo do botão diz 5 + 1 = 51, em vez do resultado esperado de 6:

   

Etapa 2: Familiarize-se com a interface do usuário da ferramenta Fontes

O DevTools fornece várias ferramentas para diferentes tarefas. Essas tarefas incluem alterar o CSS, criar perfil de desempenho de carregamento de página e monitorar solicitações de rede. A ferramenta Fontes é onde você depura o JavaScript.

1. Para abrir o DevTools, clique com o botão direito do mouse na página da Web e selecione Inspecionar. Ou pressione Ctrl+Shift+I (Windows, Linux) ou Command+Option+I (macOS). O DevTools é aberto:

   

2. Selecione a ferramenta Fontes . Selecione a guia Página e, em seguida, selecione o arquivo JavaScript, get-started.js:

   

A interface do usuário da ferramenta Fontes tem três partes:

• O painel Navegador (no canto superior esquerdo). Todos os arquivos solicitados pela página da Web estão listados aqui.

• O painel Editor (no canto superior direito). Depois de selecionar um arquivo no painel Navegador , esse painel exibe o conteúdo do arquivo.

• O painel Depurador (na parte inferior). Esse painel fornece ferramentas para inspecionar o JavaScript para a página da Web. Se a janela do DevTools for ampla, esse painel será exibido à direita do painel Editor .

Etapa 3: pausar o código com um ponto de interrupção

Um método comum para depurar esse tipo de problema é inserir várias console.log() instruções no código e, em seguida, inspecionar os valores à medida que o script é executado. Por exemplo:

function updateLabel() {
    var addend1 = getNumber1();
    console.log('addend1:', addend1);
    var addend2 = getNumber2();
    console.log('addend2:', addend2);
    var sum = addend1 + addend2;
    console.log('sum:', sum);
    label.textContent = addend1 + ' + ' + addend2 + ' = ' + sum;
}

O console.log() método pode fazer o trabalho, mas os pontos de interrupção o fazem mais rapidamente. Um ponto de interrupção permite pausar seu código no meio do runtime e examinar todos os valores nesse momento. Os pontos de interrupção têm as seguintes vantagens sobre o console.log() método.

• Com console.log()o , você precisa abrir manualmente o código-fonte, localizar o código relevante, inserir as console.log() instruções e atualizar a página da Web para exibir as mensagens no Console. Com pontos de interrupção, você pode pausar no código relevante sem precisar saber como o código está estruturado.

• Em suas console.log() instruções, você precisa especificar explicitamente cada valor que deseja inspecionar. Com pontos de interrupção, o DevTools mostra os valores de todas as variáveis naquele momento. Às vezes, as variáveis que afetam seu código ficam ocultas e ofuscadas.

Resumindo, os pontos de interrupção podem ajudá-lo a encontrar e corrigir bugs mais rapidamente do que o console.log() método.

Pontos de interrupção de ouvintes de eventos

Se você recuar e pensar sobre como o aplicativo funciona, poderá fazer uma suposição fundamentada de que a soma incorreta (5 + 1 = 51) é calculada no click ouvinte de eventos associado ao botão Adicionar Número 1 e Número 2 . Portanto, você provavelmente deseja pausar o código na época em que o click ouvinte é executado. Os pontos de interrupção do ouvinte de eventos permitem que você faça isso:

1. No painel Navegador, (index) é selecionada por padrão. Clique em get-started.js.

2. No painel Depurador , clique em Pontos de Interrupção do Ouvinte de Eventos para expandir a seção. O DevTools revela uma lista de categorias de eventos, como Animação e Área de transferência.

3. Clique em Expandir () ao lado do evento Mouse abrir essa categoria. O DevTools revela uma lista de eventos do mouse, como clicar e passar o mousedown. Cada evento tem uma caixa de seleção ao lado.

4. Marque a caixa de seleção ao lado do clique:

   

   O DevTools agora está configurado para pausar automaticamente quando qualquer click ouvinte de evento é executado.

5. Na página da Web de demonstração renderizada, clique no botão Adicionar Número 1 e Número 2 novamente. O DevTools pausa a demonstração e realça uma linha de código na ferramenta Fontes . O DevTools pausa na linha 16 em get-started.js, mostrado no próximo trecho de código:

   if (inputsAreEmpty()) {
   

   Se você pausar em uma linha de código diferente, clique em Retomar Execução de Script () até pausar na linha correta.

   Observação

   Se você pausou em uma linha diferente, terá uma extensão do navegador que registra um click ouvinte de eventos em cada página da Web visitada. Você está pausado click no ouvinte da extensão. Se você usar o modo InPrivate para navegar em particular, o que desabilita todas as extensões, poderá ver que você pausa na linha de código desejada todas as vezes.

Ouvinte de Eventos Os pontos de interrupção são apenas um dos muitos tipos de pontos de interrupção disponíveis no DevTools. Memorize todos os tipos diferentes para ajudá-lo a depurar diferentes cenários o mais rápido possível. Para saber quando e como usar cada tipo, consulte Pausar seu código com pontos de interrupção.

Etapa 4: Percorrer o código

Uma causa comum de bugs é quando um script é executado na ordem errada. Percorrer seu código permite que você percorra o tempo de execução do seu código. Você percorre uma linha de cada vez para ajudá-lo a descobrir exatamente onde seu código está sendo executado em uma ordem diferente da esperada. Experimente agora:

1. Clique em Depuração sobre a próxima chamada de função (). O DevTools executa o seguinte código sem intervir nele:

   if (inputsAreEmpty()) {
   

   O DevTools ignora algumas linhas de código, pois inputsAreEmpty() é avaliado como false, portanto, o bloco de código da if instrução não é executado.

2. Na ferramenta Fontes do DevTools, clique em Depuração na próxima chamada de função () para percorrer o updateLabel() tempo de execução da função, uma linha por vez.

Essa é a ideia básica de percorrer o código. Se você olhar para o código em get-started.js, você pode ver que o bug provavelmente está em algum lugar na updateLabel() função. Em vez de percorrer cada linha de código, você pode usar outro tipo de ponto de interrupção (um ponto de interrupção de linha de código) para pausar o código mais próximo do local provável do bug.

Etapa 5: definir um ponto de interrupção de linha de código

Os pontos de interrupção de linha de código são o tipo mais comum de ponto de interrupção. Quando chegar à linha de código específica que deseja pausar, use um ponto de interrupção de linha de código.

1. Examine a última linha de código em updateLabel():

   label.textContent = addend1 + ' + ' + addend2 + ' = ' + sum;
   

2. O número de linha é label.textContent = addend1 + ' + ' + addend2 + ' = ' + sum;34. Clique na linha 34. O DevTools exibe um círculo vermelho à esquerda de 34. O círculo vermelho indica que há um ponto de interrupção de linha de código nessa linha. O DevTools sempre pausa antes que essa linha de código seja executada.

3. Clique no botão Retomar execução de script ():

   

   O script continua a ser executado até atingir a linha 34. Nas linhas 31, 32 e 33, o DevTools imprime os valores de cada variável à direita do ponto e vírgula em cada linha. Esses valores são:

   • addend1 = "5"
   • addend2 = "1"
   • sum = "51"

Etapa 6: Verificar valores de variáveis

Os valores de addend1, addend2e sum parecem suspeitos. Esses valores estão entre aspas, o que significa que cada valor é uma cadeia de caracteres. Esta é uma boa pista para a causa do bug. A próxima etapa é coletar mais informações sobre esses valores de variáveis. O DevTools fornece várias maneiras de examinar valores de variáveis.

Examinar valores de variáveis no painel Escopo

Se você pausar em uma linha de código, o painel Escopo exibirá as variáveis locais e globais que estão definidas no momento, juntamente com o valor de cada variável:

O painel Escopo também exibe variáveis de fechamento, conforme aplicável. Se você quiser editar um valor de variável, clique duas vezes no valor no painel Escopo . Se você não pausar em uma linha de código, o painel Escopo estará vazio.

Examinar valores de variáveis por meio de expressões Watch

O painel Inspeção permite monitorar os valores de variáveis (como sum) ou expressões (como typeof sum). Você pode armazenar qualquer expressão JavaScript válida em uma expressão de inspeção.

1. Selecione a guia Assistir .

2. Clique em Adicionar expressão de exibição ().

3. Digite a expressão typeof sumde inspeção e pressione Enter:

O painel Inspeção exibe typeof sum: "string". O valor à direita dos dois-pontos é o resultado da expressão de observação. O bug se deve ao fato de sum ser avaliado como uma cadeia de caracteres, quando deveria ser um número.

Se a janela do DevTools for ampla, o painel Inspeção será exibido no painel Depurador , que aparecerá à direita.

Examinar valores de variáveis por meio do Console

O Console permite que você exiba console.log() a saída. Você também pode usar o Console para avaliar instruções JavaScript arbitrárias enquanto o depurador é pausado em uma instrução de código. Para depuração, você pode usar o Console para testar possíveis correções de bugs.

1. Se a ferramenta Console estiver fechada, pressione Esc para abri-la. A ferramenta Console é aberta no painel inferior da janela do DevTools.

2. No Console, digite a expressão parseInt(addend1) + parseInt(addend2). A expressão é avaliada para o escopo atual, dado que o depurador está pausado em uma linha de código em que addend1 e addend2 estão no escopo.

3. Pressione Enter. O DevTools avalia a instrução e imprime 6 no Console, que é o resultado correto que você espera que a demonstração produza:

   

Etapa 7: aplicar uma correção ao código retornado e, em seguida, ao código-fonte real

Identificamos uma possível correção para o bug. Em seguida, edite o código JavaScript diretamente na interface do usuário do DevTools e execute novamente a demonstração para testar a correção, da seguinte maneira:

1. Clique em Retomar execução de script ().

2. No painel Editor , substitua a linha var sum = addend1 + addend2 por var sum = parseInt(addend1) + parseInt(addend2).

3. Pressione Ctrl+S (Windows, Linux) ou Command+S (macOS) para salvar suas alterações.

4. Clique em Desativar pontos de interrupção (). O ícone do ponto de interrupção muda para cinza para indicar que o ponto de interrupção está inativo. Enquanto Desativar pontos de interrupção está definido, o DevTools ignora todos os pontos de interrupção definidos. A página da Web de demonstração agora exibe o valor correto:

   

5. Experimente a demonstração com valores diferentes. A demonstração agora calcula corretamente.

6. Ao depurar seu próprio projeto, depois de identificar a correção, corrija o código-fonte real no servidor, por exemplo, editando o código-fonte local e, em seguida, implantando novamente o código fixo no servidor. As etapas anteriores aplicam apenas uma correção a uma cópia local temporária do código que é enviado do servidor.

Próximas etapas

Parabéns! Agora você sabe como aproveitar ao máximo o Microsoft Edge DevTools ao depurar JavaScript. As ferramentas e métodos que você aprendeu neste artigo podem economizar inúmeras horas.

Este artigo mostrou duas maneiras de definir pontos de interrupção. O DevTools também fornece maneiras de definir pontos de interrupção para pausar seu código quando determinadas condições forem atendidas, como:

• Pontos de interrupção condicionais que são disparados apenas quando a condição fornecida é verdadeira.
• Pontos de interrupção em exceções capturadas ou não capturadas.
• Pontos de interrupção XHR que são acionados quando a URL solicitada corresponde a uma subcadeia de caracteres fornecida.

Para obter mais informações sobre quando e como usar cada tipo de ponto de interrupção, consulte Pausar seu código com pontos de interrupção.

Para obter mais informações sobre os botões do depurador para percorrer o código, consulte Passar por linha de código em "Recursos de depuração do JavaScript".

Consulte também

• Recursos de depuração do JavaScript – Usando a interface do usuário do depurador na ferramenta Fontes.
• Visão geral da ferramenta Fontes - Apresenta o depurador JavaScript e o editor de código.

Observação

Partes desta página são modificações baseadas no trabalho criado e compartilhado pelo Google e usadas de acordo com os termos descritos na Licença Pública Creative Commons Atribuição 4.0 Internacional. A página original é encontrada aqui e é de autoria de Kayce Basques.

Este trabalho está licenciado sob uma Licença Creative Commons Atribuição 4.0 Internacional.