Debugar JavaScript: Guia Prático com Chrome DevTools

Se você já passou horas olhando para um código que não funcionava, sabe que debugar JavaScript é uma habilidade que separa projetos que andam dos que empacam. O Chrome DevTools é a ferramenta que resolve isso, e vou te mostrar o passo a passo para usar breakpoints, inspecionar variáveis e controlar a execução do código, tudo sem sair do navegador.

Passo 1: Abra o DevTools e encontre seu código

No Chrome, pressione F12 ou Ctrl+Shift+I (Windows/Linux) / Cmd+Option+I (Mac). Vá até a aba Sources. Lá, navegue pela árvore de arquivos à esquerda até achar o seu script .js. Dica: se não achar, clique em Ctrl+P e digite o nome do arquivo. Erro comum: muitos esquecem de desabilitar o cache do navegador (marque "Disable cache" na aba Network) para garantir que o DevTools carregue sempre a versão mais recente do código.

Passo 2: Adicione um breakpoint na linha suspeita

Clique no número da linha onde você acha que o erro acontece, uma marcação azul aparece. Esse é o breakpoint. Recarregue a página (F5) ou execute a ação que dispara o código. A execução para exatamente naquela linha, antes dela rodar. Dica: se não sabe onde está o erro, use debugger; no código-fonte, ele funciona como um breakpoint automático ao abrir o DevTools. Erro comum: colocar breakpoint em linha de declaração de variável sem valor inicial, que não pausa a execução.

Passo 3: Inspecione variáveis e controle a execução

Com o código pausado, passe o mouse sobre qualquer variável para ver seu valor atual. Use os botões no topo da aba Sources:

• F10 (Step Over): avança para a próxima linha, sem entrar em funções chamadas.
• F11 (Step Into): entra dentro de uma função para depurar seu interior.
• Shift+F11 (Step Out): sai da função atual e volta para quem a chamou.

Dica: no painel Scope (à direita), você vê todas as variáveis locais e globais. Erro comum: pular linhas sem verificar o valor das variáveis, pare e inspecione a cada passo.

Passo 4: Use o console para testar hipóteses

Enquanto o código está pausado, vá até a aba Console e digite expressões JavaScript. Por exemplo, se você tem uma variável total, digite total * 2 para simular um cálculo. Isso testa hipóteses sem alterar o código-fonte. Dica: use console.log() estrategicamente antes de breakpoints para rastrear valores ao longo da execução. Erro comum: confiar só no console.log sem pausar, você perde o contexto exato do erro.

Checklist rápido do que você fez

• Abriu o DevTools e localizou o script.
• Adicionou breakpoint na linha suspeita.
• Controlou a execução com F10, F11 e Shift+F11.
• Inspecionou variáveis no painel Scope e no Console.
• Testou hipóteses com expressões no Console.

Agora você tem um método para debugar JavaScript que corta horas de tentativa e erro. Na próxima vez que um bug aparecer, siga esses passos, o Chrome DevTools é seu aliado.

Perguntas Frequentes sobre debugar JavaScript

Como pausar a execução em uma condição específica?

Use breakpoints condicionais: clique com o botão direito no número da linha, selecione "Add conditional breakpoint" e digite uma expressão (ex.: x === 5). A execução pausa só quando a condição for verdadeira.

O que fazer se o breakpoint não funciona?

Verifique se o cache está desabilitado (aba Network, marque "Disable cache"). Também confirme se o arquivo não está minificado, use a opção "Pretty print" (ícone {} no canto inferior do painel Sources) para formatá-lo.

Como debugar código assíncrono (promises, async/await)?

Marque a opção "Async" no painel Sources, ao lado dos breakpoints. Com isso, o DevTools pausa em chamadas assíncronas como fetch() ou await, permitindo inspecionar o estado da promise.

Qual a diferença entre Step Over e Step Into?

Step Over (F10) avança para a próxima linha sem entrar em funções, útil quando você confia na função chamada. Step Into (F11) entra na função, permitindo depurar seu interior, use quando suspeitar que o erro está dentro dela.

Posso debugar JavaScript no VS Code?

Sim, com a extensão "Debugger for Chrome" ou o depurador nativo do VS Code. Configure um launch.json apontando para seu servidor local e use breakpoints diretamente no editor, sem sair do VS Code.