Codepal

We develop enthralling web experiences.

Quick Tip: Clear Cache and Hard Refresh on Chrome

Quick Tip: Clear Cache & Hard Refresh on Chrome

Cache issues are really irritating while developing on front end technologies. Here is a quick tip on how you can clear the cache and do a hard refresh on Chrome Browser

While developing using front end technologies, the biggest problem a front-end developer might face is clearing the cache every now and then, or doing a hard refresh. Most of the changes done in the code are not reflected at once, unless you are using Codekit or Yeoman.io.

Modern day browsers nowadays cache every front end resource like javascript or CSS style sheets. They primarily do this to increase the website performance. But this can be really irritating while one is in development mode and constantly modifying the javascript or css style sheets. The only way to see the changes is by doing a hard refresh or clear the cache of the browser.

So when I am working on front end stuff, I normally do ‘Ctrl+Shift+R’ (Cmd+Shift+R on OS X) or I go to the settings pane by pressing ‘Ctrl+Shift+Delete’ (Cmd+Shift+Delete on OS X) and then clear the cache. This normally disrupts the whole development flow.

Google’s Chrome browser is one of the most widely used web browsers out there. One reason it became so famous is because of its advanced “Chrome Dev Tools” for web developers. I really enjoy developing on chrome and most importantly, debugging java-script.

Recently, I discovered this small but awesome feature of the Chrome Dev Tools that helps you clear the cache and do a hard refresh easily, without breaking your flow or changing tabs. What ever tab you are on, just open the Chrome Dev Tools by pressing F12. Once the chrome dev tools are open, just right click on the refresh button and a menu will drop down. This menu gives you the option of doing a hard refresh, or even clearing the cache and do a hard refresh automatically.

Right click on refresh button and do hard refresh and clear cache

It is a very small tip but is really useful in maintaining the workflow or reducing the number of steps to do the cache clearing task.

Here are two of the best tutorials extensively explaining all the features of the Chrome Dev Tools: Introduction to Chrome Developer Tools and Chrome Dev Tools: JavaScript and Performance

Hope this is helpful and improves your workflow. Let me know if you have any other tools of automating the development steps :)


Discussion 14 Responses

In latest versions of Chrome, you can disable cache by clicking on the developer tools settings icon in the bottom right and select “Disable cache” to disable cache permanently. In firefox too, this option is available under about:config page.

This is really useful to know too. Thanks also!

This is just what I was looking for. Thanks!

Thanks for this gem! As to date, you can simply right click the refresh icon and are presented with the options.

Hi!! Sumeet Chawla. I have read the whole article. First time I find this option in Chrome browser after reading your article. I can manage the hard reset in chrome. Thank you once again.

Marie-Edith Bissey

Thanks, I was tearing my hair out over a CSS feature that was not being updated…

Not working in Chrome for MAC :/

Thank you so much for this post.
Chrome has gotten worse and worse for my clients and I about not showing new files.
It has been driving me mad. I teach WordPress and every time people update their sites, it will not show up in Chrome. After f5 and all the other normal ways you can usually get a browser to show you fresh pages.

Glad it was helpful. Alas, it does not work on Mac :-/

Very nice tip man!!!

Thanks dude, this has been driving me nuts the past two days, since my cache killer extension has just decided to stop working all of a sudden!

Great for this article. Moreover, you can try with this PhoneClean, it can help you Remove Junk Files & Clear Private Data on iPhone. including App Caches/Cookies/Temp files/Crash Logs, Photo Caches, Safari Cookies/Caches/History, and so on.

http://www.youtube.com/watch?v=4ILHNHJvJkA

Trackbacks and Pingbacks

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>