La tabla síntoma, panel, acción: el índice completo del track · Chrome DevTools

Esta es la lección que vas a volver a abrir. No para leerla entera sino para buscar una fila: tienes un síntoma delante, quieres saber a qué panel ir y qué hacer al llegar, y no quieres recordar treinta niveles. La tabla está ordenada por familia de síntoma, cada fila tiene una primera acción concreta y no un nombre de panel a secas, y cada una enlaza con la lección donde se desarrolla.

🎯 Al terminar esta lección sabrás

Clasificar un síntoma observable en una de las seis familias.
Localizar la fila correspondiente y ejecutar su primera acción.
Aplicar el orden de las comprobaciones baratas antes de entrar en la tabla.
Usar el árbol de decisión cuando el síntoma no encaja en ninguna fila.

El árbol antes de la tabla

flowchart TB
s[Sintoma observado] --> p{Las cinco comprobaciones baratas}
p --> q{Que familia es}
q -->|No se ve o se ve mal| a[Elements]
q -->|No responde o hace algo raro| b[Sources y Console]
q -->|Tarda en cargar| c[Network]
q -->|Se congela al interactuar| d[Performance]
q -->|Salta o parpadea| e[Rendering]
q -->|Empeora con el tiempo| f[Memory]
q -->|Depende del estado guardado| g[Application]
q -->|Solo en movil| h[Dispositivo real]
style s fill:#cba6f7,color:#11111b
style p fill:#f9e2af,color:#11111b
style a fill:#89b4fa,color:#11111b
style b fill:#a6e3a1,color:#11111b
style c fill:#f9e2af,color:#11111b
style d fill:#fab387,color:#11111b
style e fill:#fab387,color:#11111b
style f fill:#f38ba8,color:#11111b
style g fill:#94e2d5,color:#11111b
style h fill:#cba6f7,color:#11111b

Las cinco comprobaciones baratas van siempre antes de la tabla, cuestan dos minutos en total, y cada una elimina una familia entera de causas.

Una: ventana de incógnito. Descarta extensiones, estado persistente y service workers de golpe. Si allí funciona, el problema está en el estado y tu panel es Application.

Dos: la consola. ¿Hay errores? Un error no capturado explica muchísimos síntomas y se ve en tres segundos. Y activa la pausa en excepciones capturadas: los errores que alguien se traga son invisibles de otro modo, y ese caso está en pausar en excepciones.

Tres: el panel de red. ¿Salió la petición? ¿Qué devolvió? La respuesta cruda antes de culpar al código que la consume, como se ve en diagnosticar una carga lenta.

Cuatro: el panel de incidencias. Recoge problemas que el navegador detecta y que no aparecen como errores: CORS, cookies rechazadas, contenido mixto, atributos obsoletos.

Cinco: las condiciones. Red lenta y CPU lenta. Convierte muchas intermitencias en deterministas, por lo que explica el throttling de red.

La tabla

No se ve, o se ve mal

Síntoma	Primera acción	Lección
El elemento no aparece	Buscar por selector o por texto en Elements para saber si el nodo existe	Buscar en el árbol
El nodo existe y no se ve	Mirar el modelo de caja: dimensión cero, desbordamiento, apilamiento	El modelo de caja
El estilo no se aplica	Buscar la declaración tachada y averiguar por qué lo está	Por qué está tachado
El valor computado no es el esperado	Pestaña de computados y origen de cada propiedad	Computados y el origen
La rejilla o el flex no colocan bien	Activar el overlay correspondiente y leer los tamaños reales	El inspector de grid
Una container query no dispara	Comprobar cuál es el contenedor de consulta real	Container queries
Solo falla al pasar el ratón o al enfocar	Forzar el estado desde el panel para poder inspeccionarlo	Forzar estados
El lector de pantalla anuncia otra cosa	Mirar nombre, rol y estado computados	Nombre, rol y estado
Se ve mal solo con ciertas preferencias	Emular esquema de color, contraste y colores forzados	Emular preferencias

No responde, o hace algo raro

