Debugging scripts added via jQuery getScript funct

Question

I have a page that dynamically adds script references via jQuery's $.getScript function. The scripts load and execute fine, so I know the references are correct. However, when I add a "debugger" statement to any of the scripts to allow me to step through the code in a debugger (such as VS.Net, Firebug, etc.), it doesn't work. It appears that something about the way jQuery loads the scripts is preventing debuggers from finding the files.

Does anybody have a work-around for this?

Answer 1

To avoid a lot of extra coding you can try this. In the file where you've declared your $('document').ready() (or any other file your debugger will access), add something like...

$.debug = function(name) {
   var n = name;
}

Add a breakpoint to the assignment line in your debugger. Then, in any other js-file you load with $.getScript() you can add ...

$.debug("some string to identify this point of code");

Whenever this line is executed your debugger will stop and wait for your command. Step out of the $.debug function and that's it!

Answer 2

There is an easy way to debug it with Chrome.

1- Write a console.log("something") on the line that you want to debug.

2- Watch the console for that log.

3- Click on the address link in front of the log.

4- Set break-point on that line.