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.
- Abra esta demonstração em uma nova guia.
- Insira
5
na caixa de texto Número 1. - Insira
1
na caixa de texto Número 2. - Clique em Adicionar números 1 e 2. A etiqueta abaixo do botão diz
5 + 1 = 51
. O resultado precisa ser6
. 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.
Abra o DevTools pressionando Command + Option + J (Mac) ou Control + Shift + J (Windows e Linux). Esse atalho abre o painel Console.
Clique na guia Origens.
A interface do painel Fontes tem três partes:
- O painel Navegador de arquivos. Todos os arquivos solicitados pela página são listados aqui.
- Painel Code Editor. Depois de selecionar um arquivo no painel File Navigator, o conteúdo do arquivo vai ser mostrado aqui.
- 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çõesconsole.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:
- 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.
- 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.
Marque a caixa de seleção click. O DevTools agora está configurado para pausar automaticamente quando qualquer listener de eventos
click
for executado.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.
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:
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()) {
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 porqueinputsAreEmpty()
foi avaliado como falso, então o bloco de código da instruçãoif
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:
Confira a última linha de código em
updateLabel()
:label.textContent = addend1 + ' + ' + addend2 + ' = ' + sum;
À 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.
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
esum
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:
- Clique na guia Assistir.
- Clique em Adicionar expressão .
- Digite
typeof sum
. - 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:
- Se a gaveta do Console não estiver aberta, pressione Esc para abri-la. Ele será aberto 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 de código em queaddend1
eaddend2
estão no escopo. - 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:
- Clique em Retomar execução do script .
- No Editor de código, substitua a linha 31,
var sum = addend1 + addend2
, porvar sum = parseInt(addend1) + parseInt(addend2)
. - Pressione Command + S (Mac) ou Control + S (Windows e Linux) para salvar a alteração.
- 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.
- Teste a demonstração com valores diferentes. A demonstração agora calcula corretamente.
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.