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?

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?

• javascript
• jquery
• firebug

• Have you enabled debugging in Firebug for the domain from which your page loads (Console panel) ? – Cerebrus Commented May 13, 2009 at 15:58
• Yes, I have. I also have no problems debugging the scripts on the page I am loading first, and that page is in the same domain. I just tried the "debugger;" statement there and it worked fine. So it seems that the "debugger" statment is just not working for dynamically loaded scripts. – Adrian Grigore Commented May 13, 2009 at 16:07

5 Answers 5

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 */
}

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.

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!

Just encountered same behavior (Firebug ignoring debugger; statement in dynamically loaded code) in Firefox 5.0/Firebug 1.7.3.

Worked around by detaching Firebug window ("Open Firebug in New Window").

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