当我在谷歌Chrome中打开开发人员工具时,我看到了各种各样的功能,如配置文件,时间线和审计,但基本功能,如能够在js文件和html和javascript代码中设置断点是缺失的!我尝试使用javascript控制台,它本身就有bug——例如,一旦遇到JS错误,除非刷新整个页面,否则我无法摆脱它。有人能帮忙吗?


当前回答

你必须将type="text/javascript"添加到脚本块中,以便将它们作为脚本拾取。例如: <script type="text/javascript">…你的代码在这里…> < /脚本

其他回答

在脚本选项卡上打开开发人员工具时,刷新包含脚本的页面。这将在文件列表中添加一个(程序)条目,显示页面的html(包括脚本)。从这里可以添加断点。

我也有同样的问题,如何调试JavaScript是在<script>标签。但后来我在Sources选项卡下找到了它,名为“(index)”,带圆括号。单击行号以设置断点。

这是Chrome 71。

如果你看不到“脚本”选项卡,请确保你启动Chrome时设置了正确的参数。当我用参数——remote-shell-port=9222启动Chrome调试服务器端JavaScript时,我遇到了这个问题。我没有问题,如果我启动Chrome没有参数。

调试ajax返回的html内部脚本的另一个直观的简单技巧是临时将console.log("test")放在脚本中。

触发事件后,打开开发人员工具中的控制台选项卡。 您将看到源文件链接显示在"test"调试打印语句的右侧。只需单击源代码(类似VM4xxx),现在就可以设置断点了。

附注:此外,你可以考虑把“调试器”声明,如果你正在使用chrome,就像什么是由@Matt球的建议

您谈论的是<script>标记中的代码,还是HTML标记属性中的代码,就像这样?

<a href="#" onclick="alert('this is inline JS');return false;">Click</a>

无论哪种方式,像这样的调试器关键字都可以工作:

<a href="#" onclick="debugger; alert('this is inline JS');return false;">Click</a>

注意:如果开发工具没有打开,Chrome不会在调试器上暂停。


你也可以在JS文件和<script>标签中设置属性断点:

单击Sources选项卡 单击Show Navigator图标并选择文件 双击左侧空白处的a行号。相应的行被添加到Breakpoints面板(4)。