Você já passou horas caçando um erro no JavaScript, adicionando console.log em cada linha, até descobrir que o problema era uma vírgula fora do lugar? Pois é, eu também. A boa notícia é que existe um jeito mais inteligente de debugar, e ele envolve ferramentas que já estão no seu navegador.
Para debugar JavaScript eficientemente, use o Chrome DevTools: abra o painel Sources, clique no número da linha para adicionar breakpoints, e execute o código passo a passo com os botões de controle. Isso permite inspecionar variáveis e fluxo sem sujar o código com console.log.
Passo 1: Identifique o erro com o console
Antes de sair colocando breakpoints, abra o console do navegador (F12 ou Ctrl+Shift+I no Chrome). Erros de sintaxe ou referência aparecem ali, com o número da linha. Anote o erro e o arquivo. Dica: evite usar console.log para tudo, ele polui o código e não mostra o fluxo completo. Prefira console.table() para arrays ou console.group() para agrupar logs.
Passo 2: Adicione breakpoints no painel Sources
Vá até a aba Sources, encontre o arquivo JavaScript e clique no número da linha onde quer pausar. Um marcador azul aparece. Erro comum: adicionar breakpoint em linha de declaração de variável, ela é executada antes da pausa. Coloque na linha seguinte, onde a variável é usada.
Passo 3: Execute passo a passo
Com o breakpoint ativo, recarregue a página ou dispare o evento que executa o código. O navegador pausa na linha. Use os botões: "Step Over" (F10) para pular funções, "Step Into" (F11) para entrar nelas, e "Step Out" (Shift+F11) para sair. Dica: olhe o painel Scope à direita, ele mostra variáveis locais e globais em tempo real.
Passo 4: Inspecione variáveis e expressões
No painel Watch, você pode adicionar expressões como minhaVariavel.length ou usuario.nome. Elas são avaliadas a cada pausa. Erro comum: esquecer que o escopo muda dentro de callbacks, adicione breakpoints dentro da função anônima também.
Passo 5: Use breakpoints condicionais
Clique com o botão direito no número da linha e selecione "Add conditional breakpoint". Digite uma condição, como contador > 5. O código só pausa quando a condição for verdadeira. Ideal para loops grandes.
Passo 6: Depure assincronismo com async/await
Para funções assíncronas, coloque breakpoints dentro do bloco try e na linha do await. Use "Step Into" para ver a Promise ser resolvida. Dica: marque "Async" no painel Call Stack para rastrear cadeias de promessas.
Checklist rápido do que você aprendeu
- [ ] Usei o console para identificar o erro inicial
- [ ] Adicionei breakpoints nas linhas certas
- [ ] Executei passo a passo com Step Over/Into
- [ ] Inspecionei variáveis no painel Scope e Watch
- [ ] Usei breakpoints condicionais para loops
- [ ] Depurei funções assíncronas com async/await
Perguntas frequentes sobre debug de JavaScript
Como debugar JavaScript no Chrome?
Abra o DevTools (F12), vá em Sources, clique no número da linha para adicionar breakpoint, e execute o código. Use os controles de passo a passo para analisar o fluxo.
Qual a diferença entre Step Over e Step Into?
Step Over (F10) executa a linha atual e pula para a próxima, sem entrar em funções chamadas. Step Into (F11) entra na função chamada, permitindo depurar seu interior.
Como debugar código assíncrono?
Coloque breakpoints dentro de funções async e na linha do await. Use "Step Into" para seguir a Promise. Ative a opção "Async" no Call Stack para rastrear cadeias.
O que fazer se o breakpoint não pausar?
Verifique se o arquivo não está minificado ou em cache. Recarregue a página com Ctrl+Shift+R para limpar o cache e forçar o download do arquivo original.
Como depurar loops grandes sem parar a cada iteração?
Use breakpoints condicionais: clique com botão direito no número da linha, adicione condição como i > 100, e o código só pausa quando a condição for verdadeira.
console.log ainda é útil?
Sim, para logs rápidos ou quando você não pode usar DevTools (ex.: em um ambiente remoto). Mas para debug estruturado, breakpoints são mais eficientes.