Você já escreveu uma função em JavaScript que simplesmente não funcionava? Talvez você tenha passado minutos, ou horas, olhando para o código, sem entender por que o resultado não era o esperado. Eu já passei por isso, e sei como é frustrante.
Debugar JavaScript é, basicamente, o ato de encontrar e corrigir esses erros. Não se trata de um dom místico, mas de um processo metódico que qualquer pessoa pode aprender. Neste guia, vou te mostrar o caminho que eu uso: do primeiro contato com o erro até a correção final.
Pré-requisitos: Um navegador moderno (Chrome, Firefox ou Edge), um editor de código e um arquivo HTML simples com JavaScript. Se você já tem um projeto, melhor ainda.
Passo 1: Abra as Ferramentas do Desenvolvedor
O primeiro passo é abrir o DevTools do seu navegador. No Chrome, pressione F12 ou Ctrl+Shift+I (Windows/Linux) ou Cmd+Option+I (Mac). É aqui que tudo acontece.
Você vai ver várias abas: Elements, Console, Sources, Network, entre outras. Para debugar, vamos focar em duas: Console e Sources.
Dica: Se você estiver usando Firefox, o atalho é o mesmo. No Edge, também. A interface pode variar um pouco, mas os conceitos são idênticos.
Passo 2: Identifique o Erro no Console
Quando seu código JavaScript encontra um problema, o navegador geralmente exibe uma mensagem de erro no Console. É como um bilhete deixado pelo código: "algo deu errado aqui".
Por exemplo, se você tentar acessar uma propriedade de undefined, verá algo como: TypeError: Cannot read properties of undefined (reading 'nome'). A mensagem inclui o nome do arquivo e o número da linha onde o erro ocorreu.
Erro comum a evitar: Ignorar a mensagem de erro e sair mudando o código aleatoriamente. Leia a mensagem com calma. Muitas vezes, ela já diz exatamente o que está errado.
Passo 3: Use console.log() para Rastrear Valores
Se o erro não for óbvio, ou se você quer entender o fluxo do código, console.log() é seu melhor amigo. Coloque console.log(variavel) em pontos estratégicos para ver o valor de variáveis em diferentes momentos.
function calcularTotal(preco, quantidade) { console.log('Preço:', preco); console.log('Quantidade:', quantidade); let total = preco * quantidade; console.log('Total:', total); return total; }
Dica: Use console.table() para arrays e objetos. A saída fica muito mais legível.
Erro comum a evitar: Deixar console.log() no código final. Embora não quebre nada, polui o console. Remova-os após o debug.
Passo 4: Defina um Breakpoint no Painel Sources
O console.log() é útil, mas tem um limite: você precisa adivinhar onde colocar. Com breakpoints, você pausa a execução do código em uma linha específica e pode inspecionar o estado de todas as variáveis naquele momento.
No painel Sources, abra seu arquivo JavaScript. Clique no número da linha onde você quer pausar. Uma marca azul aparecerá. Agora, execute a ação que dispara aquela função. O navegador pausará exatamente ali.
Dica: Você pode adicionar breakpoints condicionais. Clique com o botão direito no número da linha e escolha "Add conditional breakpoint". Digite uma condição, como quantidade > 10. O código só pausará quando essa condição for verdadeira.
Erro comum a evitar: Colocar breakpoint em uma linha que nunca é executada (por exemplo, dentro de um if que nunca é verdadeiro). Verifique se o fluxo do código realmente passa por ali.
Passo 5: Navegue pelo Código com os Botões de Controle
Quando o código pausa em um breakpoint, o painel Sources mostra botões de controle. Eles são:
- Resume (F8): Continua a execução até o próximo breakpoint.
- Step over (F10): Executa a linha atual e para na próxima. Se a linha chamar uma função, ela é executada por completo.
- Step into (F11): Entra dentro de uma função chamada na linha atual.
- Step out (Shift+F11): Sai da função atual e volta para quem a chamou.
Dica: Use Step over para a maior parte do tempo. Use Step into apenas quando quiser inspecionar o interior de uma função específica.
Erro comum a evitar: Ficar clicando sem rumo. Tenha um objetivo: "Quero ver o valor de total antes do return" ou "Quero entender por que o loop está infinito".
Passo 6: Inspecione Variáveis e o Escopo
Com o código pausado, olhe para o painel do lado direito. Você verá:
- Watch: Adicione expressões para monitorar (ex.:
preco * quantidade). - Scope: Mostra as variáveis locais, de closure e globais disponíveis no momento.
- Call Stack: Mostra a pilha de chamadas, quais funções foram chamadas para chegar até ali.
Dica: Passe o mouse sobre qualquer variável no código para ver seu valor atual. É mais rápido do que adicionar ao Watch.
Erro comum a evitar: Ignorar o Call Stack. Se você está dentro de uma função e não sabe como chegou ali, o Call Stack mostra o caminho completo. Isso é essencial para debugar chamadas aninhadas.
Passo 7: Corrija o Erro e Teste Novamente
Agora que você identificou o problema, vá para seu editor de código, faça a correção e salve o arquivo. No navegador, recarregue a página (F5). Se você removeu os breakpoints, a execução será normal.
Teste o cenário que antes estava quebrado. Se funcionou, ótimo. Se não, repita o processo: console, breakpoints, inspeção.
Dica: Faça uma alteração de cada vez. Se você mudar três linhas e algo quebrar, não saberá qual delas causou o problema.
Erro comum a evitar: Achar que o navegador atualizou automaticamente. Sempre recarregue a página após salvar o código.
Checklist: O Que Você Aprendeu
- [ ] Abrir o DevTools (F12).
- [ ] Ler mensagens de erro no Console.
- [ ] Usar
console.log()para rastrear valores. - [ ] Definir breakpoints no painel Sources.
- [ ] Navegar com Step over, Step into e Step out.
- [ ] Inspecionar variáveis no Scope e Watch.
- [ ] Corrigir o erro e testar novamente.
Perguntas Frequentes sobre Debug em JavaScript
Como faço para debugar JavaScript no Firefox?
O processo é muito similar ao Chrome. Abra o DevTools com F12, vá para o Console para ver erros e para o Debugger (equivalente ao Sources) para breakpoints. A interface é um pouco diferente, mas os conceitos de breakpoint, step e inspeção são idênticos.
O que é um breakpoint?
Um breakpoint é uma marcação que você coloca em uma linha específica do código. Quando a execução chega naquela linha, o navegador pausa. Isso permite que você veja o valor das variáveis, examine a pilha de chamadas e avance linha por linha.
console.log() é suficiente para debugar?
Para erros simples, sim. Mas quando o código fica complexo, com muitas funções e loops, console.log() pode ser limitado. Você precisa adivinhar onde colocar os logs, e eles poluem o console. Breakpoints oferecem uma visão mais completa e controlada.
Como debugar código JavaScript assíncrono?
Use breakpoints normalmente. Quando o código pausa em uma função assíncrona (como um setTimeout ou uma requisição fetch), você pode inspecionar o estado. Uma dica extra: no Chrome, há uma opção "Async" no painel Sources que ajuda a rastrear chamadas assíncronas na pilha.
O que significa "Step over" e "Step into"?
"Step over" executa a linha atual e vai para a próxima, sem entrar em funções chamadas. "Step into" entra na função chamada, permitindo que você veja seu interior linha por linha. Use Step over para a maior parte do tempo e Step into quando quiser detalhar uma função específica.
Como faço para debugar um loop infinito?
Se o navegador travar, force a interrupção: no Chrome, clique no ícone de pausa (⏸️) no painel Sources. Ele vai parar na linha atual do loop. Então, use Step over para ver como as variáveis mudam e descobrir por que a condição de saída nunca é atingida.
