Javascript 通过jQuery getScript函数添加的调试脚本

我有一个页面，可以通过jQuery的

$.getScript

函数动态添加脚本引用。脚本加载和执行良好，因此我知道引用是正确的。但是，当我向任何脚本添加“debugger”语句以允许我单步执行调试器中的代码（如VS.Net、Firebug等）时，它就不起作用了。jQuery加载脚本的方式似乎妨碍了调试器查找文件

---

有人对此有解决办法吗？

好的，因此，

$.getScript（）

函数的默认实现根据引用的脚本文件是否在同一域中而不同。外部参考，例如：

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

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

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

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

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

试试这个

jQuery.extend({
getScript: function(url, callback) {
    var head = document.getElementsByTagName("head")[0];

    var ext = url.replace(/.*\.(\w+)$/, "$1");

    if(ext == 'js'){
        var script = document.createElement("script");
        script.src = url;
        script.type = 'text/javascript';
    } else if(ext == 'css'){
        var script = document.createElement("link");
        script.href = url;
        script.type = 'text/css';
        script.rel = 'stylesheet';
    } else {
        console.log("Неизветсное расширение подгружаемого скрипта");
        return false;
    }



    // 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;

} 
   });

使用jQuery1.6（可能是1.5），您可以切换到不使用getScript，而是使用JQuery.ajax（）。然后设置crossDomain:true，您将获得相同的效果

错误回调将不起作用。所以你最好不要像下面那样设置它

然而，我确实设置了一个计时器，并成功地清除了它。所以说10秒钟后如果我什么都没听到，我就认为文件是坏的

        jQuery.ajax({
            crossDomain: true,
            dataType: "script",
            url: url,
            success: function(){
                _success(_slot)
            },
            error: function(){
                _fail(_slot);
            }
        })

---

对于那些希望调试脚本并将其与$一起使用的人。当（James Messinger的答案与$不兼容。当）我建议使用以下代码：

var loadScript = function (path) {
  var result = $.Deferred(),
  script = document.createElement("script");
  script.async = "async";
  script.type = "text/javascript";
  script.src = path;
  script.onload = script.onreadystatechange = function (_, isAbort) {
      if (!script.readyState || /loaded|complete/.test(script.readyState)) {
         if (isAbort)
             result.reject();
         else
            result.resolve();
    }
  };
  script.onerror = function () { result.reject(); };
  $("head")[0].appendChild(script);
  return result.promise();
};

所有的荣誉都归于本杰明·杜姆克·冯·德·埃赫和他的文章：

当脚本完全可见且可调试时，$.when和脚本可以很好地使用。

---

谢谢。

用Chrome调试它很简单

1-在要调试的行上写一个console.log（“某物”）

2-查看控制台中的日志

3-单击日志前面的地址链接

---

4-在该行上设置断点。

为了避免大量额外的编码，您可以尝试这样做。在声明$（'document'）.ready（）的文件（或调试器将访问的任何其他文件）中，添加如下内容

$.debug = function(name) {
   var n = name;
}

在调试器的分配行中添加断点。然后，在使用$.getScript（）加载的任何其他js文件中，可以添加

$.debug("some string to identify this point of code");

---

无论何时执行这一行，调试器都将停止并等待您的命令。退出$.debug函数，就这样

在Firefox 38.6.0和Firebug 2.0.14中，当我转到脚本选项卡时，我在下拉菜单中看到一个条目，如

jquery-1.11.1.js line 338>eval

，其中包含加载的脚本。另外，看看这个版本的jQuery中的代码，它看起来像是内部的

$。getScript（）

正在使用

$.get（）

，最终是

$.ajax（）

，唯一的区别是脚本的

eval（）

部分，它由jQuery

globalEval（）

函数处理：

// Evaluates a script in a global context
// Workarounds based on findings by Jim Driscoll
// http://weblogs.java.net/blog/driscoll/archive/2009/09/08/eval-javascript-global-context
globalEval: function( data ) {
    if ( data && jQuery.trim( data ) ) {
        // We use execScript on Internet Explorer
        // We use an anonymous function so that context is window
        // rather than jQuery in Firefox
        ( window.execScript || function( data ) {
            window[ "eval" ].call( window, data );
        } )( data );
    }
},

---

这将OP解决方案与Eric的解决方案相结合。重写必要的jquery以始终跨域处理get，它们将完美地显示出来，而不会破坏jquery承诺实现中的任何东西

jQuery.extend({
get: function (url, data, callback, type) {
 // shift arguments if data argument was omitted
 if (jQuery.isFunction(data)) {
    type = type || callback;
    callback = data;
    data = undefined;
 }

 return jQuery.ajax({
    url: url,
    type: "GET":,
    dataType: type,
    data: data,
    success: callback,
    crossDomain: true
 });
}


});

---

所有的答案都在这一页的某个地方，但我想为未来的读者总结一下

检查（动态添加的）文件下载

使用Chrome，您可以在XHR选项卡的网络面板下看到使用$.getScript（）添加的Javascript文件；注意，它们不会出现在JS选项卡下

调试文件

1） 在代码中设置断点。如其他答案\注释中所述，您可以插入

debugger;

Javascript代码中的语句。这将调用浏览器的调试器。有关更多信息，请参阅

2） 使用源映射使其显示在浏览器的“源”面板中（在Chrome中测试）。添加

到文件的末尾。 [文件显示在Chrome源面板的（无域）下]

见： 和更多信息

---

3） 重写$.getScript以根据接受的答案始终使用外部引用（我尚未测试）

很好。自从您发布此答案以来，您是否遇到过我应该注意的任何问题？；）我不认为这种方法利用了全局ajax事件。。不确定。也许是shrikant说的，我试过了，但它对我想要的剧本不起作用。我仔细研究了一下，发现我想要调试的脚本使用了$.ajax（）而不是$.getScript（）。我刚将它改为使用$.getScript（），一切都很好。非常感谢您分享。这将对我有很大帮助。此代码不适用于$.when。有人知道怎么修吗？很好。我将crossDomain设置为options.development（bool），这样在开发时我就可以调试，否则我就可以忽略它。我尝试了这个，这似乎很有效。我确实可以在调试器中看到JS源代码，并且可以设置断点。但有一个问题：每次我来回走动，一个新的JS文件都会加载新的ID#（script.JS？u=2345678）等。有什么解决方法吗？@SamikR设置

缓存：false

，这样它就不会将那个随机数添加到文件的末尾name@ArashMilani谢谢此后，我通过使用脚本的最后一个副本解决了这个问题，而不是通过AJAX加载它。只需检查类似的内容：if（！window.MyScript）{AJAX}，else{//Call load function.}工作得很好。@SamikR是的，这也应该工作：-）只需我的2美分：IMHO它添加了一个缩进的

if

块，如果我找到解决它的方法，我通常会避免这个缩进的！简单地说，这个脚本没有从DOM.Awesome中删除，这是一个很小的更改。另外，$.getScript似乎会阻止缓存。切换到您的解决方案也解决了这一问题-这将大大加快我们客户的速度！您可以使用关键字“debugger；”在你想要调试代码的那一行。对于任何从谷歌来到这里的人，这个被接受的答案是

jQuery.extend({
get: function (url, data, callback, type) {
 // shift arguments if data argument was omitted
 if (jQuery.isFunction(data)) {
    type = type || callback;
    callback = data;
    data = undefined;
 }

 return jQuery.ajax({
    url: url,
    type: "GET":,
    dataType: type,
    data: data,
    success: callback,
    crossDomain: true
 });
}


});

debugger;

//# sourceURL=whatevername.js