CODEWITHSUNDEEP
google-chromegoogle-chrome-devtools
Chris Fewtrell
Chris Fewtrell

Reputation: 7715

How to force Chrome's script debugger to reload javascript?

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?

Upvotes: 271

Views: 205217

Answers (16)

Antoine
Antoine

Reputation: 5692

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

Upvotes: 0

Alexander Kolinko
Alexander Kolinko

Reputation: 31

If there is document on URL: file:///C:/Users/user/Desktop/site/index.html

Add any parameter to your URL, like this: file:///C:/Users/user/Desktop/site/index.html?foo=777

and the browser'll refresh all sites resources

Upvotes: 0

Mohamad Chami
Mohamad Chami

Reputation: 1234

Chrome

Right click on reload button in chrome and click "Empty Cache and Hard Reload"

Upvotes: 1

Tony L.
Tony L.

Reputation: 19396

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.

Upvotes: 11

Steve Tauber
Steve Tauber

Reputation: 10159

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.

Upvotes: 40

Bishoy Hanna
Bishoy Hanna

Reputation: 4589

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.

Upvotes: 146

adrianbanks
adrianbanks

Reputation: 82944

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

Upvotes: 356

scottbiker
scottbiker

Reputation: 300

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.

Upvotes: 0

Mike W
Mike W

Reputation: 435

Deactivating Breakpoints caused the new script to load for me.

Upvotes: 0

Vijay Nandwana
Vijay Nandwana

Reputation: 2634

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

Upvotes: 3

Mister Verleg
Mister Verleg

Reputation: 4293

There are also 2 (quick) workarounds:

  1. Use incognito mode wile debugging, close the window and reopen it.
  2. Delete your browsing history

Upvotes: 0

David Fahlander
David Fahlander

Reputation: 5646

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).

Upvotes: 2

RPDeshaies
RPDeshaies

Reputation: 1874

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

Upvotes: 9

Peter Kelly
Peter Kelly

Reputation: 14391

Shift+F5 quickly clears the cache.

Upvotes: 12

iamshravan
iamshravan

Reputation: 1

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.

Upvotes: 0

Steve K
Steve K

Reputation: 4921

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.

Upvotes: 2

Related Questions