Elementos

Inspeccionar y editar

Right-click -> Inspect	Abrir panel Elementos para el elemento
Double-click tag/attribute	Editar HTML en línea
Delete key	Eliminar nodo seleccionado
Ctrl+Z	Deshacer cambio en el DOM
H key	Alternar visibilidad del elemento seleccionado
Drag node	Mover elemento en el árbol DOM

Panel Estilos

element.style {}	Agregar estilos en línea al elemento
Click property value	Editar valor CSS en vivo
Checkbox next to rule	Activar/desactivar propiedad CSS
:hov button	Forzar pseudo-estados del elemento (:hover, :focus)
.cls button	Agregar/quitar clases CSS
Color swatch	Abrir selector de color
Computed tab	Ver valores CSS calculados finales

Consola

API de Consola

console.log("info");          console.warn("warning");
console.error("error");       console.table(arrayOrObj);
console.group("label");       console.groupEnd();
console.time("t"); /*...*/ console.timeEnd("t");

Utilidades de Consola

$0	Elemento actualmente seleccionado en Elementos
$('sel') / $$('sel')	Atajo de querySelector / querySelectorAll
copy(obj)	Copiar objeto como cadena al portapapeles
clear()	Limpiar salida de la consola
monitor(fn)	Registrar llamadas a la función fn
monitorEvents(el, 'click')	Registrar eventos en el elemento
keys(obj) / values(obj)	Claves / valores del objeto
$_	Resultado de la última expresión evaluada

Filtrado

Log levels dropdown	Filtrar por verbose/info/warn/error
Filter text box	Buscar en la salida de la consola
-url:extension	Excluir mensajes por URL de origen
context: dropdown	Filtrar por contexto iframe/worker

Red

Funciones del panel Red

Filter bar	Filtrar por tipo: XHR, JS, CSS, Img, Doc, WS
Search (Ctrl+F)	Buscar en todos los cuerpos de solicitud/respuesta
Preserve log	Conservar el log durante la navegación
Disable cache	Omitir caché del navegador con DevTools abierto
Throttling dropdown	Simular 3G lento, 3G rápido, Sin conexión
Block request URL	Clic derecho en solicitud -> Block URL

Pestañas de detalles de solicitud

Headers	Cabeceras de solicitud/respuesta, código de estado
Payload	Cuerpo POST, parámetros de consulta
Preview	Respuesta formateada (JSON, HTML, imagen)
Response	Cuerpo de respuesta sin procesar
Timing	DNS, conexión, TLS, TTFB, descarga
Initiator	Traza de pila que originó la solicitud
Cookies	Cookies enviadas/recibidas

Copiar y exportar

Right-click -> Copy as cURL	Copiar solicitud como comando cURL
Copy as fetch	Copiar como JavaScript fetch()
Export HAR	Exportar todas las solicitudes como archivo HAR
Copy response	Copiar cuerpo de respuesta al portapapeles

Fuentes

Breakpoints

Click line number	Activar/desactivar breakpoint en línea
Right-click -> Conditional	Pausar solo si la expresión es verdadera
Right-click -> Logpoint	Registrar sin pausar la ejecución
DOM breakpoint	Pausar en subárbol/atributo/eliminación
XHR/Fetch breakpoint	Pausar cuando la URL contiene la cadena
Event listener breakpoint	Pausar en tipos de eventos específicos

Controles del depurador

F8 / Ctrl+\	Reanudar / Pausar ejecución
F10	Pasar por encima de la llamada de función
F11	Entrar en la llamada de función
Shift+F11	Salir de la función actual
Ctrl+Shift+P -> "never pause"	Deshabilitar todos los breakpoints

Paneles de depuración

Watch	Monitorear valores de expresiones
Scope	Variables locales, de cierre y globales
Call Stack	Cadena de llamadas a funciones
Snippets	Guardar y ejecutar código JS reutilizable

Rendimiento

Grabación

Record button (Ctrl+E)	Iniciar/detener grabación de rendimiento
Reload button	Grabar rendimiento de carga de página
Screenshots checkbox	Capturar línea de tiempo visual
CPU throttle dropdown	Simular reducción de CPU 4x/6x
Network throttle	Simular red lenta durante la grabación

Leer el Flame Chart

Main track	Ejecución de JavaScript (flame chart)
Network track	Línea de tiempo de solicitudes de red
Frames track	FPS y duración de fotogramas
Timings track	Marcadores FCP, LCP, DCL, Load
Yellow bars	JavaScript (scripting)
Purple bars	Layout / renderizado
Green bars	Pintado / composición

Bottom-Up y Resumen

