为什么Chrome开发者工具/控制台不显示javascript文件/错误是动态加载的

Why does the Chrome Developer Tools/Console does not show javascript files/error that were loaded dynamically?

本文关键字:文件 错误 动态 加载 javascript 显示 开发者 Chrome 工具 控制台 为什么      更新时间:2023-09-26

我在代码中使用require函数加载文件,该函数将<script/>标记添加到具有相关属性的页面正文中。

脚本正在加载,他们是可访问的,但如果我有一个错误,它永远不会显示在控制台上,我没有他们显示在开发人员工具内的脚本选项卡,基本上剥夺了我的调试能力。

我做错了什么?

我的require函数是这样的:

require: function (moduleId) {
    var filename = this.config.modulesDir + '/' + moduleId + '/module.js';
    var script = $('<script></script>').attr({
        'src': filename,
        'type': 'text/javascript'
    }).appendTo('#Scripts');
}

在最新版Chrome(15.0.874.121)下可以正常工作。我设置了一个jsfiddle示例,你可以清楚地看到它的工作原理:

http://jsfiddle.net/Tgax4/

你的问题有两种可能的解决方案:

  1. Chrome在您的工作站上不是最新的。更新它。
  2. 你需要的脚本不存在,这就是为什么他们没有列出。确保你有正确的位置。

在第二种情况下,chrome应该在控制台中告诉你脚本不存在,所以我很确定它与旧的chrome版本有关。

您是否考虑过使用像require.js (http://requirejs.org/)这样的库来处理您的依赖关系?

使用它,我从来没有在调试动态加载的脚本时遇到问题。

编辑:没关系,这只是JSFiddle,希望斜杠被转义。让它逃脱让它对我有用。所以我不认为错误在你的函数中。也许你能给我们提供更多的信息。


可以试着替换

吗?
$('<script></script>')

$('<script>')

确保在devtools中显示的脚本来自您所在的框架。如果你在iframe中加载脚本,那么你应该在chrome检查器中选择这个框架作为当前环境来显示这个框架中的脚本。在左下角的chrome devtools右边的按钮是小选择,这给了你改变当前框架的可能性(默认是)。尝试选择其他框架并检查脚本是否会显示在脚本选项卡上的脚本选择器中。

如果你不能看到错误,检查旁边提到的选择在底部,你已经选择了适当的日志记录级别-尝试选择按钮'All',并检查如果然后你会看到任何错误