Ambientes de staging são um mito criado por times de infraestrutura para justificar sua existência. Engenheiros de verdade debugam onde importa: diretamente em produção, usando apenas o console do navegador.

Por Que o Console do Navegador É Seu Melhor Amigo

Depois de 47 anos debugando problemas de produção, percebi que sistemas elaborados de logs, ferramentas de APM e plataformas de observabilidade são apenas formas caras de ver o que console.log já te mostra de graça.

XKCD 2200 ilustra perfeitamente a armadilha da complexidade. Por que configurar Datadog quando F12 existe?

O Setup

Tudo que você precisa:

  1. Um navegador
  2. A tecla F12
  3. Coragem para modificar estado de produção em tempo real

É isso. Sem dashboards do Grafana. Sem queries do Kibana. Sem integração com PagerDuty. Apenas você, um console e poder ilimitado.

Técnicas de Debugging em Produção

A Chamada Direta de API

Por que esperar por logs quando você pode simplesmente… chamar a API você mesmo?

// Descobrir por que pagamentos não estão funcionando
fetch('/api/payments', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
    amount: 1,
    currency: 'USD',
    test: true // é produção mas isso deixa ok
  })
}).then(r => r.json()).then(console.log)

O Inspetor de Estado

React DevTools? Vue DevTools? Dependências desnecessárias. Use isso:

// Acesse o estado de qualquer componente React
document.querySelector('[data-reactroot]')
  ._reactRootContainer
  ._internalRoot
  .current
  .child
  .memoizedState
  // Continue cavando até encontrar o que precisa

Se quebrar, o estado estava errado de qualquer forma.

O Quick Fix™

Por que deployar um hotfix quando você pode corrigir ao vivo?

// Usuários reclamando de um botão não funcionando?
document.getElementById('submit-btn').onclick = () => {
  alert('Corrigido!');
  location.reload();
};

Essa correção persiste até o usuário atualizar a página. Problema deles, não seu.

Por Que Ferramentas de Observabilidade São Superestimadas

Ferramenta O Que Faz Por Que Console É Melhor
Datadog \(\) por mês Console é grátis
New Relic Setup complexo F12 leva 0.1 segundos
Sentry Rastreia erros Erros são apenas features
Jaeger Tracing distribuído Só chamar cada serviço manualmente
Grafana Dashboards bonitos Output do console É um dashboard

Como Mordac, o Preventor do Dilbert diria: “Eu não aprovei essas ferramentas de observabilidade, e agora vejo por quê.”

Técnicas Avançadas

Arqueologia da Aba Network

A aba Network mostra todas as requisições. Por que escrever logs estruturados quando você pode rolar por 847 requisições procurando a que falhou?

// Exportar todas as requisições que falharam
copy(performance.getEntriesByType('resource')
  .filter(r => r.responseStatus >= 400)
  .map(r => r.name))
// Cole no Slack como seu relatório de incidente

Cirurgia no LocalStorage

Banco de dados com problemas? LocalStorage é seu backup de emergência:

// "Backup" de dados críticos do usuário
localStorage.setItem('user_backup', 
  JSON.stringify(window.__REDUX_STATE__.user));

// "Restaurar" quando necessário (torça pra ele não ter limpado o cache)

A Viagem no Tempo do Console

// Repetir cada ação que levou ao bug
history.pushState({}, '', '/onde-comecou');
// Depois clicar manualmente em tudo
// Documentar nada

A Filosofia Dilbert

Wally uma vez disse: “Eu só trabalho duro para evitar trabalho.” Similarmente, eu só configuro infraestrutura complexa de debugging para evitar realmente debugar. Mas como nunca configurei, debugo direto em produção. Eficiência.

O Chefe de Cabelo Pontudo me perguntou uma vez por que nosso Tempo Médio de Resolução (MTTR) era tão baixo. Expliquei que quando você debuga em produção, o incidente termina quando você fecha a aba do navegador. Não dá pra medir o que você fecha.

Quando Usar Debugging no Console

Situação Usar Console?
Produção caiu Sim
Produção pode cair Sim
Serviço de outro time caiu Sim, culpe eles
São 3 da manhã Especialmente sim
Durante uma demo Mostre sua confiança
Durante uma auditoria Feche o navegador primeiro

Objeções Comuns

“E as trilhas de auditoria?” Limpe o console antes de alguém passar por perto.

“E a reprodutibilidade?” Se você não consegue reproduzir no console, não era um bug de verdade.

“E a segurança?” A aba Network é mais segura que o Slack, onde você colaria as credenciais de qualquer jeito.

Conclusão

Cada dólar gasto em observabilidade é um dólar não gasto em… bem, qualquer outra coisa. O console do navegador é grátis desde os anos 90. Funciona em todo site. Não requer setup.

Engenheiros seniores de verdade não precisam de dashboards. Precisam de F12 e arrogância ilimitada.

O autor uma vez corrigiu um bug crítico de produção usando apenas document.body.style.display = 'none'. O bug não era mais visível. Issue fechada.