Chrome debug does NOT reload page source

Question

This has been a problem for a long time and I've never found a solution for it and while other questions on here are similar, they are not exactly what I'm seeing.

The problem is that the SOURCE used to step through the code does NOT refresh on every page load. Yes, I have disabled the cache - but it is not the browser cache that is the problem, it is the DEBUGGER SOURCE cache.

In my webapp (Struts2 and Tomcat), I have the main page with title bar and left the menu. The center content is an iframe that loads all the appropriate JSPs. I use one 'action' for most of my navigation with different results displaying different pages. The problem is that the NAME in the chrome debugger SOURCES pane does not change as I navigate. The actual page changes, but since the name doesn't change, Chrome does NOT bring the new source into the debugger window. So what happens is if I have 'debugger;' on line 200 in the page being loaded, it stops, and shows the 'source' - but its the OLD source at line 200, not the actual source that is running! If I right-click on the old source file in the SOURCES pane, and "Reveal in Network panel" the real source is shown here as it really was loaded from my server, BUT the debug source does NOT change.

Question: How do I get around this bug in Chrome and force the source to reload in the debugger display?

UPDATE: No, this is not the same as that other question. The answer by David Fahlander seems to fit what I'm saying. The ACTUAL javascript source IS refreshing and is shown correctly in the RESOURCES and NETWORK panes. But in the SOURCE pane where actual debugging is done, the new source is NOT refreshed. And its hard to debug code you cannot see!

Answer 1

Maybe try the old fashioned method of adding an URL query parameter with, say current time in ms? Something that your app will ignore, but Chrome will treat it as a new page? e.g. https://example.com?time=1594125425508

Answer 2

To append JavaScript code once the loading process is complete, this technique is employed in Chrome extensions and is amenable to debugging.

let script = document.createElement('script');
script.innerHTML = 'your javascript code ';

document.head.appendChild(script);