caching - Disabling Chrome cache for website development

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 doesn't work.

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

Answer

The Chrome DevTools can disable the cache.

1. Right-click and choose Inspect Element to open the DevTools. Or use one of the following keyboard shortcuts:
   
   
   
   
   • F12
   
   
   
   • Command+Option+i on Mac
   
   
   • Control+Shift+i on Windows or Linux
   
   


2. Click Network in the toolbar to open the network pane.


3. Check the Disable cache checkbox at the top.

Keep in mind, as a tweet from @ChromiumDev stated, this setting is only active while the devtools are open.

Note that this will result in all resources being reloaded. Should you desire to disable the cache only for some resources, you can modify the HTTP header that your server sends alongside your files.

If you do not want to use the Disable cache checkbox, a long press on the refresh button with the DevTools open will show a menu with the options to Hard Reload or Empty Cache and Hard Reload which should have a similar effect. Read about the difference between the options. The following shortcuts are available:

• Command+Option+R on Mac


• Control+Shift+R on Windows or Linux