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?

134 upvote
  flag
This is probably the single worst Chrome bug. I've wasted far too much time wondering why things were coming out wrong, only to find that--despite having forced a complete reload with ^F5--it's using an hour-old stale resource. – Glenn Maynard
36 upvote
  flag
Browsers are supposed to cache. Remember, your users will also be caching - and so may not see changes that you make after your site is in production. The way to avoid this is to version your files. my_css.css?version=something_unique. If the browser hasn't seen the version before then it downloads the file again. something_unique could, for example, be last modifed date. – user984003
24 upvote
  flag
@user984003 Ctrl+Shift+R or Shift+R should flush the cache... – Adonis K. Kakoulidis
upvote
  flag
@user984003 Hi, can you elaborate a bit how to achieve that? Is it js or PHP? :) I'm very new in web development. – Boyang
11 upvote
  flag
@user984003 Not if I tell them to not cache. Yes, a cache-busting version number is great for final release as that's what users are using, but when I'm building a new site and I want to see incremental changes as I go, I'm not changing the version number each time. Hence why I develop with Firefox - it has the most reliable cache-disabling options! – andrewb
upvote
  flag
If I'm doing some heavy web testing/changes I usually just launch from the terminal (ubuntu): google-chrome --incognito You can throw other useful flags in there like --kiosk for fullscreen testing if that's a requirement. – Chris Trudeau
upvote
  flag
@user984003 yes, browsers are supposed to cache... when browsing. When developing, you need more control over that. – ahnbizcad
upvote
  flag
Browsers are not supposed to cache when you reload the page. That's why you reload the page. No other browser ignores that user request. – Mars
upvote
  flag
At least it wasn't just me who wasted hours trying to debug obsolete code due to cached content... – andreszs

28 Answers 11

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".

2 upvote
  flag
+1. Still not perfect though: For developing on a local computer the cache is completely unneccessary and will introduce problems, so I would still be interested in a disable-feature like firebug has. – c089
upvote
  flag
up vote 1699 down vote accepted

The Chrome DevTools can disable the cache.

  1. F12 or Right-click and Inspect Element to open the DevTools.
  2. Now click Network in the toolbar to open the network pane.
  3. Finally, check the Disable cache checkbox at the top.

screenshot of development tools panel

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

210 upvote
  flag
From my experience, this setting (and all settings on that panel) only takes effect when the dev tools are open. – Johann
upvote
  flag
@Johann I don't think that is true. If I cache a method in a website i'm working on I always get a 200 vs a 304. – Steve
upvote
  flag
I cannot find this on Chrome 19.0.1084.46 on Mac. I don't see a "General" section in the command-option-i inspector. Just Elements, Resources, Network, Scripts, Timeline, Profiles, Audits, Console, and Search. ?? – supertrue
upvote
  flag
@supertrue is under network on the mac still? – Steve
1 upvote
  flag
@Steve Try it with the user agent. Select the "override user agent" setting, then visit whatsmyuseragent.com both with the dev tools open and closed. Evidence two is two is to run a website locally with caching on for a while, then stop the server. With dev tools closed (even after checking "disable cache") your pages will still load, until the moment you open the dev tools. Unfortunately I can't find this documented anywhere, which simply adds to the frustration. – Johann
upvote
  flag
this will only disable cache for the current website, right? – prongs
19 upvote
  flag
@Steve This doesn't work for me. I'm not getting any changes, even though I have Chrome 19.0.1084.52, and I checked the box to disable caching. I tried with the dev panel open. I tried with it closed. I even tried restarting my browser, then restarting my computer. It still seems to continue to give me a cached version of the page. What should I do? Chrome has given me problems like this before, so I deleted everything relating to google off my computer, then installed chrome back. It fixed most things such as the "forever loading history tab". I guess it still doesn't work. – Tgwizman
1 upvote
  flag
@Tgwizman you know it's working if you are getting 200 requests and not 304. I would suggest you make sure you are not doing something silly in your development like hitting F5 on a page you are not editing or have a copy of somewhere else. ;) – Steve
upvote
  flag
