Breakpoints: parando o tempo para entender o que acontece

Aprenda a definir pontos de parada para inspecionar o código linha a linha.

Quando um bug aparece, às vezes parece que o código passa rápido demais para acompanhar.
O breakpoint resolve isso: ele pausa a execução exatamente na linha que você escolher.

Pense como apertar “pause” em um vídeo para enxergar um detalhe importante.

O que é breakpoint?

Um breakpoint é um ponto de parada no código.
Quando o JavaScript chega naquela linha, ele para e você pode investigar:

  • valor das variáveis
  • ordem de execução
  • caminho que o código percorreu até ali

Onde criar breakpoints?

Normalmente na aba Sources das DevTools:

  1. Abra DevTools.
  2. Vá em Sources.
  3. Abra o arquivo JS.
  4. Clique no número da linha.
  5. Execute a ação na página.

Quando essa linha for alcançada, a execução pausa.

Por que breakpoints ajudam tanto?

Com console.log, você vê “fotos” do código.
Com breakpoints, você tem um raio-X ao vivo do estado da aplicação.

Você consegue:

  • confirmar se uma função foi chamada
  • verificar se condição if entrou no caminho esperado
  • descobrir em que momento um valor ficou errado

Exemplo simples

function calcularTotal(preco, qtd) {
  const total = preco * qtd; // coloque breakpoint aqui
  return total;
}

const resultado = calcularTotal(10, 3);
console.log(resultado);

Ao pausar na linha do cálculo, você pode inspecionar preco, qtd e total.

Tipos comuns de breakpoints (visão inicial)

1) Line breakpoint (linha)

O mais usado: pausa em uma linha específica.

2) Conditional breakpoint (condicional)

Só pausa quando uma condição é verdadeira.

Exemplo de condição:

qtd > 100

Útil quando o erro acontece só em casos específicos.

3) Event listener breakpoint

Pausa quando certos eventos acontecem (como click, submit, etc.).

Boas práticas ao usar breakpoints

  • Comece em pontos críticos (função suspeita, validação, cálculo).
  • Evite colocar breakpoint em todas as linhas.
  • Reproduza o bug com os mesmos passos.
  • Inspecione uma hipótese por vez.
  • Depois de corrigir, teste novamente o mesmo cenário.

Erros comuns ao começar

  • Colocar breakpoint em arquivo errado.
  • Não reproduzir a ação que dispara o trecho.
  • Esquecer breakpoint antigo ativo e confundir análise.
  • Não observar valores de entrada antes de culpar o cálculo.

Resumo da lição

  • Breakpoint é um ponto de pausa no código.
  • Ele ajuda a entender o fluxo em tempo real.
  • Permite inspecionar variáveis no momento exato do problema.
  • É uma das técnicas mais poderosas para debugging com confiança.