jQuery.getScript在Chrome开发者工具中将文件显示为资源

Can jQuery.getScript show the file as a resource in Chrome Developer Tools?

本文关键字：文件 显示 资源 工具 getScript Chrome 开发者 jQuery      更新时间：2023-09-26

我的代码需要按需加载脚本。

function includeJS(uri) {
    return jQuery.getScript(uri);
}
includeJS('/path/to/script.js').always(function() {
    // do something after script is loaded
});
但是，问题是JS文件在Chrome Developer工具中不可用，就像页面上静态包含的其他文件一样。因此，我不能轻易地设置断点。

是否有jQuery的替代品?getScript，也将显示在Chrome开发人员工具的脚本与放置断点的能力?

编辑:根据目前接受的答案添加解决方案(我仍然会考虑其他解决方案，但这似乎对我有效)

function includeJS(uri) {
    var def = $.Deferred();
    var script = document.createElement('script');
    script.src = uri;
    script.onload = function() {
        def.resolve();
    }
    script.onerror = function() {
        def.reject();
    }
    document.body.appendChild(script);
    return def.promise();
}

您可以简单地附加script标记，并使用onload处理程序来执行加载后的操作。例如:https://jsfiddle.net/0nu2dusu/

var script = document.createElement('script');
script.src = 'my_external_script.js';
script.onload = loadHandler;
document.body.appendChild(script);

与$.getScript相比，您对失败负载的控制略少，但脚本确实显示在开发工具中。

实际上它一直在那里。看看jQuery.getScript()站点中的一个例子。这是它的样子:https://i.stack.imgur.com/VcFqX.png。.getScript()的问题是它从不缓存请求的文件，因此在每次调用时它都会添加一些随机字符串来防止缓存(这也阻止了我们调试代码)。但是有一个解决方法:

  1. 在调用.getScript()之前设置全局.ajax缓存(不推荐):

    $.ajaxSetup({
  cache: true
});

  2. 直接呼叫.ajax()(推荐):

    $.ajax({
    dataType: "script",
    cache: true,
    url: url
}

  3. 如果是你自己的脚本，你可以随时在任何地方添加debugger;命令来强制浏览器进入调试模式(必须打开DevTools)。

相关文章：