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 ser6
. 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:

- 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çõesconsole.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.
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 porqueinputsAreEmpty()
foi avaliado como falso, portanto, o bloco de código da instruçãoif
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
esum
à 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 ondeaddend1
eaddend2
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
, porvar 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.