Chrome Developer Tools caches old version of JavaScript files

Question

I'm experiencing a strange intermittent issue with Chrome Developer tools hanging on to old versions of JavaScript files. I'll be developing some JS app, things humming along just find, and then all the sudden my JavaScript files will disappear from the list of JavaScript files on the "sources" tab. This is my first clue that something is wrong.

What I eventually discovered is that Chrome Developer Tools is, apparently hanging on to an old version of the JavaScript file. Chrome itself is requesting and executing the latest version from the server, but you can't debug the JavaScript file.

I "proved" to myself that this was what's happening by taking a particular JavaScript file that had disappeared from my sources list, and replacing it with a one line console.log statement.

I then reloaded the page, and noted that the console.log statement appeared in the JavaScript console. I also noted in the Network tab that the JavaScript file was successfully retrieved, and that what came down over the wire contained just the one line console.log statement.

However, the JavaScript file still didn't appear in the sources list, and if I clicked on the filename in the console (where it appears on the righthand side of the console, next to the logged statement), then I jump to the sources tab, and an old version of the JavaScript file is opened.

This JavaScript file is loaded onto the page via a regular <script> tag. It is not loaded dynamically, via another script, or via eval. Just a plain, vanilla <script> tag that points to the .js file on the webserver.

I've tried:

1. Ensuring that "Disable cache (while DevTools is open)" is checked in the DevTools settings.
2. Manually clearing out my cache and cookies in Chrome.
3. Restarting Chrome
4. Manually loading the JavaScript file in a separate Chrome tab
5. Disabling every Chrome extension/app that I have installed
6. Running the page in incognito mode
7. Uncheck both "Enable JavaScript source maps" and "Enable CSS source maps"

None of these changed the behavior. You can watch a video demonstrating this here, if you don't believe me!

I do think it's a Chrome issue, as I can use Firefox without this issue... but I really like Chrome and Chrome's developer tools :-) So I'd like to get this working in Chrome...

Update I reported this as a Chrome bug here. If this bug is affecting you, or important to you, please vote it up and/or add comments with additional information.

Answer 1

Chrome DevTools works fine for me. When I load it for a page it remembers beyond the lifespan of the chrome process what sources I have open; although it gets the order wrong. I see two differences in our devtools prefs: disable cache and enable maps. So I would advise:

1) uncheck disable cache (while DevTools is open), 2) (if 1 didn't work) press the "Restore defaults and reload" button.

Answer 2

The issue persists in 78.0.3904.97. To fix it run settings > advanced > reset.