代码调试：你知道哪些断点方式

DOM 节点断点

DOM 节点断点有三种：

• subtree modifications
• attribute modifications
• node removal

例：下面是 attribute modifications 断点，点击按钮会移除当前按钮的 icon 类名：

DOM 事件断点

代码行断点

在 DOM 事件断点中，点击函数跳转到对应的函数执行的地方，在你想断点代码行前面点击出现蓝色图块样式就表示下断成功。

代码断点

在代码中想下断的地方输入 debugger; 即可下断。

xhr断点

只能对 xhr 进行下断，具体步骤如下：

1. 找到发送请求的 URL 之后，截取 URL 的一部分
   
2. 在 Source 面板右侧中找到 XHR/fetch Breakpoints，并添加截取的 URL 片段
   
3. 此时刷新页面就会发现已经下断成功，当请求到该 URL 时，就会在该请求处被断住
   
4. 点击调用栈 Call Stack 中的函数就可以查看请求流程。

Tips: 如果你想知道在发送 xhr 之前代码是如何对参数进行加密的，可以通过给 xhr 下断的方式并往回溯源它的调用栈来查找加密函数实现的位置。

全局事件断点

1. 在 Source 面板右侧的 Event Listener Breakpoints 中勾选你希望下断的事件
   
2. 刷新页面，如果页面中有创建 canvas 上下文的事件就被断住
   

异常捕获

1. 勾选上 Pause on caught exceptions 选项，发生错误时就会被下断
   
2. 因为这个错误是在 jquery 中，不是我们的业务代码中的错误，我们希望能跳过这个断点，可以手动给这个断点设置值为 false，表示跳过这个断点。或者右键勾选 Never pause here。
   

点击断点的第一个三角图标表示跳到下一个断点处，如果页面有很多异常就会下很多异常断点，点击这个按钮就会跳转到下一个异常断点