How can I debug JS code added into DOM by an AJAX call?

Question

I have a webpage which loads properly formatted html forms using AJAX calls. This HTML also loads javascript code along with it and it is not working. As I am using jQuery I tried to add live() but it didn't help me. Now I need to debug this. How can I set breakpoints or watch on this code using firebug? I am using jQuery1.3 and can not deviate from it. TIA

Answer 1

I'm uncertain from reading your question as to whether or not you have access to and can modify the dynamically loaded script, but if you do, add this statement:

debugger;

where you want your breakpoint.

Also note that although Firebug is perfectly capable of displaying dynamically loaded scripts, I think it hides them by default.

Also, if you have the option of using Chrome or Safari, you can just throw an exception from the point where you want to break, then set the Chrome or Safari debugger option to break on any exception. For example:

try {
    throw new Error("");
}
catch () {}