Depurar o JavaScript

Kayce Basques

Sofia Emelianova

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

Reproduza o bug.

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

1. Abra esta demonstração em uma nova guia.
2. Insira 5 na caixa Número 1.
3. Insira 1 na caixa Número 2.
4. Clique em Add Number 1 and Number 2. O rótulo abaixo do botão diz 5 + 1 = 51. O resultado precisa ser 6. Esse é o bug que você corrigirá.

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

Conhecer a interface do painel Origens

O DevTools fornece diversas ferramentas para diferentes tarefas, como alteração de CSS, criação de perfil de página o desempenho de carregamento e o monitoramento das solicitações de rede. O painel Sources é onde você depura JavaScript.

1. Abra o DevTools e navegue até o painel Sources.

   

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

1. A guia Page com a árvore de arquivos. Todos os arquivos solicitados pela página são listados aqui.
2. A seção Editor de código. Depois de selecionar um arquivo na guia Página, o conteúdo do o arquivo são exibidos aqui.

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

   Se a janela do DevTools for larga, por padrão, o Debugger estará à direita do editor de código. Nesse caso, as guias Escopo e Observação juntam Pontos de interrupção, Pilha de chamadas e outras como seções recolhíveis.

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 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 fazer o trabalho, mas os pontos de interrupção podem ser mais rápidos. Um permite pausar o código no meio da execução e examinar todos os valores nesse momento no tempo. 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 depois atualize a página para ver as mensagens do Cloud. Com os pontos de interrupção, você pode pausar no código relevante sem nem saber como ele é estruturados.
• Nas instruções console.log(), é necessário especificar explicitamente cada valor que você quer ser inspecionado. Com os pontos de interrupção, o DevTools mostra os valores de todas as variáveis naquele momento. Às vezes, há variáveis afetando o código que você nem percebe.

Resumindo, 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á adivinhar que o a soma incorreta (5 + 1 = 51) é calculada no listener de eventos click associado ao Botão Adicionar número 1 e número 2. Portanto, é recomendável pausar o código que o listener click executa. Os Pontos de interrupção do listener de eventos permitem fazer exatamente isso:

1. Na seção Depurador, clique em Pontos de interrupção do listener de eventos para expandir as nesta seção. O DevTools revela uma lista de categorias de eventos expansíveis, como Animation e Copiar e colar.
2. Ao lado da categoria de evento Mouse, clique em Expandir arrow_right. 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 click um listener de eventos é executado.

   

4. De volta à demonstração, clique em Adicionar número 1 e número 2 novamente. O DevTools pausa a demonstração e destaca uma linha de código no painel Sources. O DevTools deve estar pausado nessa linha código:

   function onClick() {
   

   Se você estiver pausado em uma linha de código diferente, pressione retomar Retomar execução do script até parar na linha correta.

Os Event Listener Breakpoints são apenas um dos vários tipos de pontos de interrupção disponíveis no DevTools. Está vale a pena explorar os diferentes tipos, porque cada um ajuda a depurar diferentes tipos cenários o mais rápido possível. Consulte Pausar o código com pontos de interrupção para saber quando e como fazer isso usar cada tipo.

Percorrer o código

Uma causa comum de bugs é quando um script é executado na ordem errada. Percorrer seu código permite analisar a execução do código, uma linha por vez, e descobrir exatamente onde ela está sendo executada em uma ordem diferente da esperada. Experimente agora:

1. No painel Sources do DevTools, clique em step_into Step into next function call para avançar a execução da função onClick(), uma linha por vez. O DevTools destaca a seguinte linha de código:

   if (inputsAreEmpty()) {
   

2. Clique em step_over Pular para a próxima chamada de função.

   O DevTools executa inputsAreEmpty() sem entrar nela. Observe como o DevTools pula algumas linhas o código-fonte. Isso ocorre porque inputsAreEmpty() é avaliado como falso, de modo que o bloco da instrução if de código não foi executado.

Essa é a ideia básica de percorrer o código. Ao observar o código em get-started.js, é possível veja que o bug provavelmente está em algum lugar na função updateLabel(). 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 provável o local do bug.

Definir um ponto de interrupção da linha de código

Pontos de interrupção de linha de código são o tipo mais comum de ponto de interrupção. Quando você tem uma linha específica em que você quer pausar, 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 dessa linha específica, que é 32. Clique em 32. O DevTools coloca um ícone azul sobre 32. Isso significa que há um um ponto de interrupção de linha de código nessa linha. O DevTools agora sempre pausa antes que essa linha de código seja executada.

3. Clique em Retomar Retomar execução do script. A continua a ser executado até chegar à linha 32. Nas linhas 29, 30 e 31, o DevTools mostra os valores de addend1, addend2 e sum in-line ao lado das declarações.

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

Verificar os valores das variáveis

Os valores de addend1, addend2 e sum parecem suspeitos. Eles estão entre aspas, que significa que eles são strings. Essa é uma boa hipótese para explicar a causa do bug. Agora é hora de coletar mais informações. O DevTools fornece muitas ferramentas para examinar e a distribuição dos valores dos dados.

Método 1: inspecionar o escopo

Quando você pausa em uma linha de código, a guia Escopo mostra quais variáveis locais e globais são definidos 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 observação

A guia Assistir permite monitorar os valores das variáveis ao longo do tempo. O recurso Watch não se limita a variáveis. É possível armazenar qualquer código JavaScript válido na guia Watch.

Experimente agora:

1. Clique na guia Assistir.
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 de sua expressão.

Esta captura de tela mostra a guia Assistir (canto inferior direito) depois de criar o relógio typeof sum expressão.

Conforme suspeito, sum está sendo avaliado como uma string, quando deveria ser um número. Você já confirmou que essa é a causa do bug.

Método 3: o console

Além de visualizar mensagens console.log(), também é possível usar o console para avaliar valores arbitrários instruções JavaScript. Em termos de depuração, use o console para testar possíveis correções se há insetos. Experimente agora:

1. Se a gaveta do console não estiver aberta, pressione Esc para abri-la. Ele é aberto na parte inferior na janela do DevTools.
2. No console, digite parseInt(addend1) + parseInt(addend2). Esta instrução funciona porque você são pausadas 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 mostra 6, que é o resultado esperado que a demonstração produza.

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

Aplicar uma correção

Você encontrou uma correção para o bug. Só falta testar a correção editando o código e execute a demonstração novamente. Não é preciso 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 e 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 definida, o DevTools ignorará qualquer os pontos de interrupção que você definiu.
5. Teste a demonstração com valores diferentes. A demonstração agora faz o cálculo corretamente.

Próximas etapas

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 fornecida.

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