各类断点使用时间概览
最广为人知的断点类型是代码行断点。 但是,如果您不知道在何处查找,或者您处理的是大型代码库,则无法高效设置代码行断点。 了解如何使用及何时使用其他类型的断点后,即可在调试时节省时间。
如需了解调试流程的实践教程,请参阅在 Chrome DevTools 中调试 JavaScript 入门。
断点类型 | 在以下情况下暂停时可使用此断点类型 |
---|---|
代码行 | 在确切的代码区域中 |
条件代码行 | 在确切的代码区域中,且仅当其他一些条件成立时。 |
DOM断点 | 在更改或移除特定 DOM 节点或其子级的代码中。 |
XHR断点 | 当 XHR 网址包含字符串模式时。 |
事件侦听器 | 在触发 click 等事件后运行的代码中。 |
异常 | 在引发已捕获或未捕获异常的代码行中。 |
函数 | 任何时候调用特定函数时。 |
一、JavaScript代码行断点调试
适用场景:在需要确切调查的代码区域,可以使用JavaScript代码行断点调试。DevTools会在执行此代码之前进行断点暂停。
在 DevTools 中设置代码行断点方式:
- 在Sources 标签,打开包含您想要中断的代码行的文件。
- 在文件左侧是代码行号列,单点击可设置代码断点,出现蓝色图标
- JavaScript调试图标概览说明,开发模式点击 Sources 标签,可以进行操作对应图标进行调试,图标如下:
- 现在从图标的左到右分别进行说明,如下:
- Pause/Resume script execution:暂停/恢复脚本执行,触发会进行程序执行到下一断点停止或无下一个断点。