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

JavascriptGoogle ChromeGoogle Chrome-DevtoolsFiltering

Javascript Problem Overview


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

Javascript Solutions


Solution 1 - Javascript

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

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

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 4 - Javascript

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

Solution 5 - Javascript

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

Solution 6 - Javascript

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

> domain:yourdomain.com

Solution 7 - Javascript

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.

Solution 8 - Javascript

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

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionAdam LeeView Question on Stackoverflow
Solution 1 - JavascriptMark DoyleView Answer on Stackoverflow
Solution 2 - JavascriptsillysluxView Answer on Stackoverflow
Solution 3 - JavascriptYenForYangView Answer on Stackoverflow
Solution 4 - JavascriptJeremyView Answer on Stackoverflow
Solution 5 - JavascriptNabi K.A.Z.View Answer on Stackoverflow
Solution 6 - JavascriptJules GoulleeView Answer on Stackoverflow
Solution 7 - JavascriptBeat RichartzView Answer on Stackoverflow
Solution 8 - JavascriptMatthewView Answer on Stackoverflow