Aba Sources: o mapa do seu código e o poder do debugger

Descubra como navegar pelos seus arquivos e usar breakpoints para pausar a execução do código.

Se a aba Console é onde você vê pistas, a aba Sources é onde você faz a investigação completa.

Pense assim:

  • Console = “o alarme tocou”
  • Sources = “vamos abrir o mapa e seguir o caminho do problema”

A aba Sources permite pausar o código e observar, linha por linha, o que está acontecendo.

O que é a aba Sources?

A aba Sources nas DevTools mostra os arquivos da sua aplicação (JavaScript, HTML, CSS e mapas de origem, quando existirem).

Com ela, você pode:

  • navegar pelos arquivos
  • encontrar trechos de código
  • colocar breakpoints (pontos de parada)
  • executar passo a passo com o debugger
  • inspecionar variáveis durante a execução

Por que isso é tão poderoso?

Sem debugger, você depende muito de console.log.
Com debugger, você consegue:

  • pausar exatamente antes do problema
  • ver estado real das variáveis naquele instante
  • entender a ordem de execução
  • confirmar hipóteses com mais precisão

Estrutura principal da aba Sources

Em geral, você encontra:

  1. Navegador de arquivos (lado esquerdo)
    Lista os arquivos carregados na página.

  2. Editor de código (centro)
    Mostra o conteúdo do arquivo selecionado.

  3. Painel de debug (lado direito)
    Controles de pausa/continuação, breakpoints, call stack e escopos.

Como usar no fluxo prático

1) Abra o arquivo JavaScript na Sources

Procure o arquivo onde a função suspeita está.

2) Clique no número da linha para criar breakpoint

Um marcador azul aparece no número da linha.

3) Execute a ação na página

Quando o código chegar nessa linha, ele pausa automaticamente.

4) Inspecione variáveis e contexto

Veja valores atuais no painel de escopo ou passando o mouse sobre variáveis.

5) Avance linha a linha

Use os botões de navegação (Step Over, Step Into, Step Out).

debugger; no código (atalho útil)

Você também pode forçar pausa com a palavra-chave debugger:

function calcular(preco, qtd) {
  const total = preco * qtd;
  debugger; // pausa aqui se DevTools estiver aberta
  return total;
}

Isso é muito útil para pausar em ponto exato sem clicar na linha manualmente.

Exemplo rápido de investigação

function aplicarDesconto(total, desconto) {
  const resultado = total - total * desconto;
  return resultado;
}

Se o resultado estiver estranho, coloque breakpoint na linha do cálculo e verifique:

  • valor de total
  • valor de desconto
  • se desconto está em porcentagem (ex.: 0.1) ou inteiro (ex.: 10)

Muitas vezes o bug está na interpretação do valor, não na sintaxe.

Boas práticas na aba Sources

  • coloque breakpoint em pontos críticos, não em todas as linhas
  • investigue uma hipótese por vez
  • combine Sources + Console para acelerar diagnóstico
  • após corrigir, teste novamente o mesmo cenário
  • remova breakpoints antigos para não confundir novas análises

Resumo da lição

  • A aba Sources é o ambiente principal para depuração profunda.
  • Nela você navega arquivos, pausa execução e analisa variáveis.
  • Breakpoints + execução passo a passo ajudam a entender o fluxo real.
  • É uma das ferramentas mais importantes para corrigir bugs com confiança.