Síntoma	Primera acción	Lección
El clic no hace nada	Breakpoint de evento en el tipo correspondiente, para ver si se dispara	Breakpoints de evento
No sé dónde poner el punto de parada	Elegir el tipo de breakpoint según el síntoma	Cuando no sabes dónde parar
Algo modifica un nodo y no sé quién	Breakpoint de modificación de subárbol o de atributos	Breakpoints de DOM
Sale una petición que nadie ha pedido	Breakpoint de red sobre el patrón de URL	Breakpoints de red
El valor de una variable es raro	Panel de scope, para ver qué captura cada ámbito	El panel de scope
No sé quién programó esta tarea asíncrona	Leer la pila asíncrona completa	La pila asíncrona
La pila está llena de código de librería	Configurar la lista de ignorados	La lista de ignorados
Falla solo en producción	Reproducir con overrides locales sobre los ficheros reales	Local overrides
El depurador muestra código irreconocible	Comprobar el estado del source map	Cuando el source map falla
Necesito saber quién llama a esta función	Envolverla y volcar la traza de pila	trace y assert
Un selector devuelve nulo y el nodo está ahí	Comprobar el contexto de ejecución: marco o worker	El contexto de ejecución

Tarda en cargar

Síntoma	Primera acción	Lección
La página tarda y no sé por qué	Leer la forma de la cascada antes que ningún número	La forma de la cascada
Una petición concreta tarda	Desglosar su timing en fases y ver cuál domina	El desglose del timing
El recurso principal se pide tarde	Revisar prioridades e iniciador	Prioridades y el orden
Algo debería estar cacheado y no lo está	Recorrer las nueve causas en orden	Por qué no se cachea
Quiero saber si un recurso hace falta	Bloquearlo y ver qué pasa sin él	Bloquear peticiones
La métrica de pintura mayor es mala	Descomponerla en sus cuatro subpartes	El desglose de LCP
El paquete es enorme y no sé de qué	Abrir el mapa de árbol del informe	El treemap
Una llamada a otro origen falla	Mirar la comprobación previa y el panel de incidencias	Diagnosticar un CORS

Se congela al interactuar

Síntoma	Primera acción	Lección
Se congela al pulsar algo	Grabar solo esa interacción y buscar la tarea larga	Encontrar la tarea larga
Tengo un perfil y no sé leerlo	Recorrido vertical desde las pistas superiores	Las pistas del timeline
No sé qué función consume el tiempo	Vista de abajo arriba, ordenada por tiempo propio	Leer un flame chart
El manejador es rápido y la respuesta lenta	Descomponer la interacción en sus tres fases	El desglose de INP
El perfil tiene franjas moradas dentro del script	Buscar la disposición sincrónica forzada	Layout thrashing
El hilo está ocupado con código ajeno	Medir el coste por dominio y hacer el experimento de bloqueo	Un tercero pesado
Se ve completa y no responde durante segundos	Medir el hueco entre verse y funcionar	El perfil de la hidratación
No sé por dónde empezar con el perfil	Clasificar por la forma de la silueta	La tabla de formas

Salta, parpadea o va a tirones

Síntoma	Primera acción	Lección
El contenido se mueve al cargar	Activar el overlay de regiones desplazadas con red lenta	Regiones de salto
Se repinta más de lo que debería	Activar el resaltado de repintado y mirar la superficie	Resaltado de repintado
El desplazamiento se pega	Bloquear el hilo a propósito y ver si se desplaza igual	Estadísticas de fotogramas
La animación va a tirones	Ralentizar: si el defecto desaparece, es rendimiento	Ralentizar la reproducción
Hay demasiadas capas de composición	Activar los bordes de capa y contar	Bordes de capa
La transición se siente desordenada	Leer la coreografía del grupo en la línea de tiempo	La línea de tiempo

Empeora con el uso, o depende del estado

