Chrome 断点调试之条件断点和日志点

Chrome 的调试功能非常丰富，其中断点调试也有很多技巧，本文简单介绍其中的条件断点（Conditional breakpoint）和日志点（Logpoint）。

1. 以稀土掘金为例，首先打开源码，点击左下角的 {} 美化代码，便于调试。

2. 找到要打断点的代码行，点击行号，有个蓝色背景说明在这一行打好断点了。

3. 刷新页面，代码执行到这一行时就会阻塞，这时把鼠标放到打断点的这一行代码以及在这之前执行过的代码的变量上，就会显示这个变量的值。

4. 以上只是最基础的打断点，右键点击蓝色背景的行号，再点击 Edit breakpoint，这时会有是三个选项（Breakpoint、Conditional breakpoint、Logpoint），Breakpoint 就是上面我们介绍的，接下来看看 Conditional breakpoint，顾名思义就是可以编写条件的断点，满足指定条件才会触发。

5. 我们编写如下条件，条件断点的行号是黄色背景，然后刷新页面，依然在这里阻塞了，因为满足了断点的条件，如果改一下条件让执行时不满足则会直接跳过不会阻塞。

6. 接下来看看 Logpoint，顾名思义，可以打印日志，直接输出到控制台。编写如下打印内容，Logpoint 的行号背景色是粉色。

7. 刷新页面，Logpoint 不会阻塞代码执行，可以在控制台看到我们想打印的内容。

以上只是 Chrome 调试的冰山一角，甚至只是 Chrome 断点调试的一小部分，比如下图所示的源码面板右侧的各种断点笔者还未尝试过，先立个 flag 放在这吃灰。