Chrome DevTools "disable cache": what does it actually do apart from nothing (for service worker scripts)?

Question

I'm trying to test the behaviour of my site on the assumption that the local disk cache is empty. I know that there are ways of clearing the cache and doing Ctrl-F5 etc each time, but there is also a "Disable Cache" checkbox in the Network tab that seems like it should do what I'm after... i.e. disable the cache.

But, when I clear the cache, enable that option, and F5-reload my site a couple of times, this is what I see:

The resource has been cached, and is being served from cache, despite "disable cache" being enabled! So what does this option actually do?

EDIT

Maybe this behaviour I'm seeing relates only to caching of service worker scripts? If you load this page (an example linked from this guide to service workers), at least for me the sw.js file is fetched from disk cache even with "disable cache" enabled.

Answer 1

Interesting question!

In the screenshot you've provided, the Name column is cut off, so I can't tell what resource is still being served from disk cache. I'll assume that it's a service worker script, based on the description in your "EDIT".

The question I'll answer, then, is "how does the browser cache service worker (SW) scripts?"

1. When a SW gets registered, the browser stores the SW script in a separate database in the disk cache. I'll just call this the SW database, but note this isn't an official term. Note that if the service worker calls importScripts(), those scripts are also stored in the SW database. Also note that when a service worker script gets updated, the browser overwrites the currently-stored script in the SW database with the new script. This is the Chrome implementation, other browsers may do it differently. ¹
2. Every time you load the page, the browser makes an invisible request (i.e. you can't see this in DevTools) to see if there are any updates to the service worker script. IMO, DevTools should expose this request, so that developers get a better idea of the SW lifecycle.
   • If one byte of the script is different, then the browser updates the SW script in the SW database.
   • If the SW script hasn't changed, the browser just serves the script from the SW database. This is the request that you're seeing in DevTools. IMO it's misleading that DevTools describes this request as (from disk cache). Ideally, it should have some other name to indicate that this cache isn't affected by the Disable Cache checkbox.

So, in this case, you're right: the Disable cache checkbox does nothing. If you want to ensure that your cache is completely cleared (including service worker stuff):

1. Go to the Clear Storage pane, make sure that all the checkboxes are enabled, and then click Clear Site Data.

2. While DevTools is still open, long-press Chrome's Reload button, and select Empty Cache and Hard Reload. See https://stackoverflow.com/a/14969509/1669860 for an explanation of these different options.

   

¹ I got this info from Alex Russell, Chrome engineer and co-author of the service worker spec

Answer 2

In addition to the disable cache option, on the network pane of the developer tools you can now right click and choose "Clear Cache" from the popup menu.

Also, you can use this plugin if you need to clear the cache frequently: https://chrome.google.com/webstore/detail/jpfbieopdmepaolggioebjmedmclkbap