如何在 chrome 中的内联 javascript 中添加断点

Posted 2023-03-07

【中文标题】如何在 chrome 中的内联 javascript 中添加断点

【英文标题】：How to add breakpoints in your inline javascript in chrome

【发布时间】：2013-05-11 16:40:06

【问题描述】：

我想调试我的 javascript 代码并能够成功地在源选项卡下的所需位置放置断点。

但是，我遇到了一个问题，我想调试我的内联 javascript 代码。我们是否有任何 chrome 调试工具功能，我可以使用它来调试我的内联 javascript 代码。

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

PS：我所说的内联javascript代码，是指在body标签和同一个文件中的JS代码。

【问题讨论】：

你在使用debugger;语句吗？

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

How to set breakpoint in inline Javascript in Google Chrome browser for linux? 的可能重复项

【参考方案1】：

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

解决方案：

转到 chrome 开发工具中的源选项卡，您可以看到所有源 那里。 您的 html 代码将出现在类似目录中 URL 中的结构。 然后您可以打开 HTML 并在您的内联 javascript 代码中放置断点

【讨论】：

可以设置断点并且可以工作，但是当脚本在模板标签内时，铬会简单地忽略它们，不幸的是不会在断点处暂停脚本。

【参考方案2】：

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

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

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

注意：@ 替换为 # 以避免在不受支持的浏览器上出现错误

Breakpoints in Dynamic JavaScript

【讨论】：

请注意 link-only answers 是不鼓励的，所以答案应该是寻找解决方案的终点（与另一个中途停留的参考相比，随着时间的推移往往会变得陈旧）。请考虑在此处添加独立的概要，并保留链接作为参考。

@fazzyx 感谢您的链接。我也同意 kleopatra 关于答案是搜索的终点。因此，要么您应该使用相关内容更新您的答案，要么只是将链接放在评论中。

type 是不是必须在<script> 中提及，html5 建议不要使用这个？

如果你使用 html5 我想不会

【参考方案3】：

@blunderboy 如果您在 BODY 标记中包含以下类型的 JS，它将永远不会出现在您的目录结构中，因此在这种情况下，您的解决方案将不起作用。

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

这发生在 jquery mobile 中，页面 div 之外的所有内容都没有加载，因此您必须在页面 div 中包含 JS。

我会将@fazzyx 的答案标记为正确答案，因为至少 chrome 会显示这些包含的文件。