# Debugar JavaScript: Guia Passo a Passo Eficiente

> O Chrome DevTools oferece ferramentas essenciais para debugar JavaScript, como breakpoints e console.log estratégico. O guia passo a passo ensina a identificar erros comuns e otimizar o tempo de correção, utilizando recursos como inspeção de variáveis e execução passo a passo. A técnica evita retrabalho e melhora a eficiência na depuração de código.

*TNT Web · Apps e Software · 20 de julho de 2026 · Jonas Ribaldo*

Quer aprender a debugar JavaScript sem se perder no código? Este guia mostra o passo a passo para usar o Chrome DevTools, breakpoints e console.log de forma estratégica, evitando erros comuns e economizando tempo.

Debugar JavaScript pode parecer uma tarefa de outro mundo quando você está começando. A boa notícia: as ferramentas do navegador, especialmente o Chrome DevTools, transformam esse processo em algo direto e controlado. Para debugar JavaScript com eficiência, use o Chrome DevTools: abra o código na guia Sources, clique na linha desejada para adicionar um breakpoint, recarregue a página e inspecione variáveis no painel lateral. O comando 'debugger;' no código também funciona como breakpoint manual. Antes de começar, tenha certeza de que você tem o Chrome instalado e uma página com JavaScript que queira depurar, pode ser um arquivo .js local ou um snippet no console.

## Passo 1: Abra o Chrome DevTools e localize seu código

A primeira etapa é abrir as ferramentas de desenvolvedor. No Chrome, pressione F12 ou Ctrl+Shift+I (Windows/Linux) ou Cmd+Opt+I (Mac). Você verá um painel dividido em abas. Clique na aba **Sources** (Fontes). Do lado esquerdo, aparece a árvore de arquivos carregados pela página. Navegue até o arquivo JavaScript que você quer depurar, pode ser um .js externo ou um bloco inline. Clique nele para abrir o código no painel central. **Dica**: se o código estiver minificado (uma linha só), clique no ícone {} (Pretty Print) no canto inferior esquerdo para formatá-lo de forma legível.

## Passo 2: Adicione um breakpoint na linha suspeita

Um breakpoint é uma marca que pausa a execução do código na linha exata onde você coloca. No painel central, clique no número da linha à esquerda do código onde você suspeita que o erro acontece. Uma marca azul aparecerá. Agora, recarregue a página (F5 ou Ctrl+R). Quando o JavaScript atingir aquela linha, a execução pausa automaticamente. **Erro comum a evitar**: colocar breakpoint em linhas de declaração de função (como function soma(a,b)) não pausa a execução, coloque na primeira linha de código dentro da função.

## Passo 3: Inspecione variáveis no painel de escopo

Com a execução pausada, olhe para o lado direito do painel Sources. Você verá a seção **Scope** (Escopo), que mostra todas as variáveis disponíveis naquele ponto do código: Local, Closure, Global. Passe o mouse sobre qualquer variável no código para ver seu valor atual em um tooltip. Para acompanhar uma variável específica, adicione-a à seção **Watch** (Vigiar): clique no ícone + e digite o nome da variável. O valor aparece em tempo real conforme você avança. **Dica**: se o valor estiver undefined, significa que a variável ainda não foi atribuída, isso já é uma pista.

## Passo 4: Use os controles de navegação para avançar linha a linha

Acima do painel de escopo, há botões de controle. O mais útil é o **Step over next function call** (seta para baixo com um ponto, F10). Ele executa a linha atual e vai para a próxima, sem entrar em funções chamadas. Se você quiser entrar dentro de uma função chamada, use **Step into next function call** (seta para baixo, F11). Para sair de uma função e voltar ao código que a chamou, use **Step out** (seta para cima, Shift+F11). **Erro comum a evitar**: pressionar F11 sem querer ao entrar em funções de bibliotecas (como jQuery ou React), prefira F10 para ficar no seu código.

