Chrome DevTools 断点调试方法和技巧

一、不同的breakpoint类型

注: 最著名的断点类型是line-of-code(就是确定的一行下断点)。但是设置代码行断点可能效率低下，特别是如果不知道确切的位置，或者正在使用大型代码库。通过了解如何以及何时使用其他类型的断点，可以节省调试时间。

断点类型	当你想Pause(暂停)的时候使用
Line-of-code(代码行断点)	代码具体某一行(其实就是没法在代码左边点出一个蓝点来)
Conditional line-of-code(条件代码行断点)	在代码的确切区域上，但仅在某些其他条件为true时。
DOM	在改变或者移除一个DOM节点或者它的DOM子节点时
XHR	当一个XHR URL包含一个string pattern
Event Listener	在运行了某个特定事件后的代码上，例如click事件触发

代码行断点:

当知道需要调查的确切代码区域时，请使用代码行断点。DevTools总是在这行代码执行之前暂停。

在 DevTools 中设置代码行断点：

1. 单击source选项卡。
2. 打开包含要中断的代码行的文件。
3. 转到代码行。
4. 代码行的左侧是行号列。点击它。行号列的顶部会出现一个蓝色图标。
   在第29行设置的代码行断点

条件代码行断点:

当知道需要调查的确切代码区域时，使用条件代码行断点，但只想在其他条件为真时暂停。

在 DevTools 中设置条件代码行断点：

1. 单击source选项卡。
2. 打开包含要中断的代码行的文件。
3. 跳到那一行
4. 代码行的左侧是行号列。右键单击它。
5. 选择Add conditional breakpoint。一个对话框会出现在那一行代码的下面。
6. 在对话框中键入条件
7. 按下enter去激活breakpoint。一个橘色icon会出现在左边。

Add breakPoint是普通的行级断点，Add conditional breakPoint是有条件的行级断点。Never Pause Here会让这里永远不进断点。

DOM:

当想暂停更改 DOM 节点或其子节点的代码时，请使用 DOM 更改断点。

在 DevTools 中使用DOM 断点：

1. 单击Elements 选项卡。
2. 选中我们想为其设置breakpoint的元素
3. 右键单击该元素。
4. 悬浮在Break on上，选择Subtree modifications，Attribute modifications或者Node removal。

• Subtree modifications 当当前选中的节点的child被移除或新增时触发，或者是child的内容发生改变时。在child的节点属性发生变化时不会触发，或者当前节点改变时不会触发。（亲测当自己被移除时都不会触发）
• Attributes modifications 当当前选中的节点新增属性，移除属性，或者属性值发生变化时触发。
• Node Removal 当当前选中的节点被移除时触发。

XHR/Fetch breakpoint:

XHR的请求URL包含指定字符串时，使用XHR中断。当XHR调用send()方法时在对应行暂停。
注意：这个特性同样作用于Fetch请求。

在XHR/Fetch上打断点的场景，非常适用于请求一个不正确的URL，而且你想很快找到AJAX或者Fetch 源代码去发现导致错误请求的原因。

在 DevTools 中使用XHR 断点：

1. 单击source选项卡。
2. 展开右侧XHR/Fetch Breakpoints
3. 单击Add breakpoint
4. 键入你想断点的string。DevTools会在string出现在任何XHR的请求的URL时进入断点
5. 按下Enter进行确认

注意:只有当Type为script类型才能进行xhr断点。

Event Listener breakpoints:

如果要暂停事件触发后运行的事件侦听器代码，请使用事件侦听器断点。我们可以选择特定的事件，例如click事件；或者事件类别，例如所有的鼠标事件。

第一种方式-在 DevTools 中使用Event Listener breakpoints:断点：

1. 单击source选项卡。
2. 展开Event Listener Breakpoints面板。DevTools展示了一个事件目录的列表，例如Animation。
3. 选中这些事件类别中的一个做断点，这个断点会在事件触发时进入，或者是选择事件类别下的一个或多个做断点。

第二种方式-在 DevTools 中使用Event Listener breakpoints:断点：

1. 单击Elements 选项卡。
2. 选择右侧的Event Listeners
3. 选择事件进行断点

这种好处直接可以跳转到触发事件之后的代码，可以进去之后进行相应的Add Break Point

二、source 面板详解

1、source断点工具栏

2、左侧面板

2.1 Page

已加载的全部资源，以域名划分文件夹，ctrl+p 进行搜索。

2.2、 Snippets

代码片段，不会因为刷新丢失，使用：添加=>保存(ctrl+s)=>运行(Run)=>不用则移除(Remove)

Filesystem & Overrides 可以加载本地文件夹

Content scripts 谷歌扩展工具的脚本

2.3、Overrides

本地文件覆盖线上文件，需要保持和线上文件夹结构一致，这个功能可以替换网站的JS文件，对逆向JS有着很好的效果。

三、右侧面板

3.1、Watch

变量监察：添加个变量后会一直监察这个变量的值。断点时可监测相应变量进行观察。

3.2、Call Stack

函数调用栈: 打上断点刷新页面，会显示调用该函数的执行顺序，依次由下往上。

3.3、 Scope

作用域：显示断点所在的作用域，级别划分如下：

• Local 当前作用域(展开时作用域下的变量)
• Closure (x) 闭包作用域，x是函数名称
• Script 标签作用域
• Global 全局作用域Window

3.4、Breakpoints

显示断点位置和信息

3.5、XHR/fetch Breakpoints

请求断点：ajax和fetch请求都可以在这里打断点并在Call Stack显示调用栈，很方便追踪

3.6、Global Listeners

全局监听器：指的是绑定在 window 对象上的事件

3.7、Event Listeners Breakpoints

所有事件的断点：勾选指定类型，比如Mouse/click，则所有的click事件都会被断住