Primeiros passos com a ferramenta de depuração do Javascript do Chrome

Um passo a passo de como começar a aprender a utilizar esta ferramenta, que é uma mão na roda na vida de um programador JavaScript

Você que está começando a se familiarizar com a linguagem JavaScript precisa conhecer a ferramenta que o Chrome Dev Tools disponibiliza para os programadores.

Mas, vamos partir do princípio: o que é depuração? Depuração (do inglês debug) nada mais é que o processo de encontrar erros ou possíveis bugs no seu código. Para fazer isso, você precisa acompanhar o passo a passo da execução do seu algoritmo.

O Google Chrome já vem com essa magnífica ferramenta de fábrica (amém Google rsrsrs) na aba do Chrome Dev Tools. Nela, você consegue marcar uma linha, ou várias, do seu código para que a página simplesmente pare a execução e não faça nada até que você decida - esses são os chamados “breakpoints”

Abaixo, irei desmitificar essa ferramenta para você começar a utilizar já. Utilizarei como exemplo um trecho de código que você precisa digitar um número e ele imprime através do console.log o número digitado, o seu posterior e o seu antecessor.

Passo 1. No seu arquivo HTML abra a Ferramentas do Desenvolvedor (CTRL + Shift + I) e vá para a aba Source.

Passo 2. Ele irá te redirecionar para essa aba, que é dividida em 3 partes:

• File Navigator: que reúne todos os arquivos solicitados pela página;
• Code Editor: que após selecionar um arquivo aparece o código para visualização; e
• JavaScript debugging: que são as ferramentas para inspecionar o javascript da página que iremos utilizar.

Passo 3. Abra o seu arquivo javascript. No meu caso, é o script.js.

Passo 4. Agora você precisará definir a linha de código que você quer que o JavaScript interrompa a sua execução, o chamado breakpoint. Irei selecionar a linha 5. Para isso, apenas clique na margem onde está localizado o número da linha e observe que ela ficará marcada com uma seta azul.

Passo 5. Pressione F5 para que sua página recarregue. O meu exercício de exemplo me pede para que eu digite um número e eu digitei o número 7.

Passo 6. Após eu pressionar a tecla de OK, a execução do código irá parar na linha marcada no Passo 4 e mostrará que está pausado no debugger.

Se você passar o mouse acima de uma variável, ele te mostrará o valor que ela está assumindo. Assim, consigo identificar se o código está prosseguindo como eu esperava. Como eu digitei o número 7, a variável anterior é 6 e a posterior é 8. Está tudo correto.

Passo 7. Para percorrer a execução do meu código, ele conta com os seguintes recursos:

• Resume script execution
• Step over next function
• Step into next function call
• Step out of current function
• Deactivate breakpoints e
• Pause on exceptions

Para esse pequeno exemplo, irei utilizar apenas o Resume script execution, para voltar a execução do código normalmente até encontrar o próximo breakpoint. Como não defini nenhum outro breakpoint, ele terminará de executar o código!

Quer conhecer mais mais sobre o debugger e se aprofundar? Visite: https://developers.google.com/web/tools/chrome-devtools/javascript/