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

One more option for disabling the cache is provided by my 3rd Chrome extension Page Size Inspector that disables the cache exactly the same way as Devtools does.

In addition, the extension quickly reports page size, cache usage, network requests and load time of a web page in a convenient way. Plus its open source at Github.

Answer 2

To be clear, the disable cache checkbox in Chrome (v17 here, but since v15 I believe) is not in the main settings UI. It is in the developer tools settings UI.

1. From the browser window's wrench icon menu (prefs menu) choose Tools → Developer Tools

2. In the developer tools UI that appears, click the gear icon at bottom right.

3. Check the 'Disable cache' checkbox in the Network section.

Answer 3

Disable cache in chrome only works when you have dev tools open

Answer 4

When this question was asked, Chrome didn't support the Disable Cache feature. But now, you can find the "Disable Cache" feature in Network Tab in Chrome Dev Tools.

Network Tab with Cache Disabled

You can see that all the resources (I have filtered JS resources) have been fetched from network and not loaded from disk/memory cache.

Disable Cache not selected

You can see that when I refreshed the page but didn't select the "Disable Cache" feature, almost all the resources were loaded from Cache.

This works fine for local web development but there are certain limitations that I'd like to highlight. You can stop reading here if the solution discussed so far meets your use case.

Limitations

1. You have to keep the DevTools Open and Disable Cache Selected
2. When you disable the cache, it is disabled for all the resources in that tab. It makes things slow and is inefficient if you want to disable cache for only 1-2 resources

Using Requestly Chrome Extension to disable Cache for particular resources (JS/CSS/Images, etc)

Recently, I stumbled upon https://medium.com/weekly-webtips/how-to-disable-caching-of-particular-js-css-file-84a93d005172 which helped me understand how you can disable cache for specific resources.

The trick here is to add a query parameter to your resource with random value every time the request is made. Using Requestly Query Param Rule, you can add a param like this

URL Contains mywebsite.com/myresource.js
Add param cb rq_rand(4)

rq_rand(4) is replaced by 4 digits random number when a request is made.

Requestly Query Parameter Rule to add random parameter

After adding the rule, JS/CSS files are not cached

Here you can see that "Disable Cache" is not selected and still the resources are not loaded from Cache because of a random parameter (cb - Read it as Cache buster) in the URL.

1. The good thing is you don't need to keep your dev tools open for having this behavior
2. You can keep this permanently ON and your browsing experience won't be affected too.

How to get the Rule

Here is the link using which you can browse & download the rule if you have Requestly installed - https://app.requestly.io/rules/#sharedList/1600501411585-disable-cache-stackoverflow

Disclaimer: I built Requestly but I think this could be helpful to a lot of web developers and hence sharing here.

Answer 5

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

Answer 6

1. F12 to open Chrome DevTools
2. F1 to open DevTools Settings
3. Check Disable cache (while DevTools is open) as shown below:

This is currently on the Preferences tab which is the default. You may need to scroll down. This checkbox has been moved at least a couple times since this question was asked. Last I checked, it was in the middle column at the bottom. If you have it open on a thinner screen and there are 2 columns under Preferences, it may be near the top right. Feel free to update this post if it changes or comment and I'll update the post.