通过 jQuery getScript 函数添加的调试脚本 [英] Debugging scripts added via jQuery getScript function

问题描述

我有一个页面，它通过 jQuery 的 $.getScript 函数动态添加脚本引用.脚本加载和执行正常，所以我知道引用是正确的.但是，当我向任何脚本添加调试器"语句以允许我在调试器(例如 VS.Net、Firebug 等)中单步调试代码时，它不起作用.似乎 jQuery 加载脚本的方式阻止了调试器找到文件.

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?

推荐答案

Ok，原来$.getScript() 函数的默认实现根据引用的脚本是否不同而不同文件是否在同一个域中.外部参考例如:

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")

会导致 jQuery 创建一个外部脚本引用，可以毫无问题地调试.

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");

然后 jQuery 会异步下载脚本内容，然后将其添加为内联内容:

then jQuery will download the script content asynchronously and then add it as inline content:

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

后一种方法不适用于我测试过的任何调试器(Visual Studio.net、Firebug、IE8 调试器).

This latter approach does not work with any debugger that I tested (Visual Studio.net, Firebug, IE8 Debugger).

解决方法是覆盖 $.getScript() 函数，以便它始终创建外部引用而不是内联内容.这是执行此操作的脚本.我已经在 Firefox、Opera、Safari 和 IE 8 中对此进行了测试.

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>

这篇关于通过 jQuery getScript 函数添加的调试脚本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！