如何在Chrome中为内联JavaScript添加断点

Question

我希望能够在“源”选项卡下成功地在所需位置设置断点，以便调试我的Javascript代码。

但是，我遇到了一个问题，我想要调试我的内联Javascript代码。我们是否有使用Chrome调试工具的功能来调试我的内联Javascript代码。

我也可以使用Firebug进行调试。

备注：通过内联JavaScript代码，我指的是位于body标记内且在同一文件中的JS代码。

- Sachin Jain

---

你是否在使用 debugger; 语句？ - Dan Pichelman

我不想为了调试目的而更改我的代码，因为在以后的时间点我也需要删除这些调试器行。所以我正在考虑一个解决方案，要求浏览器停在断点处，就像它在源选项卡中停止一样。 - Sachin Jain

可能是如何在Linux下的Google Chrome浏览器中设置内联JavaScript断点？的重复问题。 - Brad Koch

Answer 1

另一种方法可以使用动态脚本方法。 Chrome提供了简单的解析器命令，可以标记动态加载的JS。

<script type="text/javascript">
[...]
//# sourceURL=dynamicScript.js 
</script>

这行代码告诉Chrome调试器，script标签内的整个脚本应被解释为dynamicScript.js文件。您可以在调试器列表中找到该文件，并轻松设置断点或检查代码。

注意：为避免不受支持的浏览器错误，@被替换为#。

动态JavaScript中的断点

- CalleKhan

---

请注意，仅链接的答案并不被鼓励，在 SO 上回答应该是解决问题搜索的终点（而不是另一个参考站点，这些站点随时间而变得陈旧）。请考虑在此处添加一个独立的摘要，将链接作为参考。 - kleopatra

@fazzyx 感谢提供链接。我也同意kleopatra的观点，答案应该是搜索的终点。因此，你可以更新你的回答并添加相关内容，或者只在评论中放置链接。 - Sachin Jain

在<script>标签中是否需要提及type？HTML5建议不使用它吗？ - xkeshav

我猜如果你使用HTML5的话就不会了。 - CalleKhan

Answer 2

我找到了解决方案。我们也可以在行内JavaScript上设置断点。

解决方案：

• 进入Chrome开发者工具的源代码选项卡，您可以看到所有源代码。
• 您的HTML代码将以与URL中遵循的类似目录结构相同的方式存在。
• 然后您可以打开您的HTML文件，在您的行内JavaScript代码中设置断点。

- Sachin Jain

---

可以设置断点并且运行，但是当脚本在模板标签内部时，Chromium会忽略它们，不幸的是无法在断点处暂停脚本。 - Eddie

Answer 3

如果您在BODY标签内包含以下类型的JS引用，则它将永远不会显示在目录结构中，因此在这种情况下，您的解决方案将不起作用。

<div>
<script src="myJSfile.js">
</script>
</div>

这在jQuery Mobile中发生，页面div之外的所有内容都没有加载，因此您必须在页面div内部包含JS。我本来会把@fazzyx的答案标记为正确答案，因为至少Chrome会显示那些已包含的文件。

- TechMaze