Funcionalidades ocultas en Chrome DevTools
Probablemente abres Chrome DevTools decenas de veces al día. Console, Elements, Network — el ciclo habitual. Pero DevTools ha evolucionado silenciosamente hasta convertirse en un entorno mucho más potente, y la mayoría de sus mejores capacidades se encuentran un menú más adentro de donde la mayoría de los desarrolladores dejan de buscar.
Estas son las funcionalidades menos conocidas de Chrome DevTools que vale la pena añadir a tu flujo de trabajo habitual.
Puntos clave
- CSS Overview proporciona una auditoría completa de colores, fuentes y problemas de especificidad — ideal para detectar inconsistencias en las hojas de estilo antes de una refactorización.
- Los Logpoints y Conditional Breakpoints te permiten depurar sin modificar el código fuente, sobreviven a los hot reloads y no requieren redespliegue.
- La pestaña Coverage cuantifica el JavaScript y CSS no utilizado por archivo, proporcionándote objetivos concretos para code splitting y lazy loading.
- Las Layout Shift Regions del panel Performance y el desglose del hilo principal te ayudan a identificar los culpables del CLS y los costosos recálculos de estilo.
- El panel Network Conditions, las herramientas de bloqueo de solicitudes y la pestaña Initiator ofrecen control granular sobre la simulación de solicitudes y el rastreo preciso de la pila de llamadas.
CSS Overview: El chequeo de salud de tus hojas de estilo
Cómo abrirlo: Haz clic en el menú de tres puntos (⋮) → More Tools → CSS Overview.
Ejecuta una captura y obtendrás un desglose completo de cada color, familia de fuentes, tamaño de fuente, media query y problema de especificidad en la página. En bases de código grandes, esto es invaluable para detectar colores casi duplicados como #fff y #ffffff, o selectores con una especificidad tan alta que es imposible sobrescribirlos limpiamente.
La sección Font Info es especialmente útil — muestra la distribución real de tamaños y pesos de fuente que se están renderizando, lo que a menudo revela inconsistencias que los design tokens se suponía debían prevenir.
Consejo: Usa CSS Overview antes de una refactorización del sistema de diseño. Te da una imagen clara del desorden antes de que comiences a limpiarlo. Consulta la documentación oficial de CSS Overview para más detalles.
Depuración avanzada en Chrome DevTools: Logpoints en lugar de console.log
Deja de llenar tu código fuente con console.log. En el panel Sources, haz clic derecho en cualquier número de línea y elige Add Logpoint. Escribe cualquier expresión — se registrará en la consola sin tocar tu código.
Esta es una de las técnicas de depuración de Chrome DevTools más infrautilizadas. Los Logpoints sobreviven a los hot reloads, no requieren un redespliegue y desaparecen limpiamente cuando terminas. Combínalos con Conditional Breakpoints (clic derecho → Add Conditional Breakpoint) para pausar la ejecución solo cuando una expresión específica sea verdadera — útil para depurar bugs intermitentes que solo aparecen después de la 50ª iteración de un bucle.
Pestaña Coverage: Encuentra y elimina código no utilizado
Cómo abrirla: Menú de tres puntos → More Tools → Coverage.
Presiona grabar, interactúa con tu página y luego detén. DevTools te muestra exactamente qué porcentaje de cada archivo JS y CSS nunca se ejecutó. Un archivo con un 60–70% sin usar es candidato para code splitting o lazy loading.
El flujo de trabajo es directo: Coverage → identificar código muerto → dividir o diferir → medir la mejora en LCP y TTI. Esto impacta directamente en tus puntuaciones de Core Web Vitals.
Consejo: Coverage no tiene en cuenta el código activado por interacciones. Graba mientras haces clic a través de tus flujos de usuario clave, no solo en la carga de página.
Discover how at OpenReplay.com.
Insights del panel Performance: Depurando Layout Shifts y recálculo de estilos
El panel Performance ha madurado significativamente. Graba una sesión y observa el desglose del hilo principal — específicamente los eventos de Style Recalc y Layout. Un único cambio de propiedad CSS en un elemento padre puede desencadenar un recálculo completo de layout en cientos de nodos del DOM.
Para depurar CLS, habilita Layout Shift Regions a través del cajón Rendering (menú de tres puntos → More Tools → Rendering) antes de grabar. Los elementos desplazados se resaltan con un marco azul cuadro por cuadro, haciendo inmediatamente obvio qué elemento se movió y cuándo.
Evita consultar propiedades de layout como offsetHeight o getBoundingClientRect() dentro de bucles — cada llamada fuerza un layout sincrónico, lo que se acumula rápidamente.
Panel Network Conditions: Simulación granular de solicitudes y rastreo
La mayoría de los desarrolladores conocen la limitación de red global en la pestaña Network. Menos conocen los paneles Request Blocking y Network Conditions, accesibles a través del menú de tres puntos → More Tools.
El panel Network Conditions te permite sobrescribir el user agent y deshabilitar el caché globalmente. La limitación de red en sí misma se controla típicamente desde el menú desplegable de throttling de la pestaña Network, que simula conexiones más lentas para pruebas. Las versiones más recientes de DevTools también admiten limitación más granular a nivel de solicitud a través de herramientas de condiciones de solicitud.
Request Blocking (More Tools → Network Request Blocking) te permite bloquear patrones de URL específicos por completo — útil para probar cómo se comporta tu aplicación cuando un script de terceros particular falla al cargar.
Para rastrear de dónde se origina una solicitud en tu código, haz clic en cualquier solicitud en la pestaña Network y abre la pestaña Initiator. Muestra la pila de llamadas exacta que desencadenó la solicitud — una forma rápida de hacer ingeniería inversa de llamadas API desconocidas o rastrear dónde se está disparando un fetch inesperadamente.
Conclusión
Las funcionalidades anteriores no son oscuras por el simple hecho de serlo — resuelven problemas reales más rápido que las alternativas. CSS Overview reemplaza las auditorías manuales de hojas de estilo. Los Logpoints reemplazan las declaraciones de consola desechables. Coverage hace que la optimización de bundles sea concreta en lugar de especulativa.
Las mejores técnicas de depuración de Chrome DevTools comparten un rasgo: reducen la brecha entre “algo se siente mal” y “sé exactamente qué está mal”. Comienza con una funcionalidad de esta lista, incorpórala en tu flujo de trabajo, y el resto seguirá naturalmente.
Preguntas frecuentes
Los Logpoints están vinculados a tu sesión de DevTools y al mapeo específico del archivo fuente. Persisten mientras el código fuente de la página permanezca igual y DevTools retenga su estado de workspace. Sin embargo, no se guardan permanentemente entre reinicios del navegador a menos que uses un Workspace con sobrescrituras de archivos locales configuradas en el panel Sources.
El tree-shaking elimina código que nunca se importa o referencia en tiempo de compilación basándose en análisis estático. La pestaña Coverage mide la ejecución en tiempo de ejecución, mostrando código que se envió al navegador pero nunca se ejecutó realmente durante una sesión. Se complementan entre sí: el tree-shaking detecta exportaciones muertas, mientras que Coverage detecta código que es alcanzable pero no utilizado en la práctica.
CSS Overview no ofrece una función de exportación integrada. Sin embargo, puedes copiar manualmente los datos de cada sección o tomar capturas de pantalla. Para un enfoque más automatizado, considera usar herramientas como cssstats.com o Wallace CLI, que analizan hojas de estilo y producen informes exportables con desgloses similares de color, fuente y especificidad.
Habilitar Layout Shift Regions a través del cajón Rendering añade una superposición visual pero no distorsiona significativamente las métricas de tu panel Performance. El costo de renderizado de la superposición es insignificante. Para obtener los resultados de perfilado más precisos, cierra otras pestañas, deshabilita las extensiones del navegador y usa una ventana de incógnito para minimizar la interferencia de procesos en 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.
