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

This 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 JavaScript deprecation 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.