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

Question

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

Voting to reopen; this shouldn't be considered off topic. Chrome/WebKit developer tools clearly *are* "software tools commonly used by programmers" (as permitted in the [faq]); I've often made use of the filtering options while developing. — Jeremy, Feb 01 '13 at 14:57
Yes there is - see the [documentation on Network panel sorting and filtering](https://developer.chrome.com/devtools/docs/network#sorting-and-filtering). Unfortunately there's [no way to filter out / exclude requests](https://code.google.com/p/chromium/issues/detail?id=444960). — Dan Dascalescu, Dec 24 '14 at 00:29
Please select correct answer, the marked answer has long been outdated. — Suraj Jain, May 29 '19 at 16:33

Mark Doyle · Answer 1 · 2022-09-11T21:37:49.880

295

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.

edited Sep 11 '22 at 21:37

answered Jan 04 '15 at 20:40

Mark Doyle

4,804
3
20
23

3

Use CMD+click on OS X. – undefined Aug 28 '15 at 19:08
Is there a way I can apply these negative text filters whenever I open the debugger without having to always type them? – jobin May 09 '16 at 11:14
@i08in you would need a browser extension for that, and I suspect there isn't one – Rhumborl May 24 '16 at 08:49
9

You can also [filter by http status code and other features as well](https://developer.chrome.com/devtools/docs/network#advanced-filtering), like: domain, has-response-header, is, larger-than, method, mime-type, scheme, set-cookie-name, set-cookie-value, set-cookie-domain, status-code, and you can filter by multiple at a time, for example to see all requests that aren't a 200, 404 or 302, use: `-status-code:200 -status-code:404 -status-code:302` – Brad Parks May 27 '16 at 13:40
3

Using Chrome version "51.0.2704.79 (64-bit)" on Linux. Looks like the negative filtering has been removed? Anyone else seeing that? – Wilson F Jun 14 '16 at 23:35
@WilsonF, Found this answer because it seems to be not working any longer – Phil Jun 21 '16 at 20:41
1

@Phil: Oops, I should have come back and said: it was broken in a recent build, but is expected to return in version 52. See https://groups.google.com/forum/#!msg/google-chrome-developer-tools/cdJCK5tVqW8/UOfYOgqKAQAJ – Wilson F Jun 21 '16 at 20:55
Is there any way to filter out the requests that doesn't have an extension like `http://example.com/tada`? – Gowtham Jul 22 '16 at 06:01
4

Still seems to be broken as of Chrome 52, cannot get this feature to work sadly. – JKillian Aug 22 '16 at 20:53
2

Note that the "Regex" checkbox next to the filter input must be unchecked for this to work. Also note that `-.js` will exclude both `.js` and `.json` requests. For some reason the negative filter syntax does not seem to be covered in [the most recent documentation](https://developers.google.com/web/tools/chrome-devtools/network-performance/reference#filter). – James May 09 '17 at 17:27
1

Is there a way to persist these filters across sessions? I find that as soon as I close a tab, all of these filters are lost. – cheshireoctopus Sep 05 '17 at 15:10
1

As of today, the proper link for the reference documentation for filters is https://developer.chrome.com/docs/devtools/network/reference/#filter – telotortium Sep 08 '22 at 16:24

sillyslux · Answer 2 · 2015-03-18T10:03:16.253

37

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.

edited Mar 18 '15 at 10:03

answered Mar 08 '15 at 13:19

sillyslux

641
6
8

2

Thanks, the `domain:` part is exactly what I was looking for right now. That and a bunch of others are currently covered in the [documentation](https://developers.google.com/web/tools/chrome-devtools/profile/network-performance/resource-loading#filter-requests) linked from the other answer – JMM May 26 '16 at 15:27

score 24 · Answer 3 · answered May 27 '19 at 00:09

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

score 21 · Accepted Answer · answered Jan 31 '13 at 23:49

21

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

answered Jan 31 '13 at 23:49

Jeremy

1
85
340
366

10

this answer is outdated. See the next one (http://stackoverflow.com/a/27770139/610585) – undefined Aug 28 '15 at 19:09

Nabi K.A.Z. · Answer 5 · 2021-09-13T12:33:56.323

11

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.

edited Sep 13 '21 at 12:33

answered Mar 16 '20 at 09:59

Nabi K.A.Z.

9,887
6
59
81

score 8 · Answer 6 · answered Aug 22 '17 at 18:55

8

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

domain:yourdomain.com

answered Aug 22 '17 at 18:55

Jules Goullee

571
4
11

score 1 · Answer 7 · answered Jan 31 '13 at 23:49

1

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.

answered Jan 31 '13 at 23:49

Beat Richartz

9,474
1
33
50

score 1 · Answer 8 · answered Oct 06 '15 at 19:01

1

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

answered Oct 06 '15 at 19:01

Matthew

6,356
9
47
59

Omer · Answer 9 · 2022-08-10T10:01:57.967

0

You can filter according to types. For only Fetch/XHR (XMLHttpRequest), open developer tools and just select Fetch/XHR and accordingly other types.

edited Aug 10 '22 at 10:01

answered Aug 10 '22 at 09:06

Omer

8,194
13
74
92

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

9 Answers9

Update 2021:

Older solution:

Linked