## Passo 5: Use console.log com estratégia, não como muleta

O console.log() é o método mais rápido para ver valores, mas usado em excesso polui o console e pode esconder o problema real. Use-o para verificar valores pontuais, como console.log('valor de x antes da função:', x). Prefira adicionar um identificador único, como console.log('DEBUG: etapa 1 - resultado:', resultado), para localizar a mensagem entre outras. **Dica**: se você está debugando um loop, coloque um console.count('iteracao') dentro do loop para saber quantas vezes ele executou. **Erro comum**: esquecer de remover os console.log do código de produção, eles não afetam a performance, mas podem vazar dados sensíveis.

## Passo 6: Use o comando debugger; como breakpoint manual

Você pode inserir a linha debugger; diretamente no código-fonte. Quando o navegador executar essa linha, ele pausa automaticamente no DevTools, como se você tivesse clicado no número da linha. É útil quando você não consegue acessar o DevTools rapidamente ou quer forçar uma pausa em um ponto específico sem depender de interface. **Dica**: coloque debugger; dentro de um if condicional para pausar só quando uma condição for verdadeira, por exemplo: if (usuario.id === 42) { debugger; }. **Erro comum**: esquecer de remover a linha debugger; antes de subir o código para produção, ela trava o navegador do usuário.

## Checklist: O que você aprendeu

- Abrir o Chrome DevTools e localizar o arquivo JavaScript na aba Sources.
- Adicionar breakpoints clicando no número da linha.
- Inspecionar variáveis no painel Scope e Watch.
- Navegar linha a linha com Step over (F10) e Step into (F11).
- Usar console.log com identificadores e console.count para loops.
- Inserir debugger; no código para pausas manuais condicionais.

## Perguntas Frequentes

### Qual a diferença entre Step over e Step into?

Step over (F10) executa a linha atual e vai para a próxima, sem entrar em funções que são chamadas. Step into (F11) entra dentro da função chamada, permitindo depurar o código dela linha a linha. Use Step over para ficar no seu código e Step into quando precisar entender o que uma função específica faz internamente.

### Como debugar código JavaScript em outros navegadores?

Firefox tem o Firefox Developer Tools (F12), muito similar ao Chrome. Edge usa o mesmo DevTools do Chrome (base Chromium). Safari tem o Web Inspector (Cmd+Opt+I). O conceito de breakpoints e escopo é o mesmo em todos, mudando apenas a interface. O Chrome é o mais usado e recomendado para iniciar.

### O que fazer se o breakpoint não pausar o código?

Verifique se o arquivo JavaScript está sendo carregado pela página (olhe no console se há erro 404). Confirme se você está na aba Sources e não na Console. Se o código for executado antes de você adicionar o breakpoint, recarregue a página. Breakpoints em código minificado podem não funcionar, use Pretty Print.

### Posso debugar JavaScript em dispositivos móveis?

Sim. Conecte o dispositivo Android ao computador por USB, ative a depuração USB nas Developer Options do Android, e no Chrome digite chrome://inspect. Você verá o dispositivo listado e poderá abrir o DevTools remoto. No iOS, use Safari Web Inspector com cabo USB.

### console.log afeta a performance do código?

Sim, mas de forma desprezível em aplicações pequenas. Em loops com milhares de iterações, console.log pode causar lentidão porque o navegador precisa processar a saída. Para debug de performance, use console.time('nome') e console.timeEnd('nome') para medir tempo de execução.

### Como remover todos os debugger; e console.log do código de produção?

Use ferramentas de build como Webpack ou Babel com plugins (TerserPlugin para remover debugger;, ou console.log via configuração). Nunca dependa de lembrar de apagar manualmente, automatize com o bundler. Em projetos pequenos, uma busca global por debugger e console.log no editor resolve.

---

Fonte (canonical): https://tntweb.com.br/apps-e-software/debugar-javascript-guia-passo-a-passo-eficiente/