253

I really like the ability to edit javascript in the chrome debugger however, I find that it can be really problematic getting the debugger to re-fetch the JavaScript from the server.

Sometimes I have to go as far just closing the debugger and reloading the frame works OK - but other times (an dI cannot pin down under what conditions this occurs) I have to clear my temporary internet cache. Sometimes I swear I have to close chrome completely, then clear the cache and then load the page before the debugger finally shows me the most up-to-date script.

(NB. There is no caching of the script by the web server)

I was wondering if anyone knew of a quick and easy way to tell the debugger to invalidate all its javascript and fetch it all anew on page reload?

rink.attendant.6
  • 36,468
  • 57
  • 89
  • 143
Chris Fewtrell
  • 7,007
  • 7
  • 41
  • 59

15 Answers15

341

While you are developing your script, try disabling the Chrome cache.

When you reload the page, the JavaScript should now get refreshed.

Chrome circa 2011

Open settings Disable the cache

Chrome circa 2018

Open settings Disable the cache

You can also access it on the network tab:

Network tab

adrianbanks
  • 76,725
  • 21
  • 166
  • 198
  • 8
    So, does this apply all the time, or only when the debugger is open? – PilotBob Feb 22 '12 at 16:39
  • 7
    only when the Dev Tools are open – Karolis Mar 17 '12 at 00:17
  • 12
    I've had that set all along, and now all of a sudden, I'm stuck with a certain file. Anyone find a solution? – IronicMuffin May 14 '12 at 13:25
  • @IronicMuffin See my answer to force refresh a specific resource – Steve Tauber Jun 12 '12 at 20:36
  • 5
    This just added some years to my life. I tried the CMD+SHIFT+R but that didn't do it. Thanks – Kevin Zych Feb 28 '13 at 18:20
  • Indeed, like @Karolis commented: [Chrome DevTools' Disable Cache invalidates the disk cache (great for developing!), but.. only while devtools is visible](https://twitter.com/ChromiumDev/status/227356682890670080). – Arjan Apr 01 '13 at 19:51
  • Incase images are blocked for you this is how to disable the cache http://stackoverflow.com/questions/5690269/disabling-chrome-cache-for-website-development – Nick May 06 '13 at 18:53
  • I'm assuming this disables *all* cache. It'd be nice to have a `Disable JavaScript cache` option! – jozxyqk Mar 17 '14 at 00:56
  • 7
    For those who are coming to this question more recently, note that the settings menu is off the three vertical dots menu in Developer Tools. There you will be able to check the box to disable cache. – Scott C Wilson Jun 01 '17 at 16:57
  • In order to find this I had to scroll down about a page past 3 other groups to Network, then Disable Cache is the third option down. – Lucas W Apr 09 '18 at 22:32
  • 1
    But why on Earth this is not the default? I mean who wants to use cache while developing? – atevm Jul 02 '18 at 11:47
  • I disable the Cache through Network Tab and my JS started reloading, really thanks adrianbanks – Rocky Royalson Feb 27 '19 at 16:43
  • 1
    True story: "9 years later, he came upon the stack overflow article he never knew he was searching for the entire time. After carrying the heavy weight of frustration for so long, the realization he was now in a state of complete contentment nearly lifted him out of his chair. He breathed a new breath, the first of his new life. And he went on." Thank you @adrianbanks for the inspiration. – abaumer Feb 04 '20 at 21:46
  • when working with js make sure its not cache by server too , wordpress devs be careful sometime server have cache js file while you struggling with browser and abusing google lol – user889030 May 09 '20 at 09:41
140

enter image description here

The context menu shown above is accessible by right clicking / presssing & holding the "reload" button, while Chrome Dev Tools is opened.

Empty cache and hard reload works best for me.

Another Advantage: This option keeps all other opened tabs and website data untouched. It only reloads and clears the current page.

Sebbas
  • 181
  • 3
  • 11
Bishoy Hanna
  • 10,650
  • 2
  • 32
  • 32
  • 5
    That one is usefull especially because it is simple to explain. I was under the problem with a client not seeing the modification made on his website. Press F12, then right click on the reload button, choose Empty Cache and Hard Reload. I was done, thans to that comment :-) – Gull_Code Mar 31 '14 at 22:22
  • Its's the best chrome feature :) , anytime mate. – Bishoy Hanna Apr 01 '14 at 06:20
  • 1
    Thanks! I was trying to figure out why the Reload button sometimes gave me a menu and sometimes didn't. – iconoclast Nov 26 '14 at 18:54
  • 1
    I had no problems with Ctrl+Shift+R when reloading Javascript files, but this would not bring back updated content that was served in HTML files. Empty Cache and Hard Reload did the trick for that. – S. Baggy Jul 06 '15 at 00:09
  • Best way to do it, use this empty cache and hard reload – hoogw Jul 11 '17 at 16:39
  • Wow! Who would have known, all these years and there was this option all along. (Sorry for the pointless comment, but I had to). – Nicholas Petersen Mar 20 '18 at 18:52
