# Referencia Rápida de Chrome DevTools

*Elementos, Consola, Red, Rendimiento, depuración*

> Source: Chrome DevTools Documentation (developer.chrome.com/docs/devtools) · MIT

## Elementos

### Inspeccionar y editar

| Command | Description |
|---------|-------------|
| `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

| Command | Description |
|---------|-------------|
| `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

| Command | Description |
|---------|-------------|
| `$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

| Command | Description |
|---------|-------------|
| `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

| Command | Description |
|---------|-------------|
| `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

| Command | Description |
|---------|-------------|
| `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

| Command | Description |
|---------|-------------|
| `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

| Command | Description |
|---------|-------------|
| `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

| Command | Description |
|---------|-------------|
| `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

| Command | Description |
|---------|-------------|
| `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

| Command | Description |
|---------|-------------|
| `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

| Command | Description |
|---------|-------------|
| `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

| Command | Description |
|---------|-------------|
| `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

| Command | Description |
|---------|-------------|
| `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

| Command | Description |
|---------|-------------|
| `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

| Command | Description |
|---------|-------------|
| `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

| Command | Description |
|---------|-------------|
| `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

| Command | Description |
|---------|-------------|
| `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

| Command | Description |
|---------|-------------|
| `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

| Command | Description |
|---------|-------------|
| `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

| Command | Description |
|---------|-------------|
| `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)

| Command | Description |
|---------|-------------|
| `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

| Command | Description |
|---------|-------------|
| `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

| Command | Description |
|---------|-------------|
| `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 });
```