27

Background

Chrome devtools "Network" tab has the option to filter requests based on string-match of the URL and some predefined content type filters (CSS/JS/...). If you set a filter, the bottom bar of the network tab, contains extra information related only to the matching filter.

Question

Is it possible to filter requests if they were served (or not) by browser cache?

Usecase

If someone has an alternate approach to do this:

I would like to measure the "real" request-count/transferred-size of my HTML-UI. The bottom of the network tab already contains the transferred-size properly, however the request-count contains the cached requests also.

I could use wireshark/tcpdump however, the HTML-UI could request resources from other domains, maybe I could write a complicated filter, however this seems a normal use-case.

3 Answers 3

20

You can use a filter of larger-than:1 to hide all requests that returned less than 1 byte. When I tested this, requests served from the cache have (from cache) in the size column and are excluded by this filter. Negating it showed only cache cached requests.

Granted, this will also exclude/include 0B responses from the server. If that's a concern, you might be able to add mimetype or status code filters to achieve your aims, depending on the exact responses.

3
  • How do I show only those requests which were cached ?
    – MasterJoe
    Dec 28, 2017 at 0:25
  • 1
    @testerjoe2 I thought that was a silly question until I went to confirm it. It took me an inordinate amount of time to verify that you'd use -larger-than:1 (note the minus sign) Jan 2, 2018 at 21:59
  • 1
    But that will also include all 0b responses unless you have some other way to filter them out Jan 2, 2018 at 22:00
16

You can filter requests served from either the browser disk or memory caches using the is:from-cache query. This can be negated using the query -is:from-cache.

2
  • 3
    Thanks for sharing this obviously very well hidden secret in Chrome.
    – Tino
    Jan 10, 2021 at 19:30
  • Thanks for posting the query, it really helped.
    – marcel_pi
    Jun 30, 2022 at 13:33
0

For one of your filters use -status-code:304. This will hide things loaded from cache. Then the request count and transferred amount will show the number of filtered out of the total for the page. If you say want to check only the cached items, then remove the negation from the filter.

Filtering by status code

6
  • 3
    browser cache is something different. 304 is a legit request/response to the server, that the etag is the same as you've had it before. the browser-cached requests appear as status-code:200
    – p1100i
    Dec 7, 2015 at 14:14
  • Then you can't currently filter it out specifically. Why exactly do you need to filter that out? I don't see in any case where it is useful.
    – Garbee
    Dec 7, 2015 at 16:55
  • 5
    I want to see actual requests made across the wire by the browser. I can think of a lot of cases wherein that would matter.
    – AndrewF
    May 2, 2016 at 19:10
  • If you can think of "a lot of cases" then please provide examples so they can be looked into. If you really need "actual requests as they are made on the wire" then look into Wireshark or another packet inspection tool.
    – Garbee
    May 3, 2016 at 12:46
  • 6
    Someone else's server - can't download extra tools. Debugging web app behavior - limiting requests to those actually being handled by the server. Debugging unexpected throughput testing results - comparing requests sent from a real browser to those sent by a load tester that doesn't cache. Two of those are very large categories that encompass an enormous variety of real-world tasks. Jun 14, 2016 at 22:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.