Is there a way to filter network requests using the Google Chrome Developer Tools?

Question

Can I filter out some queries using the Chrome developer tools, say, filter out all image requests?

Answer 1

There is not a very flexible filtering function, but the panel at the bottom allows you to show only requests for a specific document or connection type:

You cannot just exclude images, but this should help.

You can also press Control / Command + F to search for a specific line in the query list and check the "filter" box to hide queries that do not match:

Answer 2

Negative text filters - a list of results that do not match the given query.

• Use -. png or -. gif or -. jpg as a filter on the network panel.
• Many other negative filters also work. for example -mime-type: image / png , -more than: 20k , -domain : yoursite.com , -status- code: 404 . See Chrome Developer Docs - Sorting and Filtering .

Available with Chrome ~ 42 - Link to the problem , announced here

Another approach. In the Network panel, open the filter and CTRL / CMD - select the types of requests you want to show. To hide only image requests, select all other types except images by holding CTRL / CMD .

Answer 3

You write -.png -.gif -.jp in the filter input field to exclude all images from the results. The total amount of data transferred without images is displayed below.

“A Google engineer working in Chrome” tweeted on December 14:

Chrome DevTools: Negative text filters just landed in the Network panel. List of results not matching Twitter Link

edit : you can even filter by domain, mime-type, filesize, ... or exclude by typing -domain:cdn.sstatic.net and combine any of these mime-type:image/png -larger-than:100K to display only png files smaller than 100kb in a network pane

see DevTools: State of the Union 2015 Addie Osmani

Since Chrome 42 .

Answer 4

Like -MimeType you can use the domain in input filters, for example:

domain: yourdomain.com

Answer 5

If you open developer tools, select a network. In the panel at the bottom of the page, select images if you want to look at image requests. Filters are exclusive, so you cannot filter only image requests. There you go.

Answer 6

Adding the filter -MimeType:image/jpeg worked for me.

Answer 7

In my Google Chrome build (version 74.0.3729.157 (64-bit)), I found the following filters available (I added a few examples). Please note that DevTools has an autocomplete function (which helps a lot in sorting).

 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