Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is there a way to filter network requests using Google Chrome developer tools?

People also ask

How do I block a Network request on Chrome?

Right-click on the request in the Network panel and select Block Request URL. A new Request blocking tab pops up in the Drawer, which lets you manage blocked requests.

How do I find Network requests?

To access this feature in Chrome, simply open the developer tools (command-option-I or command-option-J on a Mac) and select the Network option from the drop-down menu at the top. One last important thing to note: Chrome will only show Network requests that happen while the Network panel is open.


Negative text filters - list results not matching a given query.

  • Use -.png or -.gif or -.jpg as filter in the network panel.
  • Many other negative filters work too. e.g. -mime-type:image/png, -larger-than:20k, -domain:yoursite.com, -status-code:404. See Chrome developer docs - Sorting and filtering.

Available since Chrome ~42 - Issue Link, announced here

Another approach: In the Network panel open the filter and CTRL/CMD-click the types of requests you want to show. To hide just image requests then select all the other types except images while holding CTRL/CMD.


You write -.png -.gif -.jp in the filter input box to exclude all images from the results. At the bottom it shows the total amount of data transferred without images.

An "Engineer at Google working on Chrome" twittered in Dec'14:

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

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

see DevTools: State Of The Union 2015 by Addy Osmani

Since Chrome 42.


There isn't a very flexible filtering feature, but the bar at the bottom does allow you to only show requests of a certain document or connection type:

You can't just exclude images, but it should help.

You can also press Control/Command+F to search for a particular string in the request list, and check the "filter" box to hide requests that don't match:

enter image description here


Under my build of Google Chrome (Version 74.0.3729.157 (64-bit)), I've found the following filters available (I've added some examples). Note that DevTools has an AutoComplete functionality (which helps a lot in sorting this stuff out).

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

Update 2021:

In new update chrome, you can choose some content type JS, CSS, IMG, Font,... for filter request easily; See:
enter image description here (now I'm on version 93.0.4577.63)

Older solution:

A simple and short and quickly solution:

Just put -.

For don't show any url with extension (static contents), so you have URLs clearly in here.

regex filter


Like -MimeType you can use domain in filter input, like this:

domain:yourdomain.com


enter image description here

If you open the developer tools, choose network. From the bar at the bottom of the page, choose images if you want to look specifically for image requests. The filters are all exclusive, so you can not filter out just image requests. There you go.