Chrome不会在调试器窗口中显示所有内联JS代码

Question

我正在尝试使用chrome

调试一些内联JS代码

但是，Chrome只显示部分代码

它以黄色背景显示，只显示部分代码。

有谁熟悉这个问题？

由于

Answer 1

对于chrome中的调试JS，您必须转到源选项卡。

Answer 2

源标签

如前所述，您可以查看 Chrome 中的“源”选项卡。在 Sources 中，如果您打开内联脚本的 HTML 文件，您应该能够向脚本添加调试点。

但是这并不总是有效。这取决于您的内联脚本何时添加到您的 HTML 文件中。对于在加载 HTML 后添加内联脚本的情况，您可能需要尝试以下步骤。就我而言，我使用的是启用了 XHR 的 PreloadJS。这就是在加载 HTML 文档后内联脚本的原因。这会导致脚本的部分显示在 Elements 选项卡中，作为它现在的 DOM 的一部分，但在 Sources 选项卡中，HTML 文件看起来与最初加载时相同。 >

为您的脚本命名

我发现解决此问题的理想方法是使用 sourceURL 注释为内联脚本提供名称。您可以在 MDN 和 Google 上找到这方面的信息。

基本上只需在脚本末尾的新行中添加以下行：

//# sourceURL=someScript.js;

使用 debugger; 语句：

如果您不想命名您的脚本，您可以通过在脚本的某处添加 debugger; 并在打开开发工具的情况下重新加载页面来强制 Chrome 在调试器中打开您的脚本。一旦命中这一行，您的代码将在调试器中打开。