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
5para o número 1 . - Digite
1para 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.
