How To Clear The Cache in Chrome
“Caching” is when, rather than fetching a new copy of an asset like an image, HTML, CSS, or JavaScript file from the internet, the browser uses a copy it has already saved. This is a major feature of web browsers and it alone is responsible for much of the speed we get out of websites. But it’s also tricky! It’s really the websites job, not ours as users, to make sure that cache is handled well. Done wrong, we might get old content and old design rather than updated versions. Not good. 99.9% of the time, everything is fine and you don’t need to manage the cache yourself. But sometimes things just get weird and you have to.
It’s often said that caching is one of the hardest problems in computer science, and they aren’t joking at all. It gets complicated.
You might be clearing cache because you’re looking at a site – your own or someone else’s – and the content or design doesn’t seem to be loading the correct files from your computer or the server. Or you might just be security-concerned and want to clear the cache to make sure old data isn’t sitting around on disk. In any case, let’s look at all the caching mechanisms in Chrome (this goes for most browsers though) and how to clear it.
Manual Clearing The Cache
The standard way to clear all cache is Chrome Settings > Advanced > Clear Browsing Data.
You’ll have options in there for what you want to clear (“cached images and files” being the important part for our purposes) and from when you’d like to clear. Choose “all time” if you’re trying to be comprehensive.
Disable Caching
There is no way to disable caching all the time in Chrome, but you can disable it during development of websites by using this checkbox in the DevTools. Command-Option-i will open up the DevTools and under the Network tab you’ll see a checkbox along the top bar to disable the cache:
I have that on pretty much all the time so I’m always getting fresh files no matter what.
Other Stuff in DevTools
The caching of actual files like HTML, CSS, JavaScript, and images are mostly what we’re talking about here, but there is other things that sometimes can use a flush to start working in an expected way again. Those are things like cookies, localStorage, and Service Workers. If you suspect any of these for being a culprit of misbehavior, open the DevTools and go to the Application tab. Along the left, you’ll see the different types of Storage and Cache, and you can explore (as well as change/delete) those things there:
Be a little careful! Deleting cookies can do things like log you out of websites.
Hard Reloading
Did you know Chrome has a somewhat hidden “Hard Reload” (also known as hard refreshing) menu? I’m not sure if the term has a 100% agreed upon meaning, but the gist of it is that it tells the browser you really want to see a refreshed version of the page and it should make it’s best effort for doing so. You get to this menu by opening DevTools, then click-and-holding the refresh button:
Note the last option in that menu “empty cache and hard reload” which presumably does an even harder hard refresh. HARD REFRESH 2: REFRESHING HARDER with Bruce Willis. OK moving on.
Plugins
Sometimes it’s nice to give yourself one-click easy access to cache clearing, and that’s what some plugins are able to do, like this one:
In a similar vein, I use CleanMyMac on my machine to clean out old gunk sometimes, and it can definitely help with clearing caches in browsers as well (it empties with the User Cache Files when you clear System Junk, I believe).
Give it a try!
Click here to build your next great project on Media Temple.
