17

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?

Adrian Grigore
  • 33,034
  • 36
  • 130
  • 210
  • Have you enabled debugging in Firebug for the domain from which your page loads (Console panel) ? – Cerebrus May 13 '09 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 May 13 '09 at 16:07

5 Answers5

17

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 */
}
Community
  • 1
  • 1
Jose Basilio
  • 50,714
  • 13
  • 121
  • 117
  • 1
    Update: Thankfully this bug has been long fixed in Firebug already. I haven't had to have to employ this trick for a long time... – Adrian Grigore Aug 01 '10 at 12:28
0

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!

gusaroni
  • 11
  • 1
  • Yes, that works fine. In my case the code was dynamically generated by the server though depending on other data in the same web request. – Adrian Grigore Aug 01 '10 at 12:27
0

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").

lxa
  • 3,234
  • 2
  • 30
  • 31
0

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.

-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

olliej
  • 35,755
  • 9
  • 58
  • 55
  • Thanks, but as I said, I have already tried the debugger statement and while it usually works fine, it does not work in this case (details in my question). – Adrian Grigore May 13 '09 at 21:18