Refreshing Javascript JS file caching in Chrome during development

I am not sure if a recent release has made it worse or it’s always been this annoying, but Chrome does a lousy job of refreshing changes to JavaScript files.  It used to be you simply hit CTRL+F5, or CMD+F5 on MacOS to for the browser to reload with changes, but this simply doesn’t work with Chrome, which is really really irritating when developing in HTML.

 

One option is to use a cache breaker, but this is an irritating process.  Basically you just add a random number to the end of your script inclusion script.

 

So instead of:

<script src=”MyScript.js”>

You do

<script src=”MyScript.js?Num=21421423asdfsdf2″>

 

Then you basically change the magic number every time you update the script, which WILL result in the new script being reloaded regardless to the browser settings.  In development, this is still a gigantic pain in the arse.

 

Fortunately there is a solution.  On a PC hit CTRL+SHIFT+i or on a Mac hit CMD+Option+i, to bring up the developer tools.  This will bring up the developer tools, now locate the gear icon in the bottom right corner:

Google Chrome Developer Settings Icon

 

Then under the General Tab, select Disable cache:

DisableCacheChrome

 

 

Voila, much more sane JavaScript development under Chrome.

 

 

General


Scroll to Top