如何在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文件。您可以在调试器列表中找到该文件，并轻松设置断点或检查代码。

注意：@替换为＃以避免不受支持的浏览器出错

Breakpoints in Dynamic JavaScript

Answer 2

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

<强>解决方案：

• 转到chrome dev工具中的source选项卡，您可以看到所有来源 那里。
• 您的HTML代码将出现在类似的目录中 您的网址中遵循的结构。
• 然后您可以打开HTML并在您的内联JavaScript代码中放置断点

Answer 3

@blunderboy如果您的BODY标记中包含以下类型的JS，它将永远不会显示在您的目录结构中，因此在这种情况下您的解决方案将无法正常工作。

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

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

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