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

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.


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

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 - 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.