Ferramentas de desenvolvedor do navegador: dicas avançadas

1. Debugging além do básico: breakpoints e watchpoints

Os breakpoints tradicionais são úteis, mas interrompem o fluxo de execução repetidamente. Breakpoints condicionais permitem pausar apenas quando uma expressão específica é verdadeira, economizando tempo em loops ou chamadas frequentes.

// Exemplo de breakpoint condicional no Chrome DevTools
// No painel Sources, clique com botão direito no número da linha
// Selecione "Add conditional breakpoint"
// Insira: item.id === 42 && item.status === 'error'

// Logpoints: depuração sem pausa
// Clique com botão direito no número da linha
// Selecione "Add logpoint"
// Insira: console.log('Item processado:', item.nome, 'em', Date.now())

Watchpoints monitoram alterações em propriedades de objetos. No painel Sources, clique com botão direito em uma variável e selecione "Break on... → Property changes". Isso é essencial para rastrear mutações inesperadas em objetos globais ou estados de aplicação.

Breakpoints em requisições de rede: na aba Network, clique com botão direito em uma requisição e selecione "Break on → URL". Para eventos de DOM, use a aba Elements: clique com botão direito em um nó e escolha "Break on → subtree modifications" ou "attribute modifications".

2. Performance profiling: identificando gargalos com precisão

A aba Performance permite gravar interações e analisar cada frame. Para identificar gargalos, grave uma interação específica (como scroll ou clique) e analise o flame chart.

// Como iniciar um profile de performance:
// 1. Abra a aba Performance
// 2. Clique no botão de gravação (círculo)
// 3. Execute a ação que deseja analisar
// 4. Clique em "Stop"

// Interpretação do flame chart:
// - Barras largas indicam funções que consomem mais tempo
// - Cores vermelhas/laranjas indicam tasks longas (>50ms)
// - Áreas roxas indicam rendering/layout

Layout thrashing ocorre quando JavaScript força múltiplos reflows em sequência. No flame chart, procure por padrões repetitivos de "Recalculate Style" seguidos de "Layout". Para evitar isso, agrupe leituras e escritas de propriedades geométricas.

// Exemplo de layout thrashing (ruim):
element.style.width = '100px';
console.log(element.offsetHeight); // força reflow
element.style.height = '200px';
console.log(element.offsetWidth); // força outro reflow

// Versão otimizada:
element.style.width = '100px';
element.style.height = '200px';
console.log(element.offsetHeight, element.offsetWidth); // apenas um reflow

3. Análise avançada de rede e requisições

Filtros personalizados na aba Network permitem buscas complexas. Use operadores como -status-code:404 para excluir erros, ou larger-than:10k para encontrar requisições pesadas.

// Exemplos de filtros na aba Network:
// - status-code:200 method:POST
// - mime-type:application/json
// - domain:api.exemplo.com -path:/health
// - has-response-header:content-encoding

// Busca em cabeçalhos: clique em qualquer requisição
// Na aba Headers, use Ctrl+F para buscar texto em todos os cabeçalhos

Simulação de condições de rede: no painel Network, marque "Disable cache" e use o dropdown "Throttling" para simular 3G lento, offline ou latency customizada. Para criar perfis personalizados, vá em "Add... → Custom" e defina download/upload/latência.

Para inspecionar WebSocket e SSE, filtre por "WS" ou "EventStream". Clique em uma conexão para ver mensagens em tempo real na aba "Messages" ou "EventStream". É possível copiar mensagens individuais ou exportar todo o histórico.

4. Edição ao vivo de CSS e JavaScript sem recarregar

O painel Styles permite editar CSS em tempo real com preview imediato. Para pseudo-classes como :hover ou :focus, clique no ícone :hov e ative o estado desejado.

// No painel Styles, você pode:
// - Adicionar novas regras clicando entre chaves
// - Modificar valores numéricos com setas (Alt+↑/↓ para incrementos de 0.1)
// - Arrastar cores para ajuste visual
// - Clicar no ícone de paleta para abrir o seletor de cores avançado

