Making Firebug break inside dynamically loaded javascript

Question

Hi,

I'm looking for a way to debug a dynamically loaded jQuery document.ready function.

Obviously I can't just bring up the script panel and add a breakpoint with the mouse since the function does not exist there.

I've also tried adding "debugger;" to the function (without the quotes), but that did not do anything. I have ensured that the function is actually executed while I tried this.

Thanks for your help,

Adrian

Edit: I just noticed that Firebug actually breaks on debug. However, when it does so on a dynamically loaded script, it does not bring up the source code of that script as usual. Plus, the call stack ends right below my own code. I can bring up the implementation for document.ready via the call stack, but that does not really help. Is this a Firebug bug or have I missed something?

Answer 1

You might try placing a break point where the event is called, and then instead of click "Play", choose "Step Into" (F11). I don't have a test case in front of me, but I think this may work.

Answer 2

There's also a 'debugger' keyword that's supported by the IE JScript debugger, and Safari's Web Inspector, so i would be surprised ifit wasn't supported in firebug.

Basically:

// mydynamicallyloadedfile.js
... // do stuff
debugger; // triggers debugger
... // more stuff

And i would expect firebug to break at the debugger keyword

Answer 3

I just worked on this similar question. The solution involves adding the word debugger twice; once at the top of the external file and one more time at the top of the function that needs to be debugged.

I noticed that if the debugger word was used only once, it did not work. Example:

//myExternal.js
debugger;
function myExternalFunction(){
 debugger;
 /* do something here */
}

Answer 4

I don't know if you ever got this figured out, but in case someone else needs it...

I got around this by moving the code I wanted to debug to an external file that was linked from the main page.

In my case, I had default.aspx loading services.aspx into a content div using jQuery AJAX. Services.aspx in turn, was loading jQuery UI tab elements using AJAX from a webservice that was providing it data. The webservice code was in a file called data.js which was linked from default.aspx. I needed to debug the code that was in the header of services.aspx (that loaded the tabs with data), but couldn't ever see it in any of the available inspectors. I just moved the code I needed to a new function in data.js and called it from the header in services.aspx.

I hope that makes sense to someone who needs it!