Friday, February 23, 2024
 Popular · Latest · Hot · Upcoming
rated 0 times [  144] [ 6]  / answers: 1 / hits: 29406  / 15 Years ago, fri, march 27, 2009, 12:00:00

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?

More From » jquery


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.

<script type=text/javascript src=></script>

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:

<script type=text/javascript>{your script here}</script>

This latter approach does not work with any debugger that I tested (Visual, 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.

<script type=text/javascript>
// Replace the normal jQuery getScript function with one that supports
// debugging and which references the script files as external resources
// rather than inline.
getScript: function(url, callback) {
var head = document.getElementsByTagName(head)[0];
var script = document.createElement(script);
script.src = url;

// Handle Script loading
var done = false;

// Attach handlers for all browsers
script.onload = script.onreadystatechange = function(){
if ( !done && (!this.readyState ||
this.readyState == loaded || this.readyState == complete) ) {
done = true;
if (callback)

// Handle memory leak in IE
script.onload = script.onreadystatechange = null;


// We handle everything using the script element injection
return undefined;

[#99787] Friday, March 20, 2009, 15 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.

Total Points: 61
Total Questions: 102
Total Answers: 99

Location: Andorra
Member since Sat, May 27, 2023
10 Months ago