Disabling Chrome cache for website development

google-chrome caching browser google-chrome-devtools browser-cache
tomermes picture tomermes · Apr 17, 2011 · Viewed 741.9k times · Source

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

Steve picture Steve · Aug 9, 2011

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.

screenshot of development tools panel

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

long press

Related questions

How to force Chrome browser to reload .css file while debugging in Visual Studio?

I'm currently editing a .css file inside of Visual Studio 2012 (in debug mode). I'm using Chrome as my browser. When I make changes to my application's .css file inside of Visual Studio and save, refreshing the page will not load …

Read More
Stop Chrome Caching My JS Files

I will make a change to my JS files but it won't really change in the browser, I have to rename the files every time so that it reloads it. Is there some sort of .htaccess command I can add …

Read More
Chrome memory cache vs disk cache

I am interested in chrome memory cache vs disk cache? I use webpack, common chunks plugin and generate all my files with chunkhash. How does memory differ from disk cache. When I reload my page some files are loaded from …

Read More