Snippets no Console permitem executar JavaScript persistente. Crie um snippet com Ctrl+Shift+I → Sources → Snippets → New snippet. Salve scripts de automação que você usa frequentemente.

// Exemplo de snippet para limpar cache e recarregar:
(function() {
  caches.keys().then(names => names.forEach(name => caches.delete(name)));
  localStorage.clear();
  sessionStorage.clear();
  location.reload(true);
})();

Overrides locais salvam alterações diretamente no navegador. Na aba Sources, clique em "Overrides" → "Select folder for overrides". Após selecionar uma pasta, qualquer modificação em arquivos será salva automaticamente, persistindo mesmo após recarregar a página.

5. Memory leaks e heap snapshots

Para detectar vazamentos de memória, capture três snapshots: antes da ação, depois da ação, e após forçar coleta de lixo (clicando no ícone de lixeira).

```text// Como capturar snapshots:
// 1. Abra a aba Memory
// 2. Selecione "Heap snapshot" e clique "Take snapshot"
// 3. Execute a ação que pode causar vazamento
// 4. Tome outro snapshot
// 5. Selecione "Comparison" no dropdown para comparar os dois

// Análise de retentores:
// - Objetos em vermelho não têm referências de root (serão coletados)
// - Clique em um objeto para ver o "Retainers" tree
// - Procure por closures que mantêm referências a DOM nodes ou grandes objetos


Closures que retêm memória: no snapshot, filtre por "(closure)" e examine as variáveis capturadas. Se uma closure mantém referência a um elemento DOM removido, isso causa vazamento.

```text
// Exemplo de closure que vaza:
function createLeak() {
  const largeData = new Array(1000000).fill('x');
  document.getElementById('btn').addEventListener('click', function() {
    console.log(largeData.length); // largeData nunca será coletado
  });
}

6. Emulação e testes de dispositivos reais

O painel Sensors (acessível via "More tools → Sensors") permite simular geolocalização, orientação do dispositivo e toque. Defina coordenadas personalizadas ou selecione locais predefinidos.

// Configuração de sensores:
// - Geolocation: insira lat/long ou escolha "Tokyo", "London" etc.
// - Device orientation: ajuste alpha, beta, gamma para testar giroscópio
// - Touch: marque "Force touch" para simular eventos touch em desktop

Emulação de modo escuro e acessibilidade: no painel Rendering (acessível via "More tools → Rendering"), ative "Emulate CSS media feature prefers-color-scheme" e escolha "prefers-color-scheme: dark". Teste também "prefers-reduced-motion" para animações seguras.

Testes de responsividade: use o ícone de dispositivo móvel (Ctrl+Shift+M) e adicione breakpoints customizados clicando nos pontos azuis acima da viewport. Para dispositivos específicos, clique no dropdown e selecione "Edit... → Add custom device".

7. Automação e extensões para o workflow do dev

A Console Utilities API oferece funções como $(), $$(), $x() para seletores CSS e XPath, e copy() para copiar objetos para a área de transferência.

// Comandos úteis do Console Utilities API:
// $('selector') → primeiro elemento
// $$('selector') → todos os elementos como array
// $x('//div[@class="item"]') → seleção por XPath
// copy(JSON.stringify(obj, null, 2)) → copia objeto formatado
// monitorEvents(window, 'resize') → loga todos os eventos de resize

Atalhos de teclado personalizados: vá em Settings → Shortcuts e mapeie ações como "Evaluate in Console" ou "Toggle device toolbar". Grupos de ferramentas podem ser salvos como "Workspace" no painel Sources.

Para criar perfis de workspace: no Sources, clique em "Add folder to workspace" e mapeie arquivos locais aos recursos da página. Isso permite editar diretamente no DevTools e sincronizar com seu editor.

// Exemplo de perfil de workspace:
// 1. Abra a aba Sources
// 2. Clique em "Filesystem" → "Add folder to workspace"
// 3. Selecione a pasta do seu projeto
// 4. No painel "Page", clique com botão direito em um arquivo
// 5. Selecione "Map to filesystem resource"
// 6. Agora edições no DevTools refletem no seu editor

Referências