Introdução à depuração do JavaScript

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

Etapa 1: Reproduzir o bug

A primeira etapa na depuração é encontrar uma sequência de ações que reproduzem 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 na nova guia" ou "Abrir link em nova janela" na janela pop-up. Como alternativa, você pode pressionar e segurar Ctrl (para Windows, Linux) ou Comando (para macOS) e, em seguida, 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, consulte Procurar InPrivate no Microsoft Edge

2. Insira 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 Sources

O DevTools fornece várias ferramentas para tarefas diferentes. Essas tarefas incluem alteração do CSS, criação de perfil de desempenho de carga de página e solicitações de rede de monitoramento. A ferramenta Sources é onde você depura 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). DevTools abre:

   

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

   

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

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

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

• O painel Depurador (na parte inferior). Este painel fornece ferramentas para inspecionar o JavaScript para a página da Web. Se a janela DevTools estiver larga, 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 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 obtêm 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(), 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 o 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, variáveis que afetam seu código são ocultas e ofuscadas.

Em suma, 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 do ouvinte de eventos

Se você se afastar e pensar em como o aplicativo funciona, você pode fazer um palpite educado de que a soma incorreta (5 + 1 = 51) é calculada no ouvinte de click eventos associado ao botão Adicionar Número 1 e Número 2 . Portanto, você provavelmente deseja pausar o código na hora 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) é selecionado 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. DevTools revela uma lista de categorias de eventos, como Animação e Área de Transferência.

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

4. Selecione a caixa de seleção ao lado de clicar em:

   

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

5. Na página da Web de demonstração renderizada, clique no botão Adicionar Número 1 e Número 2 novamente. DevTools pausa a demonstração e realça uma linha de código na ferramenta Fontes . O DevTools faz uma pausa na linha 16 no get-started.js, mostrado no próximo snippet 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ê fez uma pausa em uma linha diferente, você terá uma extensão de navegador que registra um click ouvinte de eventos em cada página da Web que você visitar. Você está pausado no click ouvinte da extensão. Se você usar o Modo InPrivate para navegar em particular, o que desabilita todas as extensões, você poderá ver que pausa na linha de código desejada sempre.

Os pontos de interrupção do Ouvinte de Eventos são apenas um dos muitos tipos de pontos de interrupção disponíveis em 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: passo a passo pelo código

Uma causa comum de bugs é quando um script é executado na ordem errada. Passar pelo código permite que você passe pelo runtime 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 do esperado. Experimente agora:

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

   if (inputsAreEmpty()) {
   

   DevTools ignora algumas linhas de código, pois inputsAreEmpty() avalia como false, para que o bloco de código da if instrução não seja executado.

2. Na ferramenta Fontes do DevTools, clique em Avançar chamada de função () para percorrer o runtime da updateLabel() função, uma linha por vez.

Essa é a ideia básica de passar pelo código. Se você examinar o código no get-started.js, poderá 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 você chegar à linha de código específica que deseja pausar, use um ponto de interrupção de linha de código.

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

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

2. O número de linha para label.textContent = addend1 + ' + ' + addend2 + ' = ' + sum; é 34. Clique na linha 34. DevTools exibe um círculo vermelho à esquerda de 34. O círculo vermelho indica que um ponto de interrupção de linha de código está nessa linha. O DevTools sempre faz uma 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é chegar à linha 34. Nas linhas 31, 32 e 33, DevTools imprime os valores de cada variável à direita do ponto semiautônomos em cada linha. Esses valores são:

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

Etapa 6: verificar valores de variável

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

Examinando valores variáveis no painel Escopo

Se você pausar em uma linha de código, o painel Escopo exibirá as variáveis locais e globais 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 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.

Examinando valores variáveis por meio de expressões de relógio

O painel Relógio 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 watch.

1. Selecione a guia Relógio .

2. Clique em Adicionar watch expressão ().

3. Digite a expressão typeof sumwatch e pressione Enter:

O painel Relógio exibe typeof sum: "string". O valor à direita do cólon é o resultado da expressão watch. O bug deve-se a sum ser avaliado como uma cadeia de caracteres, quando deve ser um número.

Se a janela DevTools estiver larga, o painel Relógio será exibido no painel Depurador , que será exibido à direita.

Examinando valores variáveis por meio do Console

O Console permite exibir a console.log() 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 para bugs.

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

2. No Console, digite a expressão parseInt(addend1) + parseInt(addend2). A expressão é avaliada para o escopo atual, dado que o depurador é 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 as impressões 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 de 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 sua alteração.

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 é definido, 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 é calculada corretamente.

6. Ao depurar seu próprio projeto, depois de identificar a correção, você corrige o código-fonte real no servidor, como editando o código-fonte local e, em seguida, implantando novamente seu código fixo no servidor. As etapas anteriores aplicam apenas uma correção a uma cópia local temporária do código 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 os métodos que você aprendeu neste artigo podem salvar 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 condicional que só são disparados quando a condição que você fornece é verdadeira.
• Pontos de interrupção em exceções capturadas ou não detectadas.
• Pontos de interrupção XHR que são disparados quando a URL solicitada corresponde a uma subconserção que você fornece.

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 de depurador para passar pelo código, consulte Avançar linha de código em "Recursos de depuração JavaScript".

Consulte também

• Recursos de depuração JavaScript – Usando a interface do usuário do depurador na ferramenta Fontes.
• Visão geral da ferramenta de 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 (Technical Writer, Chrome DevTools & Lighthouse).

Este trabalho é licenciado sob uma Licença Internacional de Atribuição do Creative Commons 4.0.