Depurar o JavaScript

Kayce Basques

Sofia Emelianova

Este tutorial ensina o fluxo de trabalho básico para depurar problemas de JavaScript no DevTools. Continue lendo ou assista à versão em vídeo deste tutorial.

Reproduza o bug.

Encontrar uma série de ações que reproduzam consistentemente um bug é sempre a primeira etapa para a depuração.

1. Abra esta demonstração em uma nova guia.
2. Insira 5 na caixa Número 1.
3. Insira 1 na caixa Número 2.
4. Clique em Adicionar número 1 e número 2. O rótulo abaixo do botão informa 5 + 1 = 51. O resultado precisa ser 6. Esse é o bug que você vai corrigir.

Neste exemplo, o resultado de 5 + 1 é 51. Deve ser 6.

Conhecer a interface do painel Origens

O DevTools fornece muitas ferramentas diferentes para tarefas diferentes, como alteração de CSS, criação de perfil do desempenho de carregamento de página e monitoramento de solicitações de rede. O painel Sources é onde você depura o JavaScript.

1. Abra o DevTools e acesse o painel Sources.

   

O painel Origens tem três seções:

1. A guia Page com a árvore de arquivos. Todo arquivo solicitado pela página é listado aqui.
2. A seção Editor de código. Depois de selecionar um arquivo na guia Page, o conteúdo desse arquivo é exibido aqui.

3. A seção Debugger. Várias ferramentas para inspecionar o JavaScript da página.

   Se a janela do DevTools for ampla, por padrão, o Debugger estará à direita do Editor de código. Nesse caso, as guias Escopo e Assistir se unem a Pontos de interrupção, Pilha de chamadas e outras, como seções que podem ser recolhidas.

Pausar o código com um ponto de interrupção

Um método comum para depurar um problema como esse é inserir muitas instruções console.log() no código, a fim de inspecionar valores à medida que o script é executado. 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 método console.log() pode fazer o trabalho, mas os pontos de interrupção podem fazê-lo mais rapidamente. Um ponto de interrupção permite pausar o código no meio da execução e examinar todos os valores nesse momento. Os pontos de interrupção têm algumas vantagens sobre o método console.log():

• Com console.log(), é necessário abrir manualmente o código-fonte, encontrar o código relevante, inserir as instruções console.log() e atualizar a página para ver as mensagens no Console. Com os pontos de interrupção, é possível pausar no código relevante sem mesmo saber como o código está estruturado.
• Nas instruções console.log(), você precisa especificar explicitamente cada valor que quer inspecionar. Com os pontos de interrupção, o DevTools mostra os valores de todas as variáveis naquele momento. Às vezes, há variáveis afetando seu código que você nem ao menos conhece.

Em resumo, os pontos de interrupção podem ajudar você a encontrar e corrigir bugs mais rapidamente do que o método console.log().

Se você parar para pensar em como o app funciona, poderá fazer um palpite fundamentado de que a soma incorreta (5 + 1 = 51) é calculada no listener de eventos click associado ao botão Adicionar número 1 e número 2. Portanto, é recomendável pausar o código próximo ao momento em que o listener click é executado. Os pontos de interrupção do listener de eventos permitem fazer exatamente isso:

1. Na seção Debugger, clique em Event Listener Breakpoints para expandir a seção. O DevTools revela uma lista de categorias de eventos expansíveis, como Animation e Clipboard.
2. Ao lado da categoria de evento Mouse, clique em arrow_right Expandir. O DevTools revela uma lista de eventos do mouse, como click e mousedown. Há uma caixa de seleção ao lado de cada evento.

3. Marque a caixa de seleção click. O DevTools agora está configurado para pausar automaticamente quando qualquer listener de evento click é executado.

   

