Cheatsheet Chrome DevTools

F12              (abrir)
Ctrl + Shift + I   (abrir)
Ctrl + Shift + J   (consola directa)
Ctrl + Shift + C   (inspeccionar elemento)
Clic derecho → Inspeccionar

Acceder a las herramientas.

Ctrl + [ / ]       (panel anterior/siguiente)
Ctrl + Shift + P   (command palette)
Esc               (toggle console drawer)
Ctrl + Shift + D   (dock position)

Moverse en DevTools.

Ctrl + Shift + P

Comandos útiles:
"screenshot" → captura de pantalla
"theme" → modo oscuro/claro
"coverage" → código no usado
"animation" → inspector de animaciones

Acciones rápidas.

Ctrl + Shift + C (selector)
Clic en el elemento
Hover → highlight
Ctrl + Z (deshacer edición DOM)
Arrastrar para reordenar

Explorar el DOM.

Panel Styles → editar valores
Clic en el color → color picker
Toggle checkbox → activar/desactivar
+ → añadir propiedad
Forzar estados: :hover, :active

Modificar estilos en tiempo real.

Computed tab → box model visual
Margin, Border, Padding, Content
Flexbox: badge "flex" en el elemento
Grid: badge "grid" + overlay

Visualizar el layout.

Clic derecho en el elemento:
→ Break on → subtree modifications
→ Break on → attribute modifications
→ Break on → node removal
→ Copy → Copy selector/outerHTML

Monitorizar cambios en el DOM.

console.log(obj)
console.table(array)
console.dir(obj)
console.time('label')
console.timeEnd('label')
console.group('Grupo')
console.trace()

Métodos de consola.

$0           # elemento seleccionado
$('selector')  # querySelector
$$('selector') # querySelectorAll
$x('//div')   # XPath
monitorEvents(el, 'click')

Atajos de la consola.

debug(fn)     # breakpoint en la función
undebug(fn)
copy(obj)     # copiar al portapapeles
keys(obj)     # listar claves
values(obj)   # listar valores

Herramientas de debug.

Ctrl + L      (limpiar consola)
Filtro: Errors / Warnings / Info
Regex en el filtro
Ctrl + F      (buscar en la consola)
Preserve log (mantener al navegar)

Gestionar la salida de la consola.

Network tab → recargar la página
Filtrar: XHR, JS, CSS, Img, Media
Clic en la petición → Headers/Payload
Ctrl + E   (grabar/parar)
Disable cache (checkbox)

Analizar el tráfico de red.

Headers → status, timing
Payload → cuerpo del request
Preview → respuesta formateada
Response → respuesta raw
Timing → waterfall detallado

Detalles de cada petición.

Network conditions → Throttling:
  Fast 3G / Slow 3G / Offline

Custom profile:
  Download: 1.5 Mb/s
  Upload: 750 Kb/s
  Latency: 40ms

Simular redes lentas.

Clic derecho → Save all as HAR
Importar HAR para análisis
Waterfall → orden y duración
Size → tamaño transferido
Initiator → origen de la petición

Exportar y analizar.

Performance tab → ● (grabar)
Ctrl + E (iniciar/parar)
Recargar con grabación activa
Analizar: Main, Compositor, GPU
Screenshots timeline

Perfil de rendimiento.

LCP (Largest Contentful Paint)
FID (First Input Delay)
CLS (Cumulative Layout Shift)
TTFB (Time to First Byte)
FCP (First Contentful Paint)

Métricas de rendimiento.

Memory tab → Take snapshot
Comparar snapshots (leaks)
Allocation timeline
Allocation sampling
Retainers → qué mantiene el objeto

Detección de memory leaks.

Sources tab → clic en la línea
Conditional: clic derecho → Add
Logpoint: no para, solo loguea
Event listener breakpoints
DOM breakpoints (Elements tab)
XHR/fetch breakpoints

Tipos de breakpoints.

F8   (continuar)
F10  (step over)
F11  (step into)
Shift+F11 (step out)
Ctrl+P (abrir archivo)
Ctrl+Shift+F (buscar en todo)

Control de ejecución.

Lighthouse tab → Generate report
Categorías:
  Performance
  Accessibility
  Best Practices
  SEO
Mobile / Desktop

Auditoría automática.

Local Storage / Session Storage
Cookies → ver/editar/borrar
Cache Storage / Service Workers
IndexedDB → explorar datos
Manifest → PWA config

Almacenamiento del navegador.