Search code examples
javascriptjquerydebuggingfirebuggoogle-chrome-devtools

Debugging dynamically added javascript files


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?


Solution

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