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

Is it possible to filter out some requests using Chrome developer tools, say, filter out all image requests?

Solution 1:

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.

Solution 2:

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.

Solution 3:

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:

Solution 4:

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

Solution 5:

Update 2021:

In new update chrome, you can choose some content type JS, CSS, IMG, Font,... for filter request easily; See:
(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.