Aprenda a depurar JavaScript com o DevTools do Chrome

Vala consola.log depuração de uma vez por todas! Aprenda a usar os pontos de interrupção para depurar códigos nas Ferramentas do desenvolvedor do Chrome

Como um novo desenvolvedor, encontrar e corrigir bugs pode ser difícil. Você pode ser tentado a usar aleatoriamente console.log() em uma tentativa de fazer seu código funcionar corretamente. Não mais!

Este artigo é sobre depuração da maneira correta! Você aprenderá como usar as Ferramentas do desenvolvedor do Google Chrome para configurar pontos de interrupção e percorrer seu código. Esse fluxo de trabalho costuma ser uma maneira muito mais eficiente de localizar e corrigir erros em seu código.

Este tutorial mostra como depurar um problema específico, mas o fluxo de trabalho geral que você aprende é útil para depurar todos os tipos de erros de JavaScript.

Etapa 1: reproduzir o bug

Reproduzir o bug é sempre o primeiro passo para a depuração. “Reproduzir o erro” significa encontrar uma série de ações que consistentemente fazem com que o erro apareça. Você pode precisar reproduzir o bug muitas vezes, então tente eliminar quaisquer etapas desnecessárias.

Siga as instruções abaixo para reproduzir o bug que você irá corrigir neste tutorial.

  • Aqui está a página da Web com a qual trabalharemos neste tutorial. Certifique-se de abrir esta página em uma nova guia: OPEN DEMO .
  • Na demonstração, insira 5 para o número 1 .
  • Digite 1 para o número 2 .
  • Clique em Adicionar Número 1 e Número 2 .
  • Olhe para o rótulo abaixo das entradas e botão. Diz 5 + 1 = 51 .

Ops Esse resultado está errado. O resultado deve ser 6 . Este é o bug que você vai consertar.

Etapa 2: pausar o código com um ponto de interrupção

O DevTools permite pausar seu código no meio de sua execução e examinar os valores de todas as variáveis ??naquele momento. A ferramenta para pausar seu código é chamada de ponto de interrupção . Tente agora:

  • Volte para a demonstração e abra o DevTools pressionando Command + Option + I (Mac) ou Control + Shift + I (Windows, Linux).
  • Clique na guia Origens .
  • Clique em Pontos de Interrupção do Ouvinte de Eventos para expandir a seção. O DevTools revela uma lista de categorias de eventos expansíveis, como Animação e Área de Transferência .
  • Ao lado da categoria de evento Mouse , clique em Expandir.
  • Marque a caixa de seleção de cliques .
  • 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 Origens . O DevTools destaca essa linha de código: 
 function onClick() {

Por quê?

Quando você seleciona ' clique' , você configura um ponto de interrupção baseado em evento em todos os eventos de click . Quando qualquer nó é clicado e esse nó tem um manipulador de click , o DevTools é pausado automaticamente na primeira linha do manipulador de click desse nó.

Etapa 3: percorrer o código

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

  • No painel Origens do DevTools, clique em Entrar na próxima chamada de função

Entre no próximo botão de chamada de função

Este botão permite percorrer a execução da função onClick() , uma linha por vez. Pare quando o DevTools destacar a seguinte linha de código: 

 if (inputsAreEmpty ()) {
  • Agora clique no botão Passar a próxima chamada de função :

Passe o próximo botão de chamada de função

Isso diz ao DevTools para executar inputsAreEmpty() sem entrar nele. Observe como o DevTools pula algumas linhas de código. Isso ocorre porque inputsAreEmpty() avaliado como false, portanto, o bloco de código da instrução if não foi executado.

Posts Relacionados: