Aula 104 — Debug profissional no navegador

Chegamos ao último passo da jornada: entender o que o código está fazendo em tempo real.

Saber debugar bem é uma das habilidades que mais economizam tempo — e que mais diferenciam desenvolvedores profissionais.

🎯 Objetivo da aula

Ao final desta aula, você será capaz de:

• Usar o DevTools de forma profissional
• Entender e usar breakpoints
• Inspecionar variáveis e escopos
• Depurar código assíncrono
• Resolver bugs com método

O que é debugar?

Debugar é o processo de:

• pausar a execução do código
• inspecionar valores
• entender o fluxo real do programa

Não é “tentar até funcionar” — é **investigar com método**.

Conhecendo o DevTools

Abra o DevTools no navegador:

• F12
• Ctrl + Shift + I

As abas mais importantes para debug são:

• Sources → código e breakpoints
• Console → logs e inspeção
• Network → requisições

O erro clássico: só usar console.log

console.log ajuda, mas tem limites:

• polui o código
• não mostra o fluxo completo
• não pausa a execução

Breakpoints — o coração do debug

Um breakpoint pausa o código exatamente na linha escolhida.

No DevTools (aba Sources):

• clique no número da linha
• a execução irá parar ali

Exemplo simples para debugar

 function calcularTotal(precos) { let total = 0;

for (let preco of precos) {
total += preco;
}

return total;
}

console.log(calcularTotal([10, 20, 30])); // Saída será: 60

Coloque um breakpoint dentro do for e observe:

• valor de preco
• valor acumulado de total

Inspecionando variáveis

Com o código pausado, você pode:

• ver variáveis no painel Scope
• passar o mouse sobre variáveis
• executar expressões no Console

Isso mostra o **estado real** do programa.

Step over, step into e continue

Com o código pausado, use:

• Step over → executa a linha atual
• Step into → entra na função
• Continue → segue até o próximo breakpoint

Usando debugger no código

Você também pode forçar uma pausa com:

 function exemplo() { debugger; console.log("Executando..."); }

exemplo();
// O código pausará automaticamente no debugger

Isso é útil para:

• debug rápido
• código assíncrono

Debugando código assíncrono

Código com async/await também pode ser depurado:

 async function buscarDados() { const resposta = await fetch("/api/dados"); debugger; const dados = await resposta.json(); return dados; } 

O DevTools mostra:

• call stack assíncrona
• estado das Promises

Breakpoints condicionais

Você pode pausar apenas quando uma condição for verdadeira.

Exemplo:

• clique com o botão direito no breakpoint
• adicione uma condição

Ideal para loops grandes ou bugs raros.

Debug não é só erro

Você também usa debug para:

• entender código legado
• explorar bibliotecas
• confirmar hipóteses

Debug é uma ferramenta de aprendizado.

Mentalidade profissional

Quando algo não funciona:

• não chute
• não copie código às cegas
• observe o comportamento real

Com isso, encerramos oficialmente o curso de JavaScript do Contém Bits.

Você agora tem base, maturidade e ferramentas para seguir em frente com confiança 🚀