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?
For those who would like to debug scripts and use them with $.when (James Messinger's answer doesn't work well with $.when) I suggest to use this code:
All credits and glory go to Benjamin Dumke-von der Ehe and his article: jQuery script insertion and its consequences for debugging
This works well with $.when and the script is totally visible and debuggable. Thanks.
In Firefox 38.6.0 with Firebug 2.0.14 when I go to the Script tab, I see an entry in the drop down menu like
jquery-1.11.1.js line 338 > eval
and that contains the loaded script. Plus, looking at the code in this version of jQuery, it looks like internally$.getScript()
is using$.get()
and ultimately$.ajax()
, the only difference being theeval()
part for the script, which is handled by the jQueryglobalEval()
function:This combines the OP solution with that of Eric. Override the necessary jquery to treat gets as always crossdomain and they'll show up perfectly without breaking a single thing in the jquery promise implementation.
Ok, so it turns out that the default implementation of the
$.getScript()
function works differently depending on whether the referenced script file is on the same domain or not. External references such as:will cause jQuery to create an external script reference, which can be debugged with no problems.
However, if you reference a local script file such as any of the following:
then jQuery will download the script content asynchronously and then add it as inline content:
This latter approach does not work with any debugger that I tested (Visual Studio.net, Firebug, IE8 Debugger).
The workaround is to override the
$.getScript()
function so that it always creates an external reference rather than inline content. Here is the script to do that. I have tested this in Firefox, Opera, Safari, and IE 8.With JQuery 1.6(maybe 1.5) you could switch to not using getScript, but using jQuery.ajax(). Then set crossDomain:true and you'll get the same effect.
The error callback will not work. So you might as well not set it up like below.
However, I do setup a timer and clear it with the success. So say after 10 seconds if I don't hear anything I assume the file was bad.
Try this,