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?

Solution 1:

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

Chrome circa 2018

You can also access it on the network tab:

Solution 2:

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.

Solution 3:

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.

Solution 4:

Shift+F5 quickly clears the cache.