Depurar o JavaScript

Kayce Basques

Sofia Emelianova

Este tutorial ensina os fluxos de trabalho básicos para depuração de qualquer problema 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 o primeiro passo para a depuração.

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

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

Familiarizar-se com a interface do painel Sources

O DevTools fornece diversas ferramentas para tarefas diferentes, como alteração de CSS, criação de perfil de 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 navegue até o painel Sources.

   

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

1. A guia Página 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 Página, o conteúdo dele será exibido aqui.

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

   Se a janela do DevTools estiver ampliada, o Debugger vai ficar à direita do Code Editor por padrão. Nesse caso, as guias Escopo e Monitor se juntam a Pontos de interrupção, Pilha de chamadas e outras como seções colapsáveis.

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

Um método comum para depurar problemas desse tipo é inserir várias instruções console.log() no código, para inspecionar valores durante a execução do script. 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 dar conta do trabalho, mas os pontos de interrupção são mais rápidos. Um ponto de interrupção permite pausar o código no meio da execução e examinar todos os valores naquele momento. Os pontos de interrupção têm algumas vantagens sobre o método console.log():

• Com console.log(), você precisa abrir o código-fonte manualmente, 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, você pode pausar no código relevante sem mesmo saber como ele 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 que afetam seu código sem que você perceba.

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

Se você der um passo atrás e pensar em como o app funciona, pode chegar à conclusão de que a soma incorreta (5 + 1 = 51) é calculada no listener de eventos click associado ao botão Add Number 1 and Number 2. Portanto, você provavelmente quer pausar o código próximo ao tempo 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 evento 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 de mouse, como click e mousedown. Cada evento tem uma caixa de seleção ao lado.

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

   

4. Voltando à 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 deve estar pausado nesta linha de código:

   function onClick() {
   

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

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

Percorrer o código

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

1. No painel Sources do DevTools, clique em step_into Step into next function call para acompanhar 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 step_over Step over next function call.

   O DevTools executa inputsAreEmpty() sem entrar na função para acompanhamento. Observe como o DevTools pula algumas linhas de código. Isso ocorre porque inputsAreEmpty() foi avaliado como falso, portanto, 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 da função updateLabel(). Em vez de acompanhar cada linha de código, use 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 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ê 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 da linha dessa linha específica de código, que é 32. Clique em 32. O DevTools coloca um ícone azul acima de 32. Isso significa que há um ponto de interrupção de linha de código nessa linha. O DevTools sempre faz uma pausa antes que essa linha de código seja executada.

3. Clique em retomar Retomar execução do script. O script continua a execução até alcançar a linha 32. Nas linhas 29, 30 e 31, o DevTools mostra os valores de addend1, addend2 e sum inline ao lado das declarações.

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

Verificar valores de 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 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 foram definidas nesse ponto da execução, junto com o valor de cada variável. Ele também mostra variáveis de fechamento, quando aplicável. Quando você não está pausado em uma linha de código, a guia Escopo fica vazia.

Clique duas vezes em um valor de variável para editá-lo.

Método 2: expressões de monitoramento

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

Experimente agora:

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

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

Como previsto, sum está sendo avaliado como string em vez de como número. Você confirmou que esse é o motivo do bug.

Método 3: o console

Além de conferir mensagens console.log(), você também pode usar o console para avaliar instruções arbitrárias do JavaScript. Com relação às depurações, 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 Escape para abri-la. Ela é aberta na parte de baixo 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.

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

Aplicar uma correção

Você encontrou uma correção para o bug. Agora, só resta 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 interface do DevTools. Experimente agora:

1. Clique em retomar 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, Linux) para salvar a alteração.
4. Clique em label_off Desativar pontos de interrupção. A cor muda para azul para indicar que está ativo. Enquanto essa configuração for mantida, o DevTools vai ignorar todos os pontos de interrupção definidos.
5. Teste a demonstração com valores diferentes. A demonstração agora realiza o cálculo corretamente.

Próximas etapas

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

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

Consulte Pausar o 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 por linha de código para saber mais.