Disabling Chrome cache for website development

Question

I am modifying a site\'s appearance (CSS modifications) but can\'t see the result on Chrome because of annoying persistent cache. I tried Shift+refresh but it doe

Answer 1

Since version 50 (if I remember correctly), the "Disable cache" option was removed from the Devtool Settings. Go to the "Network" tab and there's the "Disable cache" option.

Answer 2

I use (in windows), ctrl + shift + delete and when the chrome dialog comes up, press enter key. This can be configured with what needs to be cleared each time you execute this sequence. No need to have dev. tools open in this case.

Answer 3

How can I disable the cache temporarily or refresh the page in some way that I could see the changes?

It's unclear which "cache" you're referring to. There are several different methods a browser can cache content persistently. Web Storage being one of them, Cache-Control being another.

Some browsers also have a Cache, used in conjunction with Service Workers, to create Progressive Web Apps (PWAs) providing offline support.

To clear the cache for a PWA

self.caches.keys().then(keys => { keys.forEach(key => console.log(key)) })

to list the names of the cache keys, then run:

self.caches.delete('my-site-cache')

to delete a cache key by name (i.e., my-site-cache). Then refresh the page.

If you see any worker-related errors in the console after refreshing, you may also need to unregister the registered workers:

navigator.serviceWorker.getRegistrations()
  .then(registrations => {
    registrations.forEach(registration => {
      registration.unregister()
    }) 
  })

Answer 4

There is a better and quicker way now (Chrome version 59.x.x.):

Right-click onto the reload-icon (left of the url-field) and you get a drop-down menu, select the third option: 'empty Cache and Hard reload'.

This option is only available when the developer tools are open. (Notice the difference to option 2: 'Hard reload' -cmd-shift-R). No cache emptying here!

Answer 5

Hey if your site is using PHP then place following little PHP snippet at the beginning of your html page :

   //dev versioning - stop caching
   $rand = rand(1, 99999999);

Now everywhere you load resources like CSS- or JS- files in a script or link element you append your generated random value to the request URL after appending '?' to the URI via PHP:

    echo $rand;

Thats it! There will be no browser that caches you site anymore - regardless which kind.

Of course remove your code before publishing or simply set $rand to an empty string to allow caching again.

Answer 6

In the Canary Channel (and maybe the dev and stable channel will follow along) this is to be found as the second option overall on the left hand-side under the "General" section.

In addition to that, there is always the option to switch into Incognito Mode via Ctrl + Shift + N. Even though that unfortunately also ends your session.