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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/8226632/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-26 02:43:07  来源:igfitidea点击:

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

javascriptgoogle-chromeconsole

提问by Eli

I'm loading files using a requirefunction inside my code, which adds a <script/>tag to the body of the page with the relevant attributes.

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

The scripts are loading just fine and they are accessible, but if I have an error in one of them, it never shows in the console, and I don't have them showing in the Scripts tab inside the developer tools, essentially robbing me of the debugging capabilities.

脚本加载得很好并且可以访问,但是如果我在其中一个中有错误,它永远不会显示在控制台中,而且我没有在开发人员工具内的“脚本”选项卡中显示它们,这基本上是在抢我调试能力。

What am I doing wrong?

我究竟做错了什么?

My require function looks like so:

我的 require 函数如下所示:

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

回答by Dominic Goulet

This works just fine with latest version of Chrome (15.0.874.121). I did setup a jsfiddle example and you can clearly see it works :

这适用于最新版本的 Chrome (15.0.874.121)。我确实设置了一个 jsfiddle 示例,您可以清楚地看到它的工作原理:

http://jsfiddle.net/Tgax4/

http://jsfiddle.net/Tgax4/

There are two possible solutions to your problem :

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

  1. Chrome is not up to date on your workstation. Update it.
  2. You require scripts that does not exists, and that's why they are not listed. Ensure you have the correct location.
  1. Chrome 在您的工作站上不是最新的。更新它。
  2. 您需要不存在的脚本,这就是未列出它们的原因。确保您有正确的位置。

In the second case, chrome should tell you in the console that the script does not exists, so I'm pretty sure it has something to do with older chrome version.

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

回答by csupnig

Have you considered using a library like require.js (http://requirejs.org/) to handle your dependencies?

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

Using it I never had problems debugging in dynamically loaded scripts.

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

回答by Ewout Kleinsmann

EDIT: nevermind, that was just JSFiddle, wanting the slash to be escaped. Having it escaped made it work for me. So I don't think the error is in your function. Maybe you provide us with some more information.

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



Could you try replacing

你能尝试更换吗

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

with

$('<script>')

回答by Mateusz W

Make sure that you are displaying scripts from frame you are in inside devtools. If you load scripts inside iframe then you should select this frame in chrome inspector as current environment to show scripts from this frame. At the left bottom corner of chrome devtools right next to buttons is small select which gives you possibility to change current frame (default is ). Try to select other frame and check if then scripts will show in script selector on Scripts tab.

确保您正在显示来自 devtools 中的框架的脚本。如果您在 iframe 中加载脚本,那么您应该在 chrome 检查器中选择此框架作为当前环境以显示来自该框架的脚本。在 chrome devtools 的左下角按钮旁边是小选择,它使您可以更改当前帧(默认为 )。尝试选择其他框架并检查脚本是否会显示在脚本选项卡上的脚本选择器中。

And also if you can not see errors, check if next to mentioned select at the bottom you have selected proper level of logging - try to select button 'All', and check if then you will see any errors.

此外,如果您看不到错误,请检查底部提到的选择旁边是否选择了适当的日志记录级别 - 尝试选择按钮“全部”,然后检查您是否会看到任何错误。