Síntoma	Primera acción	Lección
Va peor cuanto más rato lleva abierta	Diseñar el ciclo y aplicar las tres instantáneas	Los tres snapshots
Sospecho de un objeto concreto	Marcarlo y leer su cadena de retención	Quién lo mantiene vivo
Hay elementos fuera del árbol en memoria	Filtrar por nodos separados en el snapshot	Nodos separados
Sospecho de suscripciones no canceladas	Contar registros en objetivos de vida larga y repetir el ciclo	Escuchas que no se quitan
Funciona en incógnito y no en normal	Inspeccionar el almacenamiento y las cookies	Las cookies
Sirve una versión antigua tras desplegar	Comprobar el estado del service worker y su caché	El worker mal desplegado
Falla al escribir en el almacenamiento	Consultar la cuota y el uso desglosado	La cuota

Solo pasa en móvil

Síntoma	Primera acción	Lección
Se rompe la disposición en pantallas estrechas	Modo de dispositivo, arrastrando el ancho	La emulación de dispositivo
Va bien en la emulación y mal en el teléfono	Conectar el dispositivo real y grabar allí	Depuración remota
Necesito probar mi entorno local en el móvil	Configurar el reenvío de puertos	Port forwarding
No sé cuánta ralentización aplicar	Medir el dispositivo objetivo y calcular el cociente	El throttling de CPU

Cuando el síntoma no encaja

Tres situaciones en las que ninguna fila sirve, con su salida.

El síntoma es ambiguo entre dos familias. Casi siempre se desempata con una comprobación de cinco segundos. “El dato no aparece”: mira la respuesta en el panel de red; si está, es render, si no, es datos. “A veces sí y a veces no”: exagera las condiciones. “En mi máquina funciona”: incógnito.

El síntoma no es observable. Alguien reporta una sensación —“va lento”, “se comporta raro”— sin nada que mirar. La salida no es un panel: es volver a la fase de observación y conseguir una descripción concreta.

El síntoma está fuera del navegador. Si la respuesta del servidor ya es incorrecta, ningún panel de este track va a arreglarlo, y seguir mirando es perder el tiempo. Esa comprobación —mirar la respuesta cruda— es la que evita la conversación más larga y más estéril que existe entre frontend y backend.

⚡

El valor de esta tabla no está en las respuestas sino en que obliga a nombrar el síntoma antes de actuar

Podrías usar esta tabla durante años y su mayor aportación no sería ninguna de sus filas. Sería el hábito que impone al usarla: para encontrar tu fila tienes que decidir primero qué estás observando exactamente, y esa decisión es la que resuelve la mitad de los problemas antes de abrir nada. Un síntoma bien formulado ya contiene su diagnóstico con una frecuencia sorprendente. “El botón está roto” no lleva a ninguna fila porque no es una observación; obligarse a convertirlo en “pulso el botón, sale una petición que devuelve doscientos, y la tabla sigue mostrando el valor anterior” produce una frase que apunta directamente a la familia correcta y que, además, descarta por sí sola la mitad de las hipótesis. Ese trabajo de formulación es el que casi nadie hace, no porque sea difícil sino porque parece un rodeo cuando ya tienes el problema delante y la tentación de abrir un panel es fuerte. La segunda aportación, menos evidente, es que la tabla desactiva el sesgo del panel favorito. Todo el mundo desarrolla afinidad con dos o tres paneles y tiende a intentar resolverlo todo con ellos: quien vive en la consola instrumenta con trazas problemas que se resolverían con un breakpoint de DOM en dos minutos; quien vive en Elements busca en el CSS problemas que están en los datos. Esa preferencia es cómoda y cuesta horas. Una tabla que asigna la entrada por síntoma y no por gusto corrige el sesgo sin necesidad de que nadie lo reconozca. Y la tercera, para quien trabaja en equipo: este documento es transmisible. La experiencia de depuración es notoriamente difícil de enseñar porque quien la tiene ejecuta el método sin poder explicarlo. Una tabla como esta, adaptada al producto concreto de tu equipo, con las rutas y los servicios reales, es lo más parecido a transferir esa experiencia que existe, y su mayor beneficiario será quien entre el año que viene.