How to filter cached requests in chrome devtools?

Question

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.

Answer 1

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.

Answer 2

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.

Answer 3

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.