During every web project I handle, the issue of browser cache often comes up when reviewing internally with our designers, creative director, and clients. The story usually goes like this:
- I make a change in HTML/CSS on a development website and save/upload it to a test server.
- Send the link to the preview to the designer/client and ask them what they think.
- Designer/client emails back saying “What did you change? It looks the same?”
- I then have to send, probably, the most used phrase in my job “Please clear the browser cache and refresh the page.”
This solution usually works 99% of the time, however, clearing the browser cache is not something you are usually taught in school and can be shrouded in mystery as to what doing this actually does. So here I am to help educate and offer a convenient solution to make this process very easy for anyone.
The browser cache can be described as a bunch of temporarily downloaded files from websites. When you visit a website for the first time, a lot of the assets that make up the page (images, scripts, code, etc.) get saved on your computer’s hard drive to make the page load much quicker the next time you go to it. This is great for live websites, however, when you are constantly tweaking the code of a website during the development phase, this can cause the problem I described above.
To get around this, you must “clear the cache” in your web browser. This process differs from browser to browser, and might even change from browser version to browser version, so it can be quite annoying to those who aren’t used to it.
To help with this problem, browser extension developers have come up with many easy-to-use solutions that make this process very simple. My favorite extension that I use for Google Chrome is called “Clear Cache” by Benjamin Bojko.
This simple extension adds an icon to your Chrome browser that you can click to dump the cache of the website you are currently viewing, and even refresh the page for you right afterward.
To get this extension, click this link here to go to its Chrome Web Store page. Please note, it only will install on the Google Chrome web browser, though there are extensions like this for every major web browser.
Once installed, you just have to configure the extension options by right-clicking on the icon and selecting “Options.” Then make sure the boxes I have checked below are checked on your options page and you will be set to have one-click browser cache deletions with page refresh. Now, when someone asks you to clear the browser cache, you will know just what to do.
Senior Front-end Developer