Debugging scripts added via jQuery getScript function

James_83727 0
Viewed 29076

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?

visual-studio jquery javascript debugging
9 Answers

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:

$.getScript("http://www.someothersite.com/script.js")

will cause jQuery to create an external script reference, which can be debugged with no problems.

<script type="text/javascript" src="http://www.someothersite.com/script.js"></script>

However, if you reference a local script file such as any of the following:

$.getScript("http://www.mysite.com/script.js")
$.getScript("script.js")
$.getScript("/Scripts/script.js");

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 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.

<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.
jQuery.extend({
   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)
                  callback();

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

      head.appendChild(script);

      // We handle everything using the script element injection
      return undefined;
   },
});
</script>
James_837270

All the answers are on this page somewhere but I wanted to summarise for future readers.

Checking the (dynamically added) File Downloads

Using Chrome, you can see Javascript files added using $.getScript (http://api.jquery.com/jQuery.getScript/) under the Network panel on the XHR tab; note they don't appear under the JS tab.

Debugging the File

1) Setting a break point in code. As mentioned in other answers\comments you can insert a 

debugger;

statement in the Javascript code. This will invoke the browser's debugger. See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/debugger for more information.

2) Using a Source Map to make it appear in the browser's Sources panel (test in Chrome).Add 

//# sourceURL=whatevername.js

to the end of your file. [The file appears under (no-domain) in Chrome source panel].

See: How to debug dynamically loaded JavaScript (with jQuery) in the browser's debugger itself? and https://developer.mozilla.org/en-US/docs/Tools/Debugger/How_to/Use_a_source_map for more information.

3) Override $.getScript to always use an external reference as per the accepted answer (I haven't tested).

user_27842800
Related