Funcionalidades Ocultas no Chrome DevTools
Você provavelmente abre o Chrome DevTools dezenas de vezes por dia. Console, Elements, Network — o ciclo habitual. Mas o DevTools evoluiu silenciosamente para um ambiente muito mais poderoso, e a maioria de suas melhores capacidades está um menu mais profundo do que onde a maioria dos desenvolvedores para de procurar.
Aqui estão as funcionalidades menos conhecidas do Chrome DevTools que vale a pena adicionar ao seu fluxo de trabalho regular.
Principais Conclusões
- O CSS Overview fornece uma auditoria completa de cores, fontes e problemas de especificidade — ideal para identificar inconsistências em folhas de estilo antes de uma refatoração.
- Logpoints e Conditional Breakpoints permitem depurar sem modificar o código-fonte, sobrevivendo a hot reloads e não exigindo redeploy.
- A aba Coverage quantifica JavaScript e CSS não utilizados por arquivo, fornecendo alvos concretos para code splitting e lazy loading.
- As Layout Shift Regions e o detalhamento da thread principal do painel Performance ajudam a identificar culpados de CLS e recálculos de estilo custosos.
- O painel Network Conditions, ferramentas de bloqueio de requisições e a aba Initiator oferecem controle granular sobre simulação de requisições e rastreamento preciso de call-stack.
CSS Overview: O Check-up de Saúde da Sua Folha de Estilo
Como abrir: Clique no menu de três pontos (⋮) → More Tools → CSS Overview.
Execute uma captura e você obtém um detalhamento completo de cada cor, família de fonte, tamanho de fonte, media query e problema de especificidade na página. Em bases de código grandes, isso é inestimável para capturar cores quase duplicadas como #fff e #ffffff, ou seletores com especificidade tão alta que é impossível sobrescrevê-los de forma limpa.
A seção Font Info é especialmente útil — ela mostra a distribuição real de tamanhos e pesos de fonte sendo renderizados, o que frequentemente revela inconsistências que os design tokens deveriam ter prevenido.
Dica: Use o CSS Overview antes de uma refatoração de design system. Ele fornece uma visão clara da bagunça antes de você começar a limpá-la. Veja a documentação oficial do CSS Overview para mais detalhes.
Depuração Avançada no Chrome DevTools: Logpoints em Vez de console.log
Pare de poluir seu código-fonte com console.log. No painel Sources, clique com o botão direito em qualquer número de linha e escolha Add Logpoint. Digite qualquer expressão — ela será registrada no console sem tocar no seu código.
Esta é uma das técnicas de depuração do Chrome DevTools mais subutilizadas. Logpoints sobrevivem a hot reloads, não exigem redeploy e desaparecem de forma limpa quando você termina. Combine-os com Conditional Breakpoints (clique com o botão direito → Add Conditional Breakpoint) para pausar a execução apenas quando uma expressão específica for verdadeira — útil para depurar bugs intermitentes que só aparecem após a 50ª iteração de um loop.
Aba Coverage: Encontre e Elimine Código Não Utilizado
Como abrir: Menu de três pontos → More Tools → Coverage.
Clique em gravar, interaja com sua página e depois pare. O DevTools mostra exatamente qual porcentagem de cada arquivo JS e CSS nunca foi executada. Um arquivo com 60–70% não utilizado é candidato para code splitting ou lazy loading.
O fluxo de trabalho é direto: Coverage → identificar código morto → dividir ou adiar → medir melhoria em LCP e TTI. Isso impacta diretamente suas pontuações de Core Web Vitals.
Dica: Coverage não contabiliza código acionado por interação. Grave enquanto clica através dos seus principais fluxos de usuário, não apenas no carregamento da página.
Discover how at OpenReplay.com.
Insights do Painel Performance: Depurando Layout Shifts e Recálculo de Estilo
O painel Performance amadureceu significativamente. Grave uma sessão e observe o detalhamento da Main thread — especificamente eventos de Style Recalc e Layout. Uma única mudança de propriedade CSS em um elemento pai pode desencadear um recálculo completo de layout em centenas de nós DOM.
Para depuração de CLS, habilite Layout Shift Regions através da gaveta Rendering (menu de três pontos → More Tools → Rendering) antes de gravar. Elementos deslocados são destacados com uma sobreposição azul quadro a quadro, tornando imediatamente óbvio qual elemento se moveu e quando.
Evite consultar propriedades de layout como offsetHeight ou getBoundingClientRect() dentro de loops — cada chamada força um layout síncrono, o que se acumula rapidamente.
Painel Network Conditions: Simulação e Rastreamento Granular de Requisições
A maioria dos desenvolvedores conhece o throttling de rede global na aba Network. Menos conhecem os painéis Request Blocking e Network Conditions, acessíveis através do menu de três pontos → More Tools.
O painel Network Conditions permite sobrescrever o user agent e desabilitar cache globalmente. O throttling de rede em si é tipicamente controlado através do dropdown de throttling da aba Network, que simula conexões mais lentas para testes. Versões mais recentes do DevTools também suportam throttling mais granular a nível de requisição através de ferramentas de condição de requisição.
Request Blocking (More Tools → Network Request Blocking) permite bloquear padrões de URL específicos inteiramente — útil para testar como seu aplicativo se comporta quando um script de terceiros específico falha ao carregar.
Para rastrear de onde uma requisição se origina no seu código, clique em qualquer requisição na aba Network e abra a aba Initiator. Ela mostra a call stack exata que acionou a requisição — uma forma rápida de fazer engenharia reversa de chamadas de API desconhecidas ou rastrear de onde um fetch está sendo disparado inesperadamente.
Conclusão
As funcionalidades acima não são obscuras por acaso — elas resolvem problemas reais mais rápido do que as alternativas. CSS Overview substitui auditorias manuais de folhas de estilo. Logpoints substituem declarações de console descartáveis. Coverage torna a otimização de bundle concreta em vez de especulativa.
As melhores técnicas de depuração do Chrome DevTools compartilham uma característica: elas reduzem a lacuna entre “algo parece errado” e “eu sei exatamente o que está errado”. Comece com uma funcionalidade desta lista, incorpore-a ao seu fluxo de trabalho, e o resto seguirá naturalmente.
Perguntas Frequentes
Logpoints estão vinculados à sua sessão do DevTools e ao mapeamento específico do arquivo fonte. Eles persistem enquanto o código-fonte da página permanecer o mesmo e o DevTools mantiver seu estado de workspace. No entanto, eles não são salvos permanentemente entre reinicializações do navegador, a menos que você use um Workspace com file overrides locais configurados no painel Sources.
Tree-shaking remove código que nunca é importado ou referenciado em tempo de build com base em análise estática. A aba Coverage mede execução em runtime, mostrando código que foi enviado ao navegador mas nunca foi realmente executado durante uma sessão. Eles se complementam: tree-shaking captura exports mortos, enquanto Coverage captura código que é alcançável mas não utilizado na prática.
O CSS Overview não oferece uma funcionalidade de exportação integrada. No entanto, você pode copiar manualmente dados de cada seção ou fazer capturas de tela. Para uma abordagem mais automatizada, considere usar ferramentas como cssstats.com ou Wallace CLI, que analisam folhas de estilo e produzem relatórios exportáveis com detalhamentos similares de cor, fonte e especificidade.
Habilitar Layout Shift Regions através da gaveta Rendering adiciona uma sobreposição visual mas não distorce significativamente suas métricas do painel Performance. O custo de renderização da sobreposição é negligenciável. Para os resultados de profiling mais precisos, feche outras abas, desabilite extensões do navegador e use uma janela anônima para minimizar interferência de processos em segundo plano.
Understand every bug
Uncover frustrations, understand bugs and fix slowdowns like never before with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data. Check our GitHub repo and join the thousands of developers in our community.
