Depurar o JavaScript

Kayce Basques

Twitter GitHub Glitch

Sofia Emelianova

GitHub

Este tutorial ensina o fluxo de trabalho básico para depurar qualquer problema de JavaScript no DevTools. Leia ou assista a versão em vídeo deste tutorial abaixo.

Etapa 1: reproduzir 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 de texto Número 1.
3. Insira 1 na caixa de texto Número 2.
4. Clique em Adicionar números 1 e 2. A etiqueta abaixo do botão diz 5 + 1 = 51. O resultado precisa ser 6. Esse é o bug que você vai corrigir.

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

Etapa 2: 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 da página e monitoramento de solicitações de rede. O painel Sources é onde você depura o JavaScript.

1. Abra o DevTools pressionando Command + Option + J (Mac) ou Control + Shift + J (Windows e Linux). Esse atalho abre o painel Console.

   

2. Clique na guia Origens.

   

A interface do painel Fontes tem três partes:

1. O painel Navegador de arquivos. Todos os arquivos solicitados pela página são listados aqui.
2. Painel Code Editor. Depois de selecionar um arquivo no painel File Navigator, o conteúdo do arquivo vai ser mostrado aqui.
3. O painel Depuração de JavaScript. Várias ferramentas para inspecionar o JavaScript da página. Se a janela do DevTools for grande, esse painel será exibido à direita do painel Code Editor.

Etapa 3: 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 para 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 fazem isso mais rápido. 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 em relação ao método console.log():

• Com console.log(), você precisa abrir manualmente o código-fonte, encontrar o código relevante, inserir as instruções console.log() e recarregar 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(), é necessário especificar explicitamente cada valor que você quer inspecionar. Com os pontos de interrupção, o DevTools mostra os valores de todas as variáveis naquele momento. Às vezes, existem variáveis afetando seu código que você nem conhece.

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

Se você parar e pensar em como o app funciona, poderá prever que a soma incorreta (5 + 1 = 51) é calculada no listener de eventos click associado ao botão Adicionar números 1 e 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. No painel Depuração de JavaScript, clique em Pontos de interrupção do listener de eventos 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 Expandir . O DevTools revela uma lista de eventos de 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 eventos click for executado.

   

4. De volta à demonstração, clique em Add Number 1 and Number 2 novamente. 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 Resume Script Execution até que esteja pausado na linha correta.

   Observação: se você tiver pausado em uma linha diferente, terá uma extensão do navegador que registra um listener de eventos click em cada página acessada. 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.

O Event Listener Breakpoints é apenas um dos muitos tipos de pontos de interrupção disponíveis no DevTools. Vale a pena memorizar todos os diferentes tipos, porque cada um deles ajuda a depurar diferentes cenários o mais rápido possível. Consulte Pausar o código com pontos de interrupção para saber quando e como usar cada tipo.

Etapa 4: percorrer o código

Uma causa comum de bugs é quando um script é executado na ordem errada. Percorrer o 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 next function call para percorrer a execução da função onClick(), uma linha de cada vez. O DevTools destaca esta linha de código:

   if (inputsAreEmpty()) {
   

2. Clique em Pular a próxima chamada de função . O DevTools executa inputsAreEmpty() sem intervir 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ê analisar o código em get-started.js, vai notar que o bug provavelmente está na função updateLabel(). Em vez de percorrer 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.

Etapa 5: 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 específica de código, 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, é possível ver o número dessa linha específica, que é 32. Clique em 32. O DevTools coloca um ícone azul acima do 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 execução do script . O script continua em execução até chegar à linha 32. Nas linhas 29, 30 e 31, o DevTools mostra os valores de addend1, addend2 e sum inline ao lado das declarações.

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

Etapa 6: 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 os valores das variáveis.

Método 1: painel "Escopo"

Quando você está pausado em uma linha de código, o painel Escopo mostra quais variáveis locais e globais estão definidas no momento, com o valor de cada uma delas. Ele também mostra variáveis de fechamento, quando aplicável. Clique duas vezes no valor de uma variável para editá-lo. Quando você não está pausado em uma linha de código, o painel Scope fica vazio.

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

A guia Watch Expressions permite monitorar os valores das variáveis ao longo do tempo. Como o nome indica, Watch Expressions não se limitam apenas a variáveis. É possível armazenar qualquer expressão JavaScript válida em uma Watch Expression. Experimente agora:

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

A captura de tela acima mostra o painel Watch Expression (canto inferior direito) após criar a expressão de observação typeof sum. Se a janela do DevTools for grande, o painel Watch Expression estará à direita, acima do painel Event Listener Breakpoints.

Como suspeito, sum está sendo avaliado como string, quando deveria ser um número. Agora 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 do Console não estiver aberta, pressione Esc para abri-la. Ele será aberto 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 exibe 6, que é o resultado esperado da demonstração.

A captura de tela acima mostra a gaveta Console depois de avaliar o parseInt(addend1) + parseInt(addend2).

Etapa 7: 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 é necessário sair do DevTools para aplicar a correção. É possível editar o código JavaScript diretamente na IU do DevTools. Experimente agora:

1. Clique em Retomar 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 Desativar pontos de interrupção . A cor dele muda para azul, indicando que o dispositivo está ativo. Enquanto essa configuração é mantida, o DevTools ignora todos os pontos de interrupção definidos.
5. Teste a demonstração com valores diferentes. A demonstração agora calcula corretamente.

Cuidado:este fluxo de trabalho só se aplica a correções do 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, é possível editar arquivos no DevTools e salvá-los nas origens usando os Espaços de trabalho.

Importante:a partir do Chrome 105, você pode editar uma função pausada em tempo real.

Próximas etapas

Parabéns! Agora você sabe aproveitar ao máximo o Chrome DevTools ao depurar 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, que são acionados quando o URL solicitado corresponde a uma substring que você fornece.

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 Sobre linha de código para saber mais.