¿Es posible filtrar algunas solicitudes usando las herramientas de desarrollador de Chrome, por ejemplo, filtrar todas las solicitudes de imágenes?
¿Es posible filtrar algunas solicitudes usando las herramientas de desarrollador de Chrome, por ejemplo, filtrar todas las solicitudes de imágenes?
Respuestas:
No hay una función de filtrado muy flexible, pero la barra en la parte inferior solo le permite mostrar solicitudes de un determinado documento o tipo de conexión:
No solo puede excluir imágenes, sino que debería ayudar.
También puede presionar Control/ Command+ Fpara buscar una cadena en particular en la lista de solicitudes y marcar la casilla "filtro" para ocultar las solicitudes que no coinciden:
Filtros de texto negativos : los resultados de la lista no coinciden con una consulta determinada.
Disponible desde Chrome ~ 42 - Issue Link , anunciado aquí
Otro enfoque: en el panel Red, abra el filtro y CTRL/CMDhaga clic en los tipos de solicitudes que desea mostrar. Para ocultar solo las solicitudes de imágenes, seleccione todos los demás tipos, excepto las imágenes mientras mantiene presionada CTRL/CMD.
-status-code:200 -status-code:404 -status-code:302
-.js
excluirá ambos .js
y las .json
solicitudes. Por alguna razón, la sintaxis de filtro negativo no parece estar cubierta en la documentación más reciente .
Escribe -.png -.gif -.jp
en el cuadro de entrada del filtro para excluir todas las imágenes de los resultados. En la parte inferior, muestra la cantidad total de datos transferidos sin imágenes.
Un "ingeniero de Google trabajando en Chrome" twitteó en diciembre del 14:
Chrome DevTools: los filtros de texto negativos acaban de aterrizar en el panel Red. Los resultados de la lista no coinciden con una consulta determinada Enlace de Twitter
editar : incluso puede filtrar por dominio, tipo mime, tamaño de archivo, ... o excluir ingresando -domain:cdn.sstatic.net
y combinando cualquiera de estos mime-type:image/png -larger-than:100K
para mostrar solo archivos png menores de 100 kb en el panel de red
ver DevTools: Estado de la Unión 2015 por Addy Osmani
Desde Chrome 42 .
domain:
parte es exactamente lo que estaba buscando en este momento. Eso y muchos otros están actualmente cubiertos en la documentación vinculada desde la otra respuesta
En mi versión de Google Chrome (Versión 74.0.3729.157 (64 bits)), he encontrado los siguientes filtros disponibles (he agregado algunos ejemplos). Tenga en cuenta que DevTools tiene una funcionalidad de Autocompletar (que ayuda mucho a resolver esto).
domain:
-domain:
# Use a * character to include multiple domains.
# Ex: *.com, domain:google.com, -domain:bing.com
has-response-header:
-has-response-header:
# Filter resources with the specified HTTP response header.
# Ex: has-response-header:Content-Type, has-response-header:age
is:
-is:
# is:running finds WebSocket resources
# I've also come across:
# - is:from-cache,
# - is:service-worker-initiated
# - is:service-worker-intercepted
larger-than:
-larger-than:
# Note: larger-than:1000 is equivalent to larger-than:1k
# Ex: larger-than:420, larger-than:4k, larger-than:100M
method:
-method:
# method:POST, -method:OPTIONS, method:PUT, method:GET
mime-type:
-mime-type:
# Ex: mime-type:application/manifest+json, mimetype:image/x-icon
mixed-content:
-mixed-content:
# 2 that I've found documented:
# mixed-content:all (Show all mixed-content resources)
# mixed-content:displayed (Show only those currently displayed) (never used this personally)
scheme:
-scheme:
# Ex: scheme:http, scheme:https,
# Note that there are also scheme:chrome-extension, scheme:data
set-cookie-domain:
-set-cookie-domain:
#
# Ex: set-cookie-domain:.google.com
set-cookie-name:
-set-cookie-name:
# Match Set-Cookie response headers with name
# Ex: set-cookie-name:WHATUP
set-cookie-value:
-set-cookie-value:
# Match Set-Cookie response headers with value
# Ex: set-cookie-value:AISJHD98ashfa93q2rj_94w-asd-yolololo
status-code:
-status-code:
# Match HTTP status code
# Ex: status-code:200, -status-code:302
Al igual que -MimeType, puede usar el dominio en la entrada del filtro, así:
dominio: tudominio.com
Si abre las herramientas de desarrollador, elija la red. En la barra en la parte inferior de la página, elija imágenes si desea buscar específicamente las solicitudes de imágenes. Todos los filtros son exclusivos, por lo que no puede filtrar solo las solicitudes de imágenes. Ahí tienes.