⌘ REFERENCIA · 208 elementos
Cheatsheet de Chrome DevTools
Las herramientas enteras en un sitio, por síntoma y por panel. Los atajos van siempre en pareja macOS y Windows/Linux, y nada se describe por su ruta de menú: esas caducan.
⌨️ Atajos y menú de comandos 12
Abre en el último panel usado; F12 igualCmd+Opt+I · Ctrl+Shift+I
Abre con el cursor ya en la consolaCmd+Opt+J · Ctrl+Shift+J
Abre con el puntero de inspección activoCmd+Shift+C · Ctrl+Shift+C
El cajón: consola sin abandonar el panelEsc
Recorrer paneles sin tocar el ratónCmd+[ ] · Ctrl+[ ]
Busca en el panel activo, con semántica propiaCmd+F · Ctrl+F
Busca en todo lo descargado, no solo en tu repoCmd+Opt+F · Ctrl+Shift+F
Continuar cuando el depurador congeló la páginaF8
El diálogo, ya con el prefijo de comandosCmd+Shift+P · Ctrl+Shift+P
Fichero por búsqueda difusa: usrprf halla user-profileCmd+P · Ctrl+P
Ir a línea, ir a símbolo, lanzar un snippetPrefijos : @ !
La ruta de menú caduca; el nombre del comando noNombra, no navegues
🌲 Elements: el DOM 11
El parser corrigió y los scripts reescribieronEl DOM no es tu HTML
El parser lo inserta y tu table > tr deja de casarEl tbody fantasma
El panel los pinta; querySelector no los alcanzaPseudo-elementos
Visible en el panel, inalcanzable desde la páginaSombra cerrada
Modal y popover: por eso ningún z-index los tapaLa capa superior
Reparsea el subárbol: los listeners se pierdenEditar como HTML
Es un insertBefore: conserva listeners y estadoMover un nodo
Reversible: bisección visual para hallar al que tapaOcultar con H
El hover sobrevive a llevarte el ratón al panelForzar estados
Congelar el DOM para ver lo que se escapadebugger diferido
Acepta texto, selector CSS y XPath a la vezBuscar en el árbol
🎨 Elements: estilos y cascada 11
La cascada ya resuelta, no tus ficherosEl panel de estilos
Otra regla ganó: capa, especificidad u ordenTachado por cascada
La propiedad no existe o está mal escritaTachado por inexistente
El valor no es válido para esa propiedadTachado por valor
No aplica a ese tipo de caja generadaTachado por caja
Una abreviada posterior la sobrescribióTachado por shorthand
Un valor por propiedad, con su regla de origenComputed
Añade los valores iniciales: cientos de filasMostrar todo
Escribir pad deja los cuatro rellenosEl filtro de computed
El diff de todo lo que has tocado en vivoLa pestaña de cambios
Dos ediciones a la vez no demuestran nadaUna variable por prueba
📐 Overlays de layout 11
Dibuja las líneas que no existen en el DOMOverlay de grid
El ajuste que delata el track desbordadoDeclarado y resuelto
Colocar al final sin saber cuántas columnas hayNúmeros negativos
Comprueba que tu dibujo produce lo que creíasNombres de área
Línea discontinua: la rejilla creó lo que pedisteFilas implícitas
Ver si el hijo hereda las líneas del padre o inventaSubgrid
Contorno, divisorias entre hijos y el repartoOverlay de flex
Si el espacio no está rayado, es margenEl gap va rayado
De dónde sale cada píxel de ese huecoModelo de caja
Quién desplaza de verdad y por qué no enganchaScroll y scroll-snap
Qué contenedor consulta realmente el elementoContainer queries
♿ Accesibilidad 12
El navegador construye dos árboles, no unoEl otro documento
display none no llega; opacity 0 sí llegaParte del render
Colapsa envoltorios: el árbol es mucho menor que el DOMLa poda
Las tres preguntas que responde un lectorNombre, rol y estado
Algoritmo con precedencia estricta, no intuiciónNombre accesible
Lo implícito del elemento frente a lo declaradoARIA computada
Tabulable y mudo: el foco aterriza en la nadaaria-hidden con foco
Quita la semántica sin quitar el contenidorole presentation
No puedo pulsar nada y no hay ningún overlayinert olvidado
Deficiencias de color y preferencias del sistemaSimular la visión
Mide luminancia relativa y falla en los tonos mediosRatio de WCAG 2
El cálculo sucesor: tiene en cuenta el peso y el tamañoAPCA
🖨️ Console: dar forma 14
Array de objetos a tabla: claves como columnasconsole.table
La lista de columnas: de ilegible a útilEl segundo argumento
El volcado se convierte en análisisOrdenar por cabecera
Un map antes del table vale por diez logsConstruir, no volcar
Un nodo como objeto y no como marcadoconsole.dir
Plegado: cada llamada ocupa una sola líneaconsole.group
De dos en dos por interacción: render duplicadoconsole.count
Uno, dos, tres por pasada: listener que no se quitaPatrón creciente
Mide, pero no lo compares con otras condicionesconsole.time
Quién llama, sin detener nadaconsole.trace
La pila deja de ser veinte marcos de frameworktrace y los ignorados
Callado mientras la invariante se cumplaconsole.assert
Dar formato en el sitio, sin concatenarEspecificadores y %c
Lo que hace usable una consola con ruidoNiveles y filtro
🧰 Console: las utilidades 15
Pila de los cinco últimos nodos seleccionados$0 hasta $4
Tu $0 caduca en cuanto seleccionas otro nodoGuardar como global
El resultado anterior: encadenar sin variables$_
Array de verdad: filter y map sin rodeos$$
XPath, cuando el selector CSS no llega$x
Buscar dentro de un shadowRoot abiertoEl argumento de raíz
Si la página define el dólar, la consola cedejQuery gana
Solo los de ese nodo: la delegación no aparecegetEventListeners
Del manejador al fichero y la línea, en dos expresionesinspect
Ver qué emite el elemento durante una interacciónmonitorEvents
Instancias vivas tras forzar la recolecciónqueryObjects
Del dato al portapapeles sin adornos de la interfazcopy
En un fichero, todo esto es un ReferenceErrorSolo en la consola
El iframe no se hereda: tu selector da nullContexto de ejecución
Un valor fijo arriba, sin ensuciar el registroExpresiones en vivo
🛑 Sources: los breakpoints 11
En una cadena, parar en la llamada que quierasDe línea y de columna
Parar solo cuando la expresión sea ciertaCondicional
Instrumentar sin tocar el código ni desplegarLogpoint
Parar en la interacción, no en el códigoDe evento
Añadir o quitar un hijo, a cualquier profundidadDe DOM: subárbol
El más útil: quién me ha cambiado la claseDe DOM: atributos
Quién ha sacado esto del documentoDe DOM: eliminación
Si el framework lo sustituye, se pierdeAtados al nodo
Cazar la petición que nadie sabe quién lanzaDe red
Incluidas las capturadas que alguien se tragaDe excepción
Entrar, saltar, salir y continuar: cuatro intencionesEl paso a paso
🔎 Sources: pausa, mapas y snippets 18
Los closures que no sabías que teníasEl panel de scope
Convierten el paso a paso en observaciónExpresiones vigiladas
Cambiar de marco cambia el scope que estás leyendoEl call stack
Reconstruye lo que el motor ya había olvidadoLa pila asíncrona
El ajuste que hace legible el depuradorLista de ignorados
node_modules, vendor, ficheros minificadosPatrones que poner
Se apoya en lo que los propios paquetes declaranTerceros automáticos
Cuando el bug sí está dentro de la libreríaSacar de la lista
Repetir la llamada sin volver a reproducir todoReiniciar el marco
VLQ y mappings: del generado a tu fuenteSource map
La fuente dentro del mapa: no depende del servidorsourcesContent
Sin mapa depuras el bundle, no tu códigoCuando falla
Los tipos no sobreviven: en pausa hay valoresDepurar TypeScript
Editar producción y que aguante la recargaLocal overrides
Lo que tocas en el panel se escribe en tu proyectoWorkspace
Consola guardada que corre en cualquier páginaSnippet
Desde el diálogo, sin abrir el panelLanzarlo por nombre
Lo que reescribes cada semana, no lo espectacularQué merece guardar
🌐 Network 16
Aún no ha salido: prioridad o límite de conexionesEn cola y estancado
Alta y repetida: demasiados orígenes distintosResolución de nombres
Es latencia pura: el servidor está lejosConexión inicial
Otro viaje de ida y vuelta, o dos si es antiguaNegociación segura
Despreciable salvo cuando es una subidaEnvío
Latencia más servidor: aquí vive el backendEspera de respuesta
Tamaño partido por ancho de banda, nada másDescarga
Dos fases antes; si responde de caché, no hay redCon service worker
Por método, tipo, dominio, tamaño o estadoFiltros por palabra
Lo pesado que no es imagen; lo que no es tuyoNegar y combinar
La tijera: mide el coste real de un terceroBloquear
Bajada, subida y latencia; manda la latenciaThrottling
Pérdida de paquetes, variabilidad, radio y calorLo que no simula
Solo con el panel abierto, y te engaña al medirDesactivar la caché
La sesión entera en JSON, cargable en tu panelHAR
Quita tres cabeceras; no es un HAR anónimoHAR saneado
⏱️ Performance 15
Incógnito, sin extensiones, estado conocidoGrabar limpio
La variante que casi siempre quieresRecargar y grabar
Tiempo, y solo tiempo: la anchura es duración totalEje horizontal
Profundidad de pila: fue llamada por, nada másEje vertical
Categoría de trabajo, no gravedadEl color
Capas que delegan: el coste está en la hojaLa torre
Una función que hace el trabajo ella mismaLa meseta
Individual despreciable, agregado enormeEl peine
Ordenar por propio encuentra al culpable realPropio y total
Importa cuándo, si había alguien esperando y cuántasLa tarea larga
La pregunta no es qué hace: es quién lo cargóAtribuir a un tercero
De la cifra al instante que la produjoMétricas en el perfil
Cada uno se descompone en fases con dueño distintoLCP e INP
Buen punto de partida, no un inventarioInsights automáticos
Layout dentro del script: lectura y escritura alternadasFranjas moradas
🖌️ Rendering y animaciones 14
Mira dos cosas: cuánta superficie y con qué frecuenciaResaltado de repintado
Dos cambios lejanos repintan todo lo que hay en medioSe pinta por regiones
Un indicador vivo detrás de otra cosaParpadeo en reposo
El modelo de composición que el DOM no enseñaBordes de capa
Mover y opacar sin repintar, aunque el hilo esté muertoLo que compra una capa
Cada textura ocupa memoria de GPU: degradaDemasiadas capas
Ver moverse el contenido que empeora la métricaRegiones de salto
Dónde se cae la fluidez al desplazarseFotogramas y scroll
Esquema de color, movimiento reducido, visiónEmular preferencias
Sirve para ver qué se repinta, no para medir cuántoEl overlay cuesta
Captura transiciones, keyframes y la API webEl panel de animaciones
Estilos escritos fotograma a fotograma: no son objetosLo que no captura
Ver lo que ocurre en trescientos milisegundosRalentizar
Ajustar tiempos y aceleración sin recargarEditar la curva
🧠 Memory 15
El grafo entero de objetos vivos, con sus aristasInstantánea del montón
Lo que sale en la foto está vivo por definiciónFuerza recolección
Cuándo se creó lo que no se liberaLínea de asignaciones
Poca sobrecarga: qué código presiona al recolectorMuestreo
El objeto en sí: casi siempre un número pequeñoTamaño superficial
Lo que se liberaría; la palabra clave es soloTamaño retenido
La otra columna te lleva a estructuras del motorOrdenar por retenido
El nombre de cada arista dice cómo te retienenCamino de retención
Filtrar en la tercera lo creado entre la uno y la dosTres instantáneas
Fuera de la página y aún en memoria, con su subárbolNodos separados
La cadena pasa por un contexto de funciónFirma de cierre
La raíz es el registro de escuchas del navegadorFirma de escucha
Un intervalo sin cancelar retiene todo lo capturadoFirma de temporizador
El eslabón que es una limpieza que ya debería existirDónde cortar
El montón es una parte de la memoria del procesoEl total no cuadra
💾 Application y service workers 14
Dos ámbitos, síncrono, y un tope que se alcanzaAlmacenamiento web
Bases, almacenes, índices y la versión del esquemaIndexedDB
Los atributos deciden si viajan y a dóndeCookies
Respuestas HTTP, no datos de aplicaciónCache storage
Depende del disco y baja si el usuario lo llenaLa cuota
Cache, IndexedDB y storage suman contra el mismo totalEs compartida
Borra el origen entero: no hay borrado parcialDesalojo
Exento del desalojo automático; solo lo borra el usuarioPersistente
Lo que se rompa le pasará a cualquier usuario nuevoProbarlo vacío
Instalando, en espera, activando, activado, redundanteCiclo del worker
Explica el he desplegado y no se veActivo y en espera
Provocar el arranque en frío a manoDetenido y arrancado
El ajuste que evita depurar una versión viejaActualizar al recargar
Modo desconectado, notificación push y sincronizaciónProvocar eventos
🤖 Auditar, emular y automatizar 19
Recarga y mide la carga: el único con puntuaciónModo navegación
Mide lo que ocurre mientras usas la aplicaciónModo intervalo
Estructura del documento tal y como está ahoraModo instantánea
Dos números distintos que no miden lo mismoLaboratorio y campo
Es variable: sirve de aviso, no de objetivoLa puntuación
De dónde sale cada kilobyte del paqueteEl treemap
Lo que no se ejecutó en esta sesión, no lo muertoCobertura
Existen para lo que no pasó: siempre sin usarRamas de error
La clase construida con cadenas desaparece en producciónPurga automática
Colores, tipografías y complejidad de un vistazoVista general del CSS
Cambia viewport y agente, no el hardwareEmulación de dispositivo
Pausas en el hilo: uniforme, y un móvil no lo esThrottling de CPU
La combinación por defecto no es ningún dispositivoRed rápida, CPU lenta
La única forma de medir rendimiento móvil de verdadDepuración por USB
Tu servidor local visible desde el teléfonoPort forwarding
Haz la acción y lee el comando que generóMonitor de protocolo
Comandos con respuesta y eventos sin peticiónEl protocolo
Sin privilegios: tu script puede hacer lo mismoLa interfaz es un cliente
Capturar un flujo y exportarlo como scriptGrabadora