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

Question

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

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

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

PS：通过内联javascript代码，我的意思是在body标签和同一个文件中的JS代码。

Answer 1

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

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

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

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

动态 JavaScript 中的断点

Answer 2

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

解决方案：

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

Answer 3

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

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

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

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