谷歌html页面怎么打断点,如何设置断点 - Chrome 开发者工具中文文档 - html中文网...

如何设置断点

使用断点来暂停JavaScript代码，审查变量的值和在特定时刻所调用的堆栈。

一旦你设置了断点，你应该学习如何遍历你的代码，并审查你的变量和调用堆栈。

TL;DR设置断点的最基本的方法是在特定的代码行上手动添加一个断点。您也可以将这些断点配置为仅在满足特定条件时触发。

您还可以设置在满足一般条件时触发的断点，例如事件，DOM更改或未捕获异常。

在代码特定行上设置断点

当您知道要审查的语句时，在特定代码行上设置断点很有用。例如，如果您的登录流程未按预期工作，并且您的代码中只有一个函数来处理登录，那么可以安全地假设该错误可能在该函数中。在这种情况下，在该函数的第一行添加断点是有意义的。

当你在一行代码上设置断点时，代码总是会在这一行代码上暂停，直到您删除断点，禁用它，或使其有条件触发。

要在特定代码行上设置断点，首先打开Sources(源文件)面板，并在左侧的File Navigator(文件导航器)窗格中选择该脚本。如果找不到File Navigator(文件导航器)，按下Toggle file navigator(切换文件导航器)按钮(

)。

提示:如果你使用缩略的代码，点击pretty print(代码美化)按钮(

)使其可读。

在源代码的左侧，您可以看到行号。这个区域称为line number gutter(行号槽)。单击行号槽中的行号，就会在该行代码上添加一个断点。

如果一个表达式占了多行，并且你把一个行断点放在这个表达式的中间，DevTools会在下一个表达式上设置断点。例如，如果您尝试在下面截图中的第4行设置断点，DevTools会自动将断点放在第6行。