35

You can always clear a specific file by doing the following:

  1. Open Dev Tools
  2. Click on the Sources tab
  3. Find your script / image / file
  4. Check the right panel to see if your file is up to date

If not:

  1. Right click the resource in the left panel and choose 'Open Link in New Tab'
  2. Force a reload of the resource with the methods above. (See @Bishoy Hanna's example)

This is very handy if you have resources that are in frames and CTRL+F5 is not force refreshing them.

Steve Tauber
  • 7,905
  • 5
  • 37
  • 44
12

Shift+F5 quickly clears the cache.

rink.attendant.6
  • 36,468
  • 57
  • 89
  • 143
Peter Kelly
  • 13,347
  • 6
  • 51
  • 62
10

Here's a shortcut to DevTools:

  1. F12 to open Chrome DevTools
  2. F1 to open DevTools Settings
  3. Check Disable cache (while DevTools is open) as shown below:

enter image description here

Note: Updated per Dimi's comment. They tend to move it so let me know or update the post if you notice that it's changed.

Tony L.
  • 13,638
  • 8
  • 61
  • 63
9

For Google chrome it is not Ctrl+F5. It's Shift+F5 to clear the current cache! It works for me !

rink.attendant.6
  • 36,468
  • 57
  • 89
  • 143
RPDeshaies
  • 1,516
  • 1
  • 22
  • 29
  • Why ? I don't understand what is the difference between that and a comment. At the end, the most usefull question will be see at the top of the post. – RPDeshaies May 07 '13 at 19:58
  • 3
    The questioner did not mention at any point *Ctrl-F5*, so by definition your answer is not an answer to the question asked by the questioner, its rather a *comment*, a correction to the other peoples answers and it should be treated as so. – Edward A May 08 '13 at 11:28
3

On Windows, Ctrl+Shift+r would force reload the script in chrome.

Vijay Nandwana
  • 1,925
  • 1
  • 20
  • 31
2

If you are making local changes to a javascript in the Developer Tools, you need to make sure that you turn OFF those changes before reloading the page.

In the Sources tab, with your script open, right-click in your script and click the "Local Modifications" option from the context menu. That brings up the list of scripts you've saved modifications to. If you see it in that window, Developer Tools will always keep your local copy rather than refreshing it from the server. Click the "revert" button, then refresh again, and you should get the fresh copy.

Steve K
  • 4,627
  • 1
  • 29
  • 40
2

It seems as the Chrome debugger loads source files into memory and wont let them go despite of browser cache updates, i.e. it has its own cache apart from the browser cache that is not in sync. At least, this is the case when working with source mapped files (I am debugging typescript sources). After successfully refreshing browser cache and validating that by browsing directly to the source file, you download the updated file, but as soon as you reopen the file in the debugger it will keep returning the old file no matter the version from the ordinary browser cache. Very anoying indeed.

I would consider this a bug in chrome. I use version Version 46.0.2490.71 m.

The only thing that helps, is restarting chrome (close down all chrome browsers).

David Fahlander
  • 3,533
  • 1
  • 14
  • 12
0

If the files which you are loading are cached and if the changes you have made does not reflect in the code then there are 2 ways you can deal with this

  1. Clear the Cache as everyone told

  2. If u want Cache and only the files have to be reloaded , you can go to network tab of the dev tool and clear whatever was loaded. next time it will not load it from cache. you will have your latest changes.

iamshravan
  • 1
  • 2
0

If you're running a local server on Apache, you can get what look like caching problems. This happened to me when I had a Apache server running under Vagrant (in virtualbox).

Just add the following lines to your config file (/etc/httpd/conf/httpd.conf or equivalent):

#Disable image serving for network mounted drive
EnableSendfile off

Note that it's worth searching through the config file to see if EnableSendfile is set to on anywhere else.

MattCochrane
  • 1,988
  • 1
  • 20
  • 31
0

There are also 2 (quick) workarounds:

  1. Use incognito mode wile debugging, close the window and reopen it.
  2. Delete your browsing history
Pim verleg
  • 3,248
  • 2
  • 33
  • 55
0

Deactivating Breakpoints caused the new script to load for me.

Mike W
  • 372
  • 2
  • 12
0

In my opinion it's easiest to work in a 'private browsing session' of chrome, to ensure that your javascript files don't come from the cache.

scottbiker
  • 31
  • 4
-1

You can also use this Chrome extension to quickly switch between using or not the cache: https://chrome.google.com/webstore/detail/cache-killer/jpfbieopdmepaolggioebjmedmclkbap

antoine129
  • 4,484
  • 4
  • 29
  • 50