Summary tab	Desglose de tiempo: scripting, renderizado, etc.
Bottom-Up tab	Funciones más costosas primero
Call Tree tab	Jerarquía de llamadas de raíz a hoja
Event Log tab	Lista cronológica de eventos

Aplicación

Almacenamiento

Local Storage	Ver/editar pares clave-valor por origen
Session Storage	Ver/editar almacenamiento de sesión
IndexedDB	Inspeccionar almacenes de objetos y registros
Cookies	Ver/editar/eliminar cookies por dominio
Cache Storage	Inspeccionar cachés del Service Worker
Clear storage	Limpiar tipos de almacenamiento seleccionados

Service Workers y Manifest

Service Workers	Ver registro, estado, push/sync
Update on reload	Forzar actualización del SW en cada recarga
Bypass for network	Omitir SW e ir directamente a la red
Manifest	Ver detalles del manifest de la web app
Offline checkbox	Simular modo sin conexión

Lighthouse

Ejecutar auditorías

Mode: Navigation	Auditoría de carga completa de página
Mode: Timespan	Auditar interacciones del usuario a lo largo del tiempo
Mode: Snapshot	Auditar estado actual de la página
Categories	Rendimiento, Accesibilidad, Buenas Prácticas, SEO
Device	Simulación de móvil o escritorio

Métricas clave

FCP (First Contentful Paint)	Tiempo hasta el primer contenido visible
LCP (Largest Contentful Paint)	Tiempo hasta el elemento visible más grande
TBT (Total Blocking Time)	Suma del tiempo bloqueado por tareas largas
CLS (Cumulative Layout Shift)	Puntuación de estabilidad visual
SI (Speed Index)	Velocidad con que se rellena visualmente el contenido
INP (Interaction to Next Paint)	Capacidad de respuesta a la entrada del usuario

Atajos

Abrir DevTools

F12 / Ctrl+Shift+I	Alternar DevTools abierto/cerrado
Ctrl+Shift+J	Abrir panel Consola
Ctrl+Shift+C	Abrir Elementos + modo inspección
Ctrl+Shift+M	Alternar barra de dispositivos (responsive)

Navegación y búsqueda

Ctrl+Shift+P	Menú de comandos (ejecutar cualquier acción)
Ctrl+P	Abrir archivo (Ir al archivo)
Ctrl+Shift+F	Buscar en todas las fuentes
Ctrl+G	Ir al número de línea en Sources
Ctrl+[ / Ctrl+]	Cambiar entre paneles

Edición y Consola

Ctrl+Shift+D	Alternar posición de acoplamiento de DevTools
Ctrl+L (Console)	Limpiar salida de la consola
Shift+Enter (Console)	Entrada multilínea
Esc	Alternar cajón de la consola
Ctrl+K (Console)	Limpiar consola

Depuración móvil

Barra de dispositivos

Ctrl+Shift+M	Alternar barra de dispositivos
Device dropdown	Dimensiones preestablecidas de teléfono/tablet
Responsive mode	Redimensionar el viewport libremente
DPR dropdown	Cambiar relación de píxeles del dispositivo
Throttling	Simular CPU + red de móvil
Show media queries	Visualizar breakpoints CSS

Depuración remota (Android)

1. Enable USB debugging	Settings -> Developer Options en el dispositivo
2. Connect USB	Conectar dispositivo Android al ordenador
3. chrome://inspect	Abrir en Chrome de escritorio
4. Click Inspect	Abrir DevTools para la página móvil

Requiere Chrome en el escritorio y en el dispositivo Android

Anular sensores

Geolocation	Anular coordenadas GPS
Orientation	Simular orientación del dispositivo
Touch	Simular eventos táctiles
Idle detection	Anular la API de detección de inactividad

Patrones comunes

Depurar problemas de red

// En Consola: monitorear todas las solicitudes fetch
const origFetch = window.fetch;
window.fetch = (...args) => {
  console.log('fetch:', args);
  return origFetch(...args);
};

Flujo de rendimiento

1. Lighthouse audit	Identificar los principales problemas de rendimiento
2. Performance recording	Encontrar tareas largas en el flame chart
3. Coverage tab	Encontrar CSS/JS sin usar (Ctrl+Shift+P -> Coverage)
4. Network waterfall	Identificar recursos bloqueantes
5. Rendering tab	Visualizar pintura/layout (Ctrl+Shift+P -> Rendering)

Fragmentos de consola útiles

// Listar todos los event listeners del elemento
getEventListeners($0);

// Monitorear cambios de layout
new PerformanceObserver(l => l.getEntries().forEach(
  e => console.log('CLS:', e)
)).observe({ type: 'layout-shift', buffered: true });

REFERENCIA RÁPIDA DE CHROME DEVTOOLS