Chrome浏览器提供了很多功能来调试代码。平时用得最多的是代码行/debugger调试，除了代码行调试，还有哪些方式？本文整理了以下7种：
1.DOM节点
位置：Elements - 左侧，html结构中选中dom标签-右键设置breakpoint。
// 可设置3种breakpoint：
Subtree Modifications // 当前节点，增删改子节点时触发
Attributes Modifications // 当前节点，增删改属性时触发
Node Removal // 当前节点，被删除时触发
在dom节点处，右键设置breakpoint。这里设置了Attributes Modifications，节点属性改变时触发。
点击“百度一下”后触发，进入断点的代码区。
2.DOM事件
位置：Elements - Event Listeners栏
取消Ancestors勾选 // 仅展示当前节点绑定的事件
取消Ancestors勾选，可以看到当前节点绑定的事件。
红圈部分是文件信息，点击即可进入。可结合代码行断点使用。
绑定事件的代码位置。
3.浏览器事件
位置：source右侧-Event Listener Breakpointer栏。
全局事件都会触发
浏览器提供的事件，如图。
例子勾选了Canvas-Create canvas context，在页面创建Canvas时触发。
4.代码行
位置：Sources-具体文件-指定行
手动去浏览器source查看代码，并添加断点
可以设置断点的条件
在代码行，鼠标左键点击一下。如上图的 46行，点击“46数字这个位置”。
可以给当前行设置条件，是否进入该断点的条件。
这里设置了false，断点时会被跳过。
5.debugger
位置：源代码，添加debugger。
在源代码中添加debugger，浏览器会自动添加“断点”。
效果同（第4），不展开说了。
6.XHR请求
位置：Sources-右侧-XHR/fetch Breakpoints
点击‘+’，添加匹配规则；匹配请求的地址，或任意地址。
检查请求的参数是否正确，复制地址后，进行地址匹配。
断点会在send处暂停，可以结合call stack和Network使用。
添加xhr请求的地址，这里例子输入的是“mcp/pc/pcsearch”
点击“百度一下”，触发的请求匹配上“mcp/pc/pcsearch”，进入断点的代码区。
右侧的Call Stack是方法栈，可以看到请求前，执行过的方法，可以配合使用。
7.异常捕获
位置：souce右侧-Breakpoins栏
Pause on uncaught exceptions // 未获取异常断点
Pause on caught exceptions // 获取异常断点
勾选了Pause on caught exceptions，这里断点了jQuery的异常。
