断点类型
使用场景
代码行
在确切的代码区域中
条件代码行
在确切的代码区域中，且仅当其他一些条件成立时
DOM
在更改或移除特定 DOM 节点或其子级的代码中
XHR
当 XHR 网址包含字符串模式时
事件侦听器
在触发 click 等事件后运行的代码中
异常
在引发已捕获或未捕获异常的代码行中
函数
任何时候调用特定函数时
1. 代码行断点
直接点击
这是使用最多的一种断点方式，在知道需要检查的确切代码区域时，可以使用代码行断点。 DevTools 始终会在执行此代码行之前暂停。
debugger
在代码中调用 debugger 可在该行暂停。 此操作相当于使用代码行断点，只是此断点是在代码中设置，而不是在 DevTools 界面中设置。
console.log('a'); console.log('b'); debugger; console.log('c');
条件代码断点
如果知道需要调查的确切代码区域，但只想在其他一些条件成立时进行暂停，则可使用条件代码行断点。若要设置条件代码行断点：
点击 Sources 标签。
打开包含您想要中断的代码行的文件。
转至代码行。
代码行的左侧是行号列。
右键点击行号列。
选择 Add conditional breakpoint。
代码行下方将显示一个对话框。
在对话框中输入条件。
按Enter 键激活断点。 行号列顶部将显示一个橙色图标。
2. DOM更新断点
如果想要暂停更改 DOM 节点或其子级的代码，可以使用 DOM 更改断点。若要设置 DOM 更改断点：
点击 Elements 标签。
转至要设置断点的元素。
右键点击此元素。
将鼠标指针悬停在Break on 上，然后选择 Subtree modifications、Attribute modifications 或 Node removal。
modifications： 在移除或添加当前所选节点的子级，或更改子级内容时触发这类断点。在子级节点属性发生变化或对当前所选节点进行任何更改时不会触发这类断点。
Attributes modifications：在当前所选节点上添加或移除属性，或属性值发生变化时触发这类断点。
Node Removal：在移除当前选定的节点时会触发。
4. XHR/Fetch断点
如果想在 XHR 的请求网址包含指定字符串时中断，可以使用 XHR 断点。 DevTools 会在 XHR 调用 send() 的代码行暂停。
注：此功能还可用于 Fetch 请求。
例如，在您发现您的页面请求的是错误网址，并且您想要快速找到导致错误请求的 AJAX 或 Fetch 源代码时，这类断点很有用。
若要设置 XHR 断点：
点击 Sources 标签。
展开 XHR Breakpoints 窗格。
点击 Add breakpoint。
输入要对其设置断点的字符串。 DevTools 会在 XHR 的请求网址的任意位置显示此字符串时暂停。
按 Enter 键以确认。
这样就可以拦截包含getUserInfo字符串的请求，如果添加一个空的，则可以拦截所有请求！
5. 事件侦听器断点
如果想要暂停触发事件后运行的事件侦听器代码，可以使用事件侦听器断点。 您可以选择 click 等特定事件或所有鼠标事件等事件类别。
我们一开始使用的例子就是事件侦听器断点，这里就不演示了。
6. 异常断点
如果想要在引发已捕获或未捕获异常的代码行暂停，可以使用异常断点。
点击 Sources 标签。
点击 Pause on exceptions 引发异常时暂停 {:.devtools-inline}。 启用后，此按钮变为蓝色。
（可选）如果除未捕获异常以外，还想在引发已捕获异常时暂停，则勾选 Pause On Caught Exceptions 复选框。
7.函数断点