Los filtros avanzados del panel de red · Chrome DevTools

El campo de filtro del panel de red parece un buscador de URLs y es un lenguaje de consulta con casi veinte palabras clave, negación y expresiones regulares. La diferencia entre usarlo como buscador y usarlo como lenguaje es la diferencia entre desplazarse por doscientas filas buscando algo y ver directamente las tres que cumplen tu condición. Cada palabra clave responde a una pregunta que de otra forma requiere ordenar columnas y contar a ojo.

🎯 Al terminar esta lección sabrás

Filtrar por dominio, método, estado, tipo, tamaño, cabeceras y cookies.
Combinar filtros y negarlos para acotar en una sola expresión.
Usar expresiones regulares cuando la coincidencia por subcadena no basta.
Construir las consultas que responden a las preguntas de auditoría más frecuentes.

Las palabras clave

La sintaxis general es clave:valor, sin espacios alrededor de los dos puntos. Varias condiciones separadas por espacio se combinan con y. Un guion delante de una condición la niega.

Clave	Qué filtra	Ejemplo
`domain`	El host, con comodín	`domain:*.ejemplo.com`
`method`	El método HTTP	`method:POST`
`status-code`	El código de estado	`status-code:404`
`scheme`	El esquema	`scheme:http`
`mime-type`	El tipo de contenido de la respuesta	`mime-type:application/json`
`resource-type`	La categoría del recurso	`resource-type:font`
`larger-than`	Tamaño mínimo	`larger-than:200k`
`priority`	La prioridad asignada	`priority:high`
`has-response-header`	Presencia de una cabecera	`has-response-header:x-cache`
`has-overrides`	Peticiones con override activo	`has-overrides:content`
`is`	Estados especiales	`is:from-cache`
`url`	Subcadena de la URL	`url:/api/`
`related-url`	Peticiones relacionadas	`related-url:analytics`
`cookie-name`	Cookie enviada con ese nombre	`cookie-name:sesion`
`cookie-domain`	Dominio de la cookie enviada	`cookie-domain:.ejemplo.com`
`cookie-value`	Valor de la cookie enviada	`cookie-value:abc`
`set-cookie-name`	Cookie que la respuesta establece	`set-cookie-name:token`
`set-cookie-domain`	Dominio de la cookie establecida	`set-cookie-domain:otro.com`
`set-cookie-value`	Valor de la cookie establecida	`set-cookie-value:1`
`mixed-content`	Contenido mixto	`mixed-content:all`

Los valores de is que más se usan son is:running, para las peticiones que siguen abiertas; is:from-cache, para las servidas sin tocar la red; y los relacionados con service workers, que distinguen entre las que el worker inició y las que interceptó.

Los de resource-type coinciden con las categorías de los botones de filtro: document, stylesheet, image, media, font, script, xhr, fetch, websocket, manifest, other.

💡

Tip

El autocompletado del campo de filtro ofrece las claves disponibles al empezar a escribir, y después ofrece los valores que existen en las peticiones actuales. Escribir domain: y ver la lista es la forma más rápida de saber cuántos orígenes distintos intervienen en la página.

La negación y las combinaciones

El guion delante niega cualquier condición, y también niega texto suelto.

-domain:analytics.ejemplo.com
-resource-type:image
-status-code:200
-.png

Las combinaciones son donde el lenguaje se vuelve útil de verdad. Estas responden a preguntas concretas.

Peticiones a mi API que no salieron bien.

domain:api.ejemplo.com -status-code:200 -status-code:304

Recursos pesados que no son imágenes ni vídeo.

larger-than:100k -resource-type:image -resource-type:media

Todo lo que viene de terceros.

-domain:*.miempresa.com

Peticiones de escritura, que son las que cambian estado.

-method:GET -method:HEAD -method:OPTIONS

Recursos de texto que no se sirvieron comprimidos.

-has-response-header:content-encoding -resource-type:image -resource-type:media -resource-type:font

Lo que sirvió el service worker.

is:service-worker-intercepted

Cookies que establece un dominio que no es el tuyo.

-set-cookie-domain:miempresa.com set-cookie-name:*

Peticiones que siguen colgadas.

is:running

Esta última merece un comentario: una petición que lleva mucho tiempo en ese estado es o bien un flujo de eventos legítimo, o bien una llamada que nunca va a resolver y que está manteniendo ocupada una conexión.

Expresiones regulares

Cuando la coincidencia por subcadena no basta, una expresión entre barras filtra por la URL completa.

/\/api\/v[12]\/(pedidos|clientes)/
/\.(woff2?|ttf|otf)(\?|$)/
/^https:\/\/(?!cdn\.)/

La regla práctica: usa palabras clave siempre que puedas, porque son más legibles y se combinan; usa expresiones regulares solo para patrones de URL que las palabras clave no expresan.

Filtrar el contenido, no la lista

Hay un segundo tipo de búsqueda que la gente confunde con el filtro y que hace algo distinto: la búsqueda global del panel de red, accesible con el icono de lupa o con la búsqueda del cajón inferior.

El filtro busca en los metadatos: URL, cabeceras, estado. La búsqueda global busca dentro de los cuerpos de las peticiones y de las respuestas.

Eso es lo que responde a preguntas como “en qué respuesta viene este identificador”, “qué petición está enviando este dato” o “de dónde sale este texto que aparece en pantalla”. Es de las funciones más útiles del panel y de las menos conocidas, y funciona sobre todo lo grabado.

⚡

Un filtro puesto es la razón número uno de que una petición parezca no existir

De todas las trampas de este panel, la que más tiempo consume tiene una explicación embarazosamente simple: el filtro que dejaste puesto hace veinte minutos. El escenario se repite en todos los equipos. Estás depurando algo, filtras por xhr para ver solo las llamadas a la API, resuelves el problema, sigues con otra cosa. Media hora después, un compañero pregunta por qué no se está cargando una imagen, miras el panel, y no hay ninguna imagen en la lista. La conclusión inmediata y equivocada es que la petición no se está haciendo, y a partir de ahí puedes gastar veinte minutos buscando por qué el código no la pide, cuando la pide perfectamente y tu filtro la está escondiendo. Lo mismo ocurre con el filtro de tipo de las pestañas superiores, que es independiente del campo de texto y todavía más fácil de olvidar porque su única señal es un botón resaltado entre diez. Y con la casilla de conservar el registro, que en su estado contrario borra todo al navegar y hace que un flujo de dos documentos parezca de uno. Hay una costumbre que elimina esta categoría entera de errores y cuesta dos segundos: antes de concluir que una petición no existe, pulsa el botón de limpiar filtros y mira el contador total de peticiones de la barra de resumen. Si el contador dice ochenta y en pantalla ves tres, tienes un filtro activo. Es exactamente el mismo movimiento que comprobar los niveles del filtro de la consola cuando un mensaje no aparece, y que comprobar los estados forzados cuando un elemento se comporta raro: la primera hipótesis ante una ausencia inexplicable no es que la cosa no ocurra, es que algo la está ocultando. En una herramienta con tantos estados persistentes como esta, esa hipótesis acierta muchísimo más de lo que su modestia sugiere.