Creating Firebug in dynamically loaded javascript

Question

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

Obviously, I can’t just open the script panel and add a breakpoint with the mouse, since the function does not exist there.

I also tried adding a "debugger"; to the function (without the quotes), but it did nothing. I made sure that the function actually executes when I tried it.

Thanks for your help,

Adrian

Edit: I just noticed that Firebug really breaks when debugging. However, when he does this on a dynamically loaded script, he does not output the source code of this script, as usual. In addition, the call stack ends right under my own code. I can run the implementation of document.ready through the call stack, but it really doesn't help. Is this a Firebug bug or am I missing something?

Answer 1

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 to be debugged.

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

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

Answer 2

You can try placing a breakpoint where the event is fired, and then instead of clicking “Play”, select “Step Into” (F11). I don't have a test case in front of me, but I think it might work.

Answer 3

I don’t know if you ever found out, but in case someone needs it ...

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

In my case, I had default.aspx loading services.aspx into a div using jQuery AJAX. Services.aspx, in turn, loaded jQuery UI tab items using AJAX from a web service that provided data to it. The webservice code was in a file called data.js, which was associated with default.aspx. I needed to debug code that was in the services.aspx header (which loaded data tabs), but could never 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 this makes sense to those who need it!

Answer 4

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

It works by separating the Firebug window ("Open Firebug in a new window").

Answer 5

There is also the 'debugger' keyword, which is supported by IE JScript debugger and Safari Web Inspector, so I would be surprised if ifit were not included in firebug.

Basically:

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

And I would expect firebug to break with the debugger keyword