How to debug dynamically loaded JavaScript (with jQuery) in the browser's debugger itself?
You can give your dynamically loaded script a name so that it shows in the Chrome/Firefox JavaScript debugger. To do this you place a comment at the end of the script:
//# sourceURL=filename.jsThis file will then show in the "Sources" tab as filename.js. In my experience you can use \'s in the name but I get odd behaviour if using /'s.
For more information see:Breakpoints in Dynamic JavaScriptdeprecation of //@sourceurl
You can use //# sourceURL= and //# sourceMappingURL= at the end of your script file or script tag.
NOTE: //@ sourceURL and //@ sourceMappingURL are deprecated.
I tried using the "//# sourceURL=filename.js" that was suggested as a workaround by the OP, but it still wasn't showing up for me in the Sources panel unless it already existed in my tabs from a previous time when it produced an exception.
Coding a "debugger;" line forced it to break at that location. Then once it was in my tabs in the Sources panel, I could set breakpoints like normal and remove the "debugger;" line.