4. De volta à demonstração, clique novamente em Add Number 1 and Number 2. O DevTools pausa a demonstração e destaca uma linha de código no painel Sources. O DevTools precisa ser pausado nesta linha de código:

   function onClick() {
   

   Se você estiver pausado em uma linha de código diferente, pressione retomar Resume Script Execution até que esteja pausado na linha correta.

   Observação: se você pausou em uma linha diferente, tem uma extensão de navegador que registra um listener de eventos click em cada página que visita. Você foi pausado no listener click da extensão. Se você usa o modo de navegação anônima para navegar com privacidade, o que desativa todas as extensões, você pode perceber que sempre faz uma pausa na linha de código correta.

Os pontos de interrupção do listener de eventos são apenas um dos muitos tipos de pontos de interrupção disponíveis no DevTools. Vale a pena explorar todos os diferentes tipos, porque cada um ajuda a depurar diferentes cenários o mais rápido possível. Consulte Pausar seu código com pontos de interrupção para saber quando e como usar cada tipo.

Percorrer o código

Uma causa comum de bugs é quando um script é executado na ordem errada. Percorrer seu código permite que você percorra a execução dele, uma linha por vez, e descubra exatamente onde ele está sendo executado em uma ordem diferente da esperada. Experimente agora:

1. No painel Sources do DevTools, clique em step_into Step into next function call para seguir a execução da função onClick(), uma linha por vez. O DevTools destaca a seguinte linha de código:

   if (inputsAreEmpty()) {
   

2. Clique em step_over Pular para a próxima chamada de função.

   O DevTools executa o inputsAreEmpty() sem entrar nele. Observe como o DevTools pula algumas linhas de código. Isso ocorre porque inputsAreEmpty() foi avaliado como falso, então o bloco de código da instrução if não foi executado.

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

Definir um ponto de interrupção da linha de código

Os pontos de interrupção da linha de código são o tipo mais comum. Quando você quiser pausar em uma linha de código específica, use um ponto de interrupção de linha de código:

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

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

2. À esquerda do código, você pode ver o número dessa linha de código específica, que é 32. Clique em 32. O DevTools coloca um ícone azul sobre o 32. Isso significa que há um ponto de interrupção de linha de código nessa linha. Agora, o DevTools sempre pausa antes que essa linha de código seja executada.

3. Clique em Retomar Retomar a execução do script. O script continua a execução até chegar à linha 32. Nas linhas 29, 30 e 31, o DevTools mostra os valores de addend1, addend2 e sum in-line ao lado das declarações deles.

Nesse exemplo, o DevTools pausa no ponto de interrupção da linha de código na linha 32.

Verificar os valores das variáveis

Os valores de addend1, addend2 e sum parecem suspeitos. Eles estão entre aspas, o que significa que são strings. Essa é uma boa hipótese para explicar a causa do bug. Agora é hora de reunir mais informações. O DevTools fornece muitas ferramentas para examinar valores de variáveis.

Método 1: inspecionar o escopo

Quando você está pausado em uma linha de código, a guia Escopo mostra quais variáveis locais e globais estão definidas neste ponto da execução, junto com o valor de cada variável. Ele também mostra variáveis de fechamento, quando aplicáveis. Quando você não está pausado em uma linha de código, a guia Escopo fica vazia.

Clique duas vezes no valor de uma variável para editá-lo.

Observação: dependendo das suas preferências de layout e da largura da janela do DevTools, a guia Scope pode aparecer como uma seção recolhível com Breakpoints e Call stack.

Método 2: expressões de observação

A guia Watch permite monitorar os valores das variáveis ao longo do tempo. Watch não se limita a variáveis. É possível armazenar qualquer expressão JavaScript válida na guia Watch.

Observação: dependendo da sua preferência de layout e da largura da janela do DevTools, a guia Watch pode aparecer como uma seção recolhível junto com Breakpoints e Call stack.

Experimente agora:

1. Clique na guia Watch.
2. Clique em add Add watch expression.
3. Digite typeof sum.
4. Pressione Enter. O DevTools mostra typeof sum: "string". O valor à direita dos dois-pontos é o resultado da sua expressão.

Esta captura de tela mostra a guia Watch (canto inferior direito) após a criação da expressão de observação typeof sum.

Como suspeito, sum está sendo avaliado como uma string, quando deveria ser um número. Você confirmou que essa é a causa do bug.

Método 3: o console

Além de ver mensagens console.log(), você também pode usar o console para avaliar instruções JavaScript arbitrárias. Em termos de depuração, você pode usar o Console para testar possíveis correções de bugs. Experimente agora:

1. Se a gaveta Console não estiver aberta, pressione Esc para abri-la. Ela será aberta na parte inferior da janela do DevTools.
2. No console, digite parseInt(addend1) + parseInt(addend2). Essa instrução funciona porque você 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, que é o resultado esperado que a demonstração produz.

Esta captura de tela mostra a gaveta Console após avaliar o parseInt(addend1) + parseInt(addend2).

Aplicar uma correção

Você encontrou uma correção para o bug. Só falta testar a correção editando o código e executando a demonstração novamente. Não é preciso sair do DevTools para aplicar a correção. É possível editar o código JavaScript diretamente na interface do DevTools. Experimente agora:

1. Clique em Retomar Retomar a execução do script.
2. No Editor de código, substitua a linha 31, var sum = addend1 + addend2, por var sum = parseInt(addend1) + parseInt(addend2).
3. Pressione Command + S (Mac) ou Control + S (Windows e Linux) para salvar a alteração.
4. Clique em label_off Desativar pontos de interrupção. A cor dele muda para azul, indicando que o dispositivo está ativo. Enquanto essa configuração estiver definida, o DevTools ignora todos os pontos de interrupção definidos.
5. Teste a demonstração com diferentes valores. A demonstração agora calcula corretamente.

Cuidado:esse fluxo de trabalho só aplica uma correção ao código em execução no navegador. Ele não corrige o código para todos os usuários que visitam sua página. Para fazer isso, você precisa corrigir o código que está nos seus servidores. No entanto, você pode editar arquivos no DevTools e salvá-los nas suas origens com os espaços de trabalho.

Dica :a partir da versão 105 do Chrome, é possível editar uma função pausada em tempo real.

Próximas etapas

Sucesso: parabéns! Agora você sabe aproveitar ao máximo o Chrome DevTools para depurar o JavaScript. As ferramentas e os métodos que você aprendeu neste tutorial podem economizar inúmeras horas.

Este tutorial mostrou apenas duas maneiras de definir pontos de interrupção. O DevTools oferece muitas outras maneiras, incluindo:

• Pontos de interrupção condicionais, acionados somente quando a condição fornecida for verdadeira.
• Pontos de interrupção em exceções capturadas ou não capturadas.
• Pontos de interrupção XHR, acionados quando o URL solicitado corresponde a uma substring fornecida.

Consulte Pausar seu código com pontos de interrupção para saber quando e como usar cada tipo.

Há alguns controles de acompanhamento de código que não foram explicados neste tutorial. Consulte Passar sobre linha de código para saber mais.