当我在谷歌浏览器中打开开发人员工具时，我看到了各种功能，如配置文件、时间线和审核，但缺少基本功能，例如能够在 js 文件中以及在 html 和 javascript 代码中设置断点！我尝试使用 javascript 控制台，它本身就有问题——例如，一旦遇到 JS 错误，除非我刷新整个页面，否则我无法摆脱它。有人可以帮忙吗？
如何在 Google Chrome 的内联 Javascript 中设置断点？
IT技术
javascript
debugging
google-chrome
2021-01-15 05:06:29
6个回答
您是在谈论<script>标签内的代码，还是像这样的 HTML 标签属性中的代码？
<a href="#" onclick="alert('this is inline JS');return false;">Click</a>
无论哪种方式，这样的debugger关键字都会起作用：
<a href="#" onclick="debugger; alert('this is inline JS');return false;">Click</a>
注意debugger如果开发工具没有打开，Chrome 不会在s 处暂停。
您还可以在 JS 文件和<script>标签中设置属性断点：
- 单击源选项卡
- 单击“显示导航器”图标并选择一个文件
- 双击左边距中的行号。相应的行将添加到Breakpoints面板 (4)。
使用源选项卡，您可以在 JavaScript 中设置断点。在其下方的目录树中（其中带有向上和向下箭头），您可以选择要调试的文件。您可以通过按同一选项卡右侧的恢复来摆脱错误。
您还可以为脚本命名：
<script>
... (your code here)
//# sourceURL=somename.js
</script>
当然，将“somename”替换为某个名称；) 然后您将在 Chrome 调试器中的“Sources > top > (no domain) > somename.js”中看到它作为普通脚本，您将能够像其他脚本一样调试它
刷新包含脚本的页面，同时在脚本选项卡上打开开发人员工具。这将在文件列表中添加一个（程序）条目，该条目显示页面的 html，包括脚本。从这里您可以添加断点。
另一个直观的简单调试技巧，尤其是 ajax 返回的 html 中的脚本，是将 console.log("test") 临时放在脚本中。
触发事件后，打开开发人员工具中的控制台选项卡。您将看到源文件链接显示在“测试”调试打印语句的右侧。只需单击源（类似于 VM4xxx），您现在就可以设置断点。
PS：此外，如果您使用的是 chrome，您可以考虑放置“调试器”语句，就像@Matt Ball 所建议的那样