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

问题描述

我有一个页面通过jQuery的 $。getScript 函数动态添加脚本引用。脚本加载并执行正常，所以我知道引用是正确的。但是，当我向任何脚本添加一个调试器语句以允许我在调试器（如VS.Net，Firebug等）中执行代码时，它不起作用。似乎有一些关于jQuery加载脚本的方法是阻止调试器查找文件。

有没有人可以解决这个问题？

解决方案

好的，结果是，默认的 $。getScript（）函数的实现根据引用的脚本文件是否在同一个域上而不同，工作方式不同。外部引用如：

  $。getScript（http://www.someothersite.com/script.js）
  

将导致jQuery创建一个外部脚本引用，可以调试没有问题。

 < script type =text / javascriptsrc =http://www.someothersite.com/script.js>< ; / script> 
  

但是，如果您引用本地脚本文件，如下列任何一种：

  $。getScript（http://www.mysite.com/script.js）
 $ .getScript（script js）
 $ .getScript（/ Scripts / script.js）; 
  

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

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

后一种方法不适用于我测试的任何调试器（Visual Studio.net，Firebug，IE8 Debugger）。

解决方法是覆盖 $。getScript（）函数所以它总是创建外部引用而不是内联内容。这是这样做的脚本。我已经在Firefox，Opera，Safari和IE 8中进行了测试。

 < script type =text / javascript> ; 
 //将正常的jQuery getScript函数替换为支持
 //调试的函数，并将脚本文件作为外部资源
 //而不是内联引用。 
 jQuery.extend（{
 getScript：function（url，callback）{
 var head = document.getElementsByTagName（head）[0]; 
 var script = document。 createElement（script）; 
 script.src = url; 
 
 //处理脚本加载
 {
 var done = false; 
 
 //为所有浏览器附加处理程序
 script.onload = script.onreadystatechange = function（）{
 if（！done&&（amp;（！this.readyState || 
 this。 readyState ==loaded|| this.readyState ==complete））{
 done = true; 
 if（callback）
 callback（）; 
 
 //处理IE 
中的内存泄漏script.onload = script.onreadystatechange = null; 
} 
}; 
} 
 
 head.appendChild（脚本）; 
 
 //我们处理所有使用脚本元素注入
 return undefined ; 
}，
}）; 
< / script> 
  

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

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