Debug com Console.log

A ferramenta de debug mais simples e mais eficaz

⏱ Estim. ~5 min

01 · Ler

Existem ferramentas de debug sofisticadas com breakpoints, watch expressions, execução passo a passo. Você vai aprender depois. Mas a ferramenta que você vai usar mais, mesmo como engenheiro sênior, é o humilde console.log().

A ideia é simples ao extremo: imprima coisas para ver o que está realmente acontecendo. Quando seu código se comporta diferente do esperado, a forma mais rápida de descobrir o porquê é registrar os valores em cada passo e comparar o que você esperava com o que realmente aconteceu.

Não é chique. Não é elegante. Mas funciona, e é rápido.

💡 Imagine assimDebug com console.log é como colocar câmeras de monitoramento na floresta. Você não consegue ficar olhando toda árvore o tempo todo, mas pode colocar câmeras em pontos-chave para ver o que passou. Quando algo inesperado aparece, você sabe exatamente onde olhar.

02 · Ler

Você tem um app de loja com um bug. A função getAffordableElectronics deveria retornar produtos eletrônicos dentro de um preço específico, que estão em estoque. Mas ela está retornando os caros e os que estão fora de estoque. Vamos investigar.

03 · Prática de terminal

Primeiro, leia o log de saída para ver o que a função realmente está produzindo vs. o esperado.

(Esta seção é interativa — ative o JavaScript para usar.)

04 · Prática de terminal

Agora leia o código e siga a lógica. Olhe os passos do filter — um deles tem um bug sutil de operador.

(Esta seção é interativa — ative o JavaScript para usar.)

05 · Exemplo de código

Aqui está como ficaria se você adicionasse logs de debug em cada passo. Compare os resultados intermediários para rastrear onde está dando errado.

Adicione logs de debug

function getAffordableElectronics(items, maxPrice) {
  console.log('Input:', items.length, 'items, max price:', maxPrice);
  const electronics = items.filter(item => item.category === 'electronics');
  console.log('After category filter:', electronics.map(i => i.name));
  const affordable = electronics.filter(item => item.price > maxPrice);
  console.log('After price filter:', affordable.map(i => i.name));
  // ^ This would show ['Laptop', 'Monitor'] — WRONG direction!
  const available = affordable.filter(item => item.inStock);
  console.log('After stock filter:', available.map(i => i.name));
  return available.map(item => item.name);
}

Com logs em cada passo, o bug salta aos olhos: depois do filtro de preço, você veria itens caros sobrevivendo em vez dos baratos. O > deveria ser <. Sem logs, você poderia gastar muito tempo adivinhando — com logs, achou em segundos.

06 · Ler

Logs estratégicos são uma arte. Não saia jogando logs em todo lugar — coloque nos pontos onde os dados se transformam ou onde algo pode dar errado.

Pontos-chave

Registre no início de uma função (foi chamada? com o quê?)
Registre antes e depois de uma transformação (o que mudou?)
Rotule cada log: console.log('step 3 - data:', data)
Remova os logs de debug antes do commit

07 · Preencher

Ao fazer debug com console.log, sempre adicione um(a) _____ para você saber qual log é qual.

08 · Quiz

Por que todo console.log deve ter um rótulo?

Para fazer o código rodar mais rápido
Para você conseguir distinguir qual log produziu qual saída
JavaScript exige que console.log tenha rótulo
Só código em produção precisa de rótulos

Outras lições deste capítulo

⚠ A experiência interativa completa precisa de JavaScript. Ative-o e recarregue a página.

※ Este é um projeto educacional independente — não é um produto oficial da Anthropic. Claude™ é uma marca registrada da Anthropic, PBC.