I have a web application which dynamically adds javascript files based on what the user chooses as options using ajax in real time to avoid refreshing the screen.
I am now trying to debug these dynamically added javascript files and have tried both Google Chrome's developer tools and Firebug's pluggin for Firefox, and have noticed that the dynamically added javascript "files" do not appear, so I can't select them to add breakpoints etc.
So, is there a solution for this, i.e. debugging dynamically added javascript files?
You can add the debugger; statement in your dynamic scripts where you want to set the breakpoint. This will make chrome stop on it like a regular breakpoint if the execution thread reaches the statement while the developper tools UI is opened.
You can also start your script with that, so your script appears in the debugger, and you can after that manually set a breakpoint where you want.
Check out sourceURL which is a way to indicate to the DevTools that should treat eval'd strings as real files. It does exactly what you're looking for.
At the end of the string to be evaled, leave comment of this form:
//# sourceURL=app/js/myapp.js
From there, Chrome DevTools (and Firebug) will treat this as a "real file".
Much more explanation here and HTML5 Rocks has an article and a sourceURL demo.
来源：https://stackoverflow.com/questions/10651655/debugging-dynamically-added-javascript-files