Chrome 的多种断点方式

1. 断点

在 Chrome 的 dev tools 里面断点是有多种方式的，但是最简单的断点方式对于调试一些 race condition 的代码是有负面影响的，特别是多重断点对于调试流程阻碍性很强。
那么就需要一些新的方式来组合使用保证调试到目标逻辑代码。

2. 代码断点

右键对应的行数，有相关菜单功能出来

1.Add breakpoint

最简单的基础断点功能

2. Add conditional breakpoint

具备条件执行断点功能的断点方式，允许通过调用执行代码环境的变量判断是否需要断点。

表达式的执行允许修改变量的值

a = 5 && false

3. Add logpoint

日志断点，类似条件断点的 console.log({expression}) && false, 始终不会断点，但是可以不断输出环境里面的变量和计算的值。

3. 断点工具栏

断点控制栏，除了常见的暂停、return 等功能，我们可以看到还有最右边两个功能

1. Deactivated breakpoint

禁止所有的断点

2. Pause on exceptions

当发生 uncaught exceptions 时，将会直接断点。
如果勾选了 Pause on caught exceptions 时，只要碰到 throw 关键字，会自动断点。

4. 网络断点与事件断点

1. 网络断点

网络断点将在发起网络请求的时候直接断点住对应代码，目前最大的作用是断点后修改其参数来实现一些目的。

2. 事件断点

目前来说事件断点在 react fiber 的实现下功能并没有特别大的用处，但是对于一些原生调试还是有用的。

5. Dom 断点

Deactivated breakpoints 对 dom 断点无效
Dom 断点是一个特殊的功能，对于一些实现奇葩的情况下是可以直接找到修改 dom 代码的源头进行追踪代码的。
使用方式

1.Subtree modifications
当 children 发生变化的时候，将会断点到对应的代码
2.Attribute modifications
当 dom 属性发生变化的时候，将会断点到对应的代码
3.Node removal
当被选择的 dom 被删除的时候（如果是父级 dom 删除不算），将会断点到对应代码调用栈