Primeiros passos com a depuração do JavaScript no Chrome DevTools

Technical Writer, Chrome DevTools & Lighthouse

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 logo abaixo.

Etapa 1: reproduzir o bug.

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

Clique em Open Demo. A demonstração abrirá em uma nova guia.
Insira 5 na caixa de texto Number 1.
Insira 1 na caixa de texto Number 2.
Clique em Add Number 1 and Number 2. A etiqueta abaixo do botão informa 5 + 1 = 51. O resultado deveria ser 6. Esse é o bug que você corrigirá.

Imagem 1. O resultado de 5 + 1 é 51. Deveria ser 6.

Etapa 2: familiarizar-se com a IU 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.

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

Imagem 2. O painel Console.
Clique na guia Sources.

Imagem 3. O painel Sources

A IU do painel Sources tem 3 partes:

As três partes da IU do painel Sources. — **Imagem 4**. As três partes da **IU do painel** Sources

O painel File Navigator. Todo arquivo solicitado pela página é listado aqui.
O painel Code Editor. Após selecionar um arquivo no painel File Navigator, os conteúdos desse arquivo são exibidos aqui.
O painel JavaScript Debugging. Várias ferramentas para inspecionar o JavaScript da página. Se sua janela do DevTools estiver ampliada, esse painel é exibido à direita do painel Code Editor.

Etapa 3: 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. 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 método console.log() pode dar conta do trabalho, mas 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 o 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 o código está estruturado.
Nas suas instruções console.log(), você precisa especificar exatamente cada valor que quer inspecionar. Com os pontos de interrupção, o DevTools exibe para você os valores de todas as variáveis naquele momento, em tempo real. Às vezes existem variáveis afetando seu código que você não percebeu.

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

Se você der um passo atrás e pensar em como o aplicativo funciona, pode chegar à conclusão de que a soma incorreta (5 + 1 = 51) é calculada no listener de eventos click que está associado ao botão Add Number 1 and Number 2. Dessa forma, você provavelmente quer pausar o código próximo ao tempo no qual o listener click é executado. O Event Listener Breakpoints permite que você faça exatamente isso:

No painel JavaScript Debugging, clique em Event Listener Breakpoints para expandir a seção. O DevTools revela uma lista de categorias de evento expansíveis, como o Animation e o Clipboard.
Ao lado da categoria de evento Mouse, clique em Expand . O DevTools revela uma lista de eventos de mouse, como o click e o mousedown. Há uma caixa de seleção ao lado de cada evento.
Marque a caixa de seleção click. O DevTools agora está configurado para pausar automaticamente quando qualquer listener de evento click for executado.

Imagem 5. A caixa de seleção click está ativada
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 deve estar pausado nesta linha de código:
```
function onClick() {
```
Se você está pausado em uma linha de código diferente, pressione Resume Script Execution até que você esteja pausado na linha correta.

Observação: se tiver pausado em uma linha diferente, você tem uma extensão de navegador que registra um listener de evento click em cada página que você visita. Você ficou pausado no listener click da extensão. Se usar o modo de navegação anônima navegador no privado, que desativa todas as extensões, você pode ver que pausou todas as vezes na linha de código correta.

O Event Listener Breakpoints é apenas um dos vários tipos de pontos de interrupção disponíveis no DevTools. Vale a pena memorizar todos os tipos diferentes, porque cada tipo ajuda você a depurar cenários diferentes da maneira mais rápida possível. Veja 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 é 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:

No painel Sources do DevTools, clique em Step into next function call para percorrer a execução da função onClick() uma linha por vez. O DevTools destaca esta linha de código:
```
if (inputsAreEmpty()) {
```
Clique em 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 observar o código em get-started.js, você verá que o bug está provavelmente na funçãoupdateLabel(). 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 do bug.

Etapa 5: definir um ponto de interrupção da 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.

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

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

À esquerda do código, você pode ver o número da linha dessa linha de código específica, que é 32. Clique em 32. O DevTools deixa o ícone do 32 azul. 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.
Clique em Resume script execution . O script continua a execução até alcançar a linha 32. Nas linhas 29, 30, e 31, o DevTools exibe os valores de addend1, addend2 e sum à direita do ponto e vírgula de cada linha.

Imagem 6. O DevTools pausa no ponto de interrupção da linha de código na linha 32.

Etapa 6: conferir valores das variáveis

Os valores do 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: o painel Scope

Quando você está pausado em uma linha de código, o painel Scope exibe para você qual o local e as variáveis globais atualmente definidas, juntamente com o valor de cada variável. Ele também exibe variáveis de fechamento, quando é o caso. Clique duas vezes sobre o valor de uma variável para editá-lo. Quando você não está pausado sobre uma linha de código, o painel Scope fica vazio.

Método 2: Watch Expressions

A guia Watch Expressions permite que você monitore os valores de variáveis ao longo do tempo. Como o nome indica, o Watch Expressions não é limitado apenas a variáveis. Você pode armazenar qualquer expressão JavaScript válida em uma Watch Expression. Experimente agora:

Clique na guia Watch.
Clique em Add Expression .
Digite typeof sum.
Pressione Enter. O DevTools exibe typeof sum: "string". O valor à direita dos dois pontos é o resultado da Watch Expression.

Imagem 8. O painel Watch Expression pane (canto inferior direito) após a criação da Watch Expression typeof sum. Se a janela do DevTools for grande, o painel Watch Expression estará localizado à direita, acima do painel Event Listener Breakpoints.

Como previsto, sum está sendo avaliado como string em vez de número. Esse é o motivo do bug.

Método 3: o Console

Além da visualização de 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 potenciais correções de bugs. Experimente agora:

Se você não estiver com a gaveta Console aberta, pressione Escape para abri-la. Ela será aberta na parte inferior da janela do DevTools.
No Console, digite parseInt(addend1) + parseInt(addend2). Essa instrução funciona porque você está pausado em uma linha onde addend1 e addend2 estão no escopo.
Pressione Enter. O DevTools avalia a instrução e exibe 6, que é o resultado esperado da demonstração.

Imagem 9. A gaveta Console, após avaliar parseInt(addend1) + parseInt(addend2).

Etapa 7: 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 novamente a demonstração. Não é necessário sair do DevTools para aplicar a correção. Você pode editar o código JavaScript diretamente na IU do DevTools. Experimente agora:

Clique em Resume script execution .
No Code Editor, substitua a linha 31, var sum = addend1 + addend2, por var sum = parseInt(addend1) + parseInt(addend2).
Pressione Command+S (Mac) ou Control+S (Windows, Linux) para salvar sua alteração.
Clique em Deactivate breakpoints . Ele é alterado para a cor azul, indicando que está ativo. Enquanto essa configuração for mantida, o DevTools ignorará todos os pontos de interrupção definidos.
Teste a demonstração com valores diferentes. A demonstração agora realiza o cálculo corretamente.

Atenção: esse fluxo de trabalho é aplicável apenas a correções de código executado no seu navegador. Ela não se aplica ao código executado por todos os usuários que visitam sua página. Para fazer isso, você precisa corrigir o código que está nos seus servidores.

Próximas etapas

Parabéns! Você sabe como aproveitar ao máximo o Chrome DevTools para depurar JavaScript. As ferramentas e os métodos que você aprendeu neste tutorial podem economizar horas incalculáveis.

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 for verdadeira.
Pontos de interrupção em exceções capturadas ou não capturadas.
Pontos de interrupção XHR, acionados quando o URL selecionado corresponder a uma substring informada.

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

Feedback

Was this page helpful?

Yes

What was the best thing about this page?

It helped me complete my goal(s)