Watch e Scope: observando variáveis em tempo real

Aprenda a monitorar o valor de variáveis e o escopo atual durante a depuração.

Quando você pausa o código com breakpoint, surgem duas áreas muito úteis no debugger:

  • Scope: mostra as variáveis disponíveis naquele momento.
  • Watch: deixa você acompanhar expressões/variáveis específicas em tempo real.

Pense assim:

  • Scope = “o que existe agora nesse ambiente”
  • Watch = “o que eu quero vigiar de perto”

O que é Scope?

Scope (escopo) é o “território” onde variáveis podem ser acessadas.

No debugger, a seção Scope geralmente mostra grupos como:

  • Local: variáveis da função atual
  • Closure: variáveis capturadas de escopos externos
  • Global: variáveis globais (ex.: window, funções globais)

Exemplo rápido

const taxa = 0.1;

function calcular(preco) {
  const desconto = preco * taxa;
  const total = preco - desconto; // breakpoint aqui
  return total;
}

calcular(200);

Ao pausar no breakpoint:

  • preco, desconto, total aparecem no escopo local
  • taxa pode aparecer em escopo externo/closure
  • objetos globais ficam no global

O que é Watch?

A área Watch permite adicionar variáveis e expressões para monitorar continuamente durante a depuração.

Você pode adicionar, por exemplo:

  • total
  • preco * taxa
  • usuario.nome
  • itens.length

Assim, ao avançar com Step Over/Into/Out, o valor é atualizado automaticamente.

Por que Watch ajuda tanto?

Sem Watch, você precisa ficar procurando valor toda hora.
Com Watch, você mantém foco no que importa para investigar o bug.

É ótimo para:

  • acompanhar mudança de contador
  • verificar condições booleanas
  • validar cálculos em etapas diferentes
  • observar propriedade de objeto que muda ao longo do fluxo

Exemplo prático com Watch

let contador = 0;

function incrementar() {
  contador++;
  const par = contador % 2 === 0; // breakpoint aqui
  return par;
}

incrementar();
incrementar();
incrementar();

Se você adicionar no Watch:

  • contador
  • contador % 2 === 0

vai enxergar a evolução dos valores a cada pausa.

Diferença essencial: Scope x Watch

  • Scope mostra tudo que está acessível naquele ponto.
  • Watch mostra só o que você escolheu observar.

Em resumo:

  • Scope = visão ampla do ambiente.
  • Watch = painel personalizado de monitoramento.

Boas práticas

  • Adicione poucas expressões no Watch (as mais relevantes).
  • Dê prioridade a variáveis críticas do bug.
  • Use nomes de variáveis claros no código (facilita leitura no debugger).
  • Limpe Watches antigos para não poluir análise.
  • Combine Watch + breakpoints condicionais para bugs específicos.

Erros comuns

  • Tentar observar variável fora do escopo atual.
  • Adicionar muitas expressões e perder foco.
  • Não atualizar hipótese conforme valores reais aparecem.
  • Ignorar o Scope e olhar só o Watch.

Resumo da lição

  • Scope mostra as variáveis disponíveis no ponto pausado.
  • Watch monitora variáveis/expressões que você escolhe.
  • Usar os dois juntos deixa o debugging mais rápido, claro e estratégico.