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...
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?
33 Answers
The Chrome DevTools can disable the cache.
- Right-click and choose
Inspect Elementto open the DevTools. Or use one of the following keyboard shortcuts:
- F12
- Control+Shift+i
- Command+Shift+i
- Click
Networkin the toolbar to open the network pane. - Check the
Disable cachecheckbox 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 to know which option to choose. The following shortcuts are available:
- Command+Option+R on Mac
- Control+Shift+R on Windows or Linux
Clearing the cache is too annoying when you need to clear the cache 30 times an hour.. so I installed a Chrome Extension called Classic Cache Killer that clears the cache on every page load.
Chrome Store Link (free) (Now without malware!)
Now my mock json, javascript, css, html and data refreshes every time on every page load.
I never have to worry if I need to clear my cache.
There are about 20 cache cleaners for Chrome I found, but this one seemed lightweight and zero effort. In an update, Cache Killer can now stay "always on".
Note: I do not know the plugin author in any way. I just found it useful.
Pull up the Chrome developer console by pressing F12 and then (with the console open):
Right click (or hold left click) on the reload button at the top of the browser and select "Empty Cache and Hard Reload."
This will go beyond "Hard Reload" to empty the cache entirely, ensuring that anything downloaded via javascript or etc. will also avoid using the cache. You don't have to mess with settings or anything, it's a quick 1-shot solution.
There are two more options to disable page caching in Chrome for good:
1. Deactivate Chrome Cache in the Registry
Open Registry (Start -> Command -> Regedit)
Search for: HKEY_CLASSES_ROOT\ChromeHTML\shell\open\command
Change the part after ...chrom.exe" to this value: –disable-application-cache –media-cache-size=1 –disk-cache-size=1 — "%1"
Example: "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" -disable-application-cache –media-cache-size=1 –disk-cache-size=1 — "%1"
IMPORTANT:
there is a space and a hyphen after ...chrome.exe"
leave the path to chrome.exe as it is
If you copy the line, be sure to check, if the quotes are actual quotes.
2. Deactivate Chrome cache by changing the shortcut properties
Right-click on the Chrome icon and select "Properties" in the context menu.
Add following value to the path: –disk-cache-size=1
Example:
"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" –disk-cache-size=1
IMPORTANT:
there is a space and a hyphen after ...chrome.exe"
leave the path to chrome.exe as it is
If you do not wish to edit Chrome's settings you may use incognito mode for the same results.
- F12 to open Chrome DevTools
- F1 to open DevTools Settings
- 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.
In addition to the disable cache option (which you get to via a button in the lower right corner of the developer tools window -- Tools | Developer Tools, or Ctrl + Shift + I), on the network pane of the developer tools you can now right click and choose "Clear Cache" from the popup menu.
Instead of hitting "F5" Just hit:
"Ctrl + F5"
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.
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.
From the browser window's wrench icon menu (prefs menu) choose Tools → Developer Tools
In the developer tools UI that appears, click the gear icon at bottom right.
Check the 'Disable cache' checkbox in the Network section.
Using Ctrl+Shift+R to refresh was nice but didn't get everything I needed. still some things wouldn't refresh, such as data stored in js and css. found a solution: a toolbar of google for chrome web developers. After you install the toolbar select options and "reset page".
Disable cache in chrome only works when you have dev tools open
Until the bug is fixed you could use Clear Cache Chrome plugin and you can also set a keyboard shortcut for it.
After installing it, right click and go to options:
Check Automatically reload active tab after clearing data:
Select Everything for Time Period:
And then you can go to Menu => Tools => Extensions:
Click on keyboard shortcuts at the bottom:
And set your keyboard shortcut, for example Ctrl + Shift +R:
Actually if you don't mind using the bandwidth it is more secure for multiple reasons to disable caching and advised by many security sites.
Chromium shouldn't be arrogant enough to make decisions and enforce settings on users.
You can disable the cache on UNIX with --disk-cache-dir=/dev/null.
As this is unexpected crashes may happen but if they do then that will clearly point to a more severe bug which should be fixed in any case.
This might help someone.
I have rigged my Nginx for crazy caching. Thus, disabling cache in network tools and explicitly clearing cache don't work.
A very simple yet boring workaround is, I just open a new Incognito Tab. Surprisingly it works, all the time!
A hard refresh in incognito mode does the trick anytime I wish to reload in the same mode.
How about a bookmarklet which changes the page name to prevent the page from cacheing. In Chrome you would create a new bookmark and then paste the code into the URL. Click the bookmark and the page will reload with timestamp to thwart the cache.
javascript:(function(){var idx = location.href.indexOf('?');var d = new Date();var str = location.href.substr(0,idx) + '?version=' + d.getTime();location.href=str; void 0;})();
I just got caught out but not necessarily due to Chrome.
I am using jQuery to make AJAX requests. I had the cache attribute set to true in the request:
$.ajax({
type: 'GET',
cache: true,
....
Setting this to false fixed my problem but this is not ideal.
I have no idea where this data is saved but I do know that chrome never hit the server for a request.
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.
Must Read
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.