Las herramientas por dentro: Elements y la cascada real, breakpoints que no son de línea, el waterfall, el flame chart, cazar fugas y automatizar.
Cada nivel construye sobre el anterior. Sin saltos, sin huecos.
Los paneles, qué problema resuelve cada uno, y el mapa mental para saber a cuál ir según el síntoma.
Los atajos que ahorran horas, el command menu, el docking, los experimentos y sincronizar tus ajustes.
Navegar y editar el DOM, el breadcrumb, buscar con selectores y XPath, y forzar estados de pseudo-clase.
Leer la cascada real, las reglas tachadas, editar en vivo, los valores computados y de dónde viene cada uno.
El inspector de grid y flex, las guías de alineación, el overlay de scroll-snap y el de container queries.
El árbol de accesibilidad, las propiedades ARIA computadas, el contraste con APCA y la simulación de visión.
table, group, dir, count, time, trace y assert, el formato con estilos, y los niveles de log.
Las funciones de la consola, el selector de contexto, los live expressions, y las preservación del log.
Los tipos de breakpoint, condicionales, logpoints, el paso a paso y leer el call stack.
Breakpoints de evento, de DOM, de XHR y de excepción: cómo cazar un bug cuando no sabes dónde poner el punto.
Inspeccionar el scope, las expresiones vigiladas, la pila asíncrona completa y el blackboxing de librerías.
Cómo funcionan los source maps, depurar TypeScript, los local overrides para editar producción, y el workspace.
Guardar y ejecutar scripts en cualquier página, los casos de uso reales, y una colección de snippets útiles.
Las columnas que importan, el desglose del timing, la cascada, y diagnosticar por la forma del waterfall.
Los filtros avanzados, bloquear peticiones, el throttling de red, y desactivar la caché con criterio.
Leer las cabeceras de caché, diagnosticar un CORS, el panel de seguridad, y el HAR para compartir.
Grabar bien, las pistas del timeline, el flame chart, el main thread y encontrar la long task.
La pista de Core Web Vitals, el desglose de LCP e INP en el propio perfil, y los insights automáticos.
El árbol de decisión: si el patrón es este, mira allá. Los perfiles típicos de cada tipo de problema.
Paint flashing, layout shift regions, layer borders, FPS meter, y forzar los prefers y la emulación.
Tomar un snapshot, retained frente a shallow size, el retainer path, y encontrar qué mantiene vivo un objeto.
La técnica de los tres snapshots, la línea de allocation timeline, los detached nodes y el ciclo de reproducción.
localStorage, IndexedDB, cookies, cache storage, el manifiesto y la cuota de almacenamiento.
El estado del worker, forzar la actualización, el modo offline, inspeccionar la cache y los eventos.
Capturar, inspeccionar y editar animaciones en vivo, ralentizarlas, y ajustar las curvas visualmente.
Qué mide y cómo, la diferencia con el campo, leer el informe sin obsesionarse con el número, y el treemap.
El panel de cobertura para CSS y JS no usado, sus límites reales, y la vista general del CSS del sitio.
La emulación de dispositivo y sus límites, el remote debugging por USB, y el port forwarding.
El Chrome DevTools Protocol por debajo, el panel de recorder, exportar a Puppeteer y automatizar auditorías.
El flujo completo de diagnóstico, la tabla síntoma-panel-acción, y los hábitos que separan al que depura rápido.
Empieza por los fundamentos y sube nivel a nivel hasta el dominio total.
Comenzar el camino →