@Steve Thanks for the help, but actually, it wasn't me that was at fault. I updated to 20.whatever and now it works fine! In fact, all of my issues with Chrome went away!!! ^-^ I suggest everyone else does the same. Keep yo shiz up to date! – Tgwizman
5 upvote
  flag
Command-Shift-R for mac =| – holms
19 upvote
  flag
This is so the key... "only while devtools is visible." – Justin Ohms
8 upvote
  flag
I found that this didn't work when refreshing the current page after changing the setting. Only when I navigated away and then back again did it start to work. – Matt Gibson
1 upvote
  flag
Could this be an issue in Chrome 32 / OSX Maverick? ON my Mac there is no cache flushed at all. I have to close and reopen Chrome... – headkit
upvote
  flag
@headkit I had the same issues with Chrome 32 & Mavericks. Are you using MAMP? If so, [OPCache] needs to be disabled per the answer here: //allinonescript.com/a/19472156/1114876 – adamup
upvote
  flag
@adamup thanx! but no, I use a Vagrant/VirtualBox development setup that works fine with Mountain Lion. – headkit
1 upvote
  flag
It doesn't work for me either. I'm on Windows 7, Chrome 32. I've tried with (un)docked panels, but no luck?! The page I'm testing uses iframes, so maybe this is causing the problem? I'm pretty sure i'm refreshing the same page, which is edited. My current workaround is 'hard reload', but it moves me to home page and i have to navigate again :( – jszoja
2 upvote
  flag
This was working for me at some point, but is no longer working. I can't get the page to refresh properly unless I clear the cache manually while navigated away from the page, or if i open the page in a new incognito window. I am using chrome on mac. Does anyone know if there's a fix or if it is broken or something? Thanks! – Bassel
1 upvote
  flag
Even with "Disable cache" checked, I see some contents are (from cache): evernote.com/shard/s310/sh/0f651721-829d-4bb3-bffb-8ceb3ef6b‌​020/… – Aidin
2 upvote
  flag
Does not work with local files. – vbence
3 upvote
  flag
...or you could just debug in incognito mode! (which doesn't cache any files) – Kwame
3 upvote
  flag
that setting is the biggest lie in the history of web development. restarted my computer and chrome is still showing wrong results while firefox is displaying up to date css :( – Claudiu Creanga
upvote
  flag
Why don't programmers use positive logic? "Enable cache" – Pete Alvin
upvote
  flag
Brilliant. Just what I needed. Thanks a ton. – Sushant Gupta
upvote
  flag
Here is a video where I demonstrate the before and after in case anyone is interested. youtube.com/watch?v=zm1LhqR_PUY – RoccoB
upvote
  flag
I get this problem all the time, with dev tools open and disable cache option checked. I am sure that it doesn't work with local files as @vbence suggested or is a lie. I recommended using other ways to clear the cache. – TheCrazyProgrammer

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.

upvote
  flag
@Andrea Nice! I didn't even know that keyboard formatting option existed! – Tim Keating

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.

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.

Disable Cache in Chrome Canary Channel

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.

3 upvote
  flag
In my experience this only works while dev tools are opened. I was puzzled why the cache was still holding onto pages until I realized I had closed the dev tools. It is odd the setting doesn't override everything. – mbokil
upvote
  flag
Incognito mode does cache some images and files unfortunately. – GobSmack

enter image description here

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.

13 upvote
  flag
Cache Killer is awesome. +1 – nbrogi
7 upvote
  flag
This is THE BEST answer. Because many of us don't have the ability to have the dev tools on. I use PHPStorm, which has live update only if the dev tools are off. So I only use it when I'm debugging... – Friend of Kim
6 upvote
  flag
I agree best answer. I use this extension daily for web development. It is nice to be able to turn the cache completely off while developing and then turn it on for testing. Highly recommenced it. – mbokil
4 upvote
  flag
Yep, the Chrome Dev Tools option doesn't seem to work for me. But cache killer works like a charm. The reload time is significantly slower, like 4-5x, but the actual serving up of the new content is obviously much quicker. – Bryce Johnson
2 upvote
  flag
Clear Cache and Disable Cache are working only when working on localhost, on my mac. For online content I m refreshing and refreshing hoping to see any changes. This extension is a lifesaver. – Sbpro
2 upvote
  flag
I have found that using Disable Cache causes issues with local storage, specifically angular-storage with Auth0. Cache Killer works perfectly and does not cause issues with local storage. – trevorc
upvote
  flag
Didn't work well for me on Chrome. This caused side effects such as loading images twice I found and it was hard to locate the problem to this extension. – Martin Dawson
upvote
  flag
This incredible extension! It was a pain to work with angular js ngRoute. +1 – Programador Adagal
upvote
  flag
+1. Cache Killer has made my life better more than most things. However, on OSX (mac) it does not refresh the favicon appearing in the tab, unless CMD-R is use. I wonder why. – DanAllen
upvote
  flag
!!! THANK YOU !!! (why didn't I think of this?) – dwn
1 upvote
  flag
The best answer. – dave4jr
1 upvote
  flag
I think the plugin is removed from web store. How can I manually install it and any ideas why it was removed? – Hasan Gürsoy
2 upvote
  flag
Since the chrome store URL for CacheKiller is down, use this URL to download the CRX file, then drag the file into your chrome extension window to install it: crx4chrome.com/extensions/jpfbieopdmepaolggioebjmedmclkbap – BernieSF
1 upvote
  flag
Still the best answer in 2017! +1 – norcal johnny
4 upvote
  flag
Removed from Chrome Extensions Store because of malware :( Alternatives? – Semyon Vyskubov
2 upvote
  flag
The wonders of leddit reddit.com/r/webdev/comments/6d4tms/… just no clue about license etc so dunno if this sticks. – Jenne van der Meer
upvote
  flag
@JennevanderMeer - you are the hero we needed! – Evildonald
1 upvote
  flag
Ended up writing my own, works the same but can toggle per tab. MIT License and no malware, I promise 😎! github.com/themichaelyang/cache-clearer – Michael Yang

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

1 upvote
  flag
yup, you are right. Any idea why so? – Mr_Green
upvote
  flag
maybe it is a bug or maybe it is only intended for developers - that said I would have thought non-developers would like to use the disable cache option too ¯\_(ツ)_/¯ – jamiethepiper

There is a chrome extension available in the chrome web store named Clear Cache.

I use it every day and its a very useful tool I think. You can use it as a reload button and can clear the cache and if you like also cookies, locale storage, form data etc. Also you can define on which domain this happens. So can clear all this shit with only the reload button which you anyway have to press - on your chosen domains.

Very very nice!

You also can define a Keyboard Shortcut for this in the options!

Also another way is to start your chrome window in incognito-mode. Here the cache also should be completely disabled.

upvote
  flag
Can't find the option to define on which domain it does it. Doesn't look very good. How about chrome.google.com/webstore/detail/cache-killer/… ..? – nbrogi
upvote
  flag
go to clearcache icon in the browser, rightclick, options and then under cookies. There is a little settings icon. – chris

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.

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

1 upvote
  flag
use code tags to make your answer more readable. I think this may be one of the best answers. – ThorSummoner
2 upvote
  flag
Good answer. Though for most people disabling the cache is just a temporary thing during development. Disabling it permanently will slow down a normal browsing experience significantly and is kind of bad internet citizenship as it puts unnecessary load on the web servers your visiting. – danielson317

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:

http://j.mp/15ZdA6f

Check Automatically reload active tab after clearing data:

http://j.mp/15ZdGLh

Select Everything for Time Period:

http://j.mp/15ZdPy7

And then you can go to Menu => Tools => Extensions:

http://j.mp/15ZehfX

Click on keyboard shortcuts at the bottom:

http://j.mp/15Zepft

And set your keyboard shortcut, for example Ctrl + Shift +R:

http://j.mp/15Zev6M

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.

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.

Picture of reload menu

  1. Pull up the Chrome developer console by pressing F12 and then (with the console open):

  2. 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.

upvote
  flag
this only works on chrome for windows AFAIK – MJB
3 upvote
  flag
@DatProgram No, it also works for me on Linux. – slhck
6 upvote
  flag
well it definitely doesn't work on mac though, I've clicked that reload button with various key-combinations ;) – MJB
1 upvote
  flag
what is Hard reload? – ManirajSS
upvote
  flag
@ManirajSS: It will reload everything and avoid using the cache, but it will not re-download things downloaded by javascript after page load. I'm not sure why anyone would ever use it, but I guess you could come up with a few corner cases where it would be useful. – JackArbiter
2 upvote
  flag
Nor will it clear cache for iframes inside of the page. – Pablo Mescher
7 upvote
  flag
Not sure how long this has been true, but as of Chrome 41, click and hold on the reload button works on OS X, provided you have the developer tools window open. – Tim Keating
1 upvote
  flag
FTR it works also in Chromium for Linux. – kelunik
1 upvote
  flag
Worked for me on macOS Sierra – michaelsnowden
1 upvote
  flag
How did I not know about this shortcut? To date I've had to use extensions etc. – samdd
1 upvote
  flag
Awesome! Works for me on OSX – trianta2

If you do not wish to edit Chrome's settings you may use incognito mode for the same results.

upvote
  flag
I can't figure why I didn't think to this solution earlier... Great point ! – Flo-Schield-Bobby

I have used the other options described above but I find that the best is to add the following parameter to the startup of chrome.exe.

"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --disk-cache-size=1 -media-cache=1

I find not disabling media cache is a good idea but it is here for completeness sake.

In actuality I want an option to completely disable the cache, to use the memory for IO instead of my disk (which would make load time 10x faster too!) but I don't think chrome or any browser for that matter has that option yet.

  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.

enter image description here

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.

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.

Screenshot - Page Size Inspector

Instead of hitting "F5" Just hit:

"Ctrl + F5"

5 upvote
  flag
It also works in Firefox (not because it's relevant for this question, but somebody might find it useful) – Donald Duck

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.

Not sure what you are using, but if you are using ASP.Net you can do the following which works like a charm:

<link href="@Url.Content("~/Content/Site.css")?time=@DateTime.Now" rel="stylesheet" />

Basically it will automatically append the Date and Time to the end of the file each time it is ran, meaning since the file name is technically different, you will never have to worry about it getting cached again.

upvote
  flag
absolutely. I used this, and conditional compilation, so it does not appear in test and release builds. – dlatikay
upvote
  flag
Exactly its working like a charm. – Al007
upvote
  flag
Even better way is to use css files modification time as a variable value. That solution can be used in production environment also. It just works :) Not sure how it's done in ASP but in PHP something like this <link href="style.css?time=<?php echo fileminfo('style.css');?>" rel="stylesheet"> – Oliver Manner

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()
    }) 
  })

Chrome's Cache killer is by far the best option. Since the store URL to install cache killer is down, you can download the CRX file here:

https://www.crx4chrome.com/extensions/jpfbieopdmepaolggioebjmedmclkbap/

once the extension file is downloaded, open Chrome -> more tools -> extensions, then drag the CRX file from the File Explorer or your Desktop (depending the location where you downloaded the file) into the chrome window to install the extension.

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!

Add this string of code to your and it should do the trick.

<meta name="robots" content="noarchive">

I had the same problem, I tried :

  • Control Shift R,
  • Disable cache in F12
  • Control F5.

Then I discovered that using a .appcache manifest for a non https site is deprecated. I removed my site.appcache file and its reference in the html tag and now I'm seeing the latest version of each page!

Not the answer you're looking for? Browse other questions tagged or ask your own question.