学会使用“条件断点“来解放你的鼠标

（PS：对调试较为熟悉却没有使用过条件断点的同学可以直接翻到文章底部看操作的GIF图~）

一、背景

 "Debug"想必大家在开发的过程中也是有经常使用的，这里简单的介绍一下浏览器"Debug"其中的两种方式。（VScode等Ide具有的Debug不展开介绍，不过断点的方式大同小异）

1. 第一种方式是直接在代码中写上debugger关键字，当浏览器运行到该代码行时便会进入Debug状态，举个简单的例子：

function algorithm(...arguments) {
  // input key word: debugger enter to browser debug mode
  debugger;
  // something operation here
  // simple example:
  console.log("arguments", arguments);
}

algorithm(1, 2, 3, 4, 5);

 需要注意到的是：想进入浏览器的debug模式，需要提前打开控制台（右键检查或F12），再执行有"debugger"关键字的函数。

2. 第二种方式是在浏览器中打开控制台，冰打开Source（源代码）标签，在左侧的文件树中找到目标文件、并找到目标函数需要打断点的地方，在左侧的行数点击一下，当看到左侧行数变为蓝色方块即代表断点已经打上了，这时触发目标函数便可以进入断点模式，例子截图如下：

二、Debug界面介绍

 这里对Debug的界面做一个简单的介绍，正常的Debug页面将分为三个部分，左侧是文件的文件结构树，用于查找目标文件，不过在工程化开发中可能因为文件的压缩、合并等操作这个操作变得更加困难（一般推荐先使用debugger关键字找到目标文件，再使用浏览器断点的方式）。

 中间为代码部分，在这里我们可以看到文件对应的代码，同时我们也可以在此对代码打断点。右侧分为上下两个部分，上侧为Debug的操作按钮，下侧为数据相关的监控，我们可以在此看到当前函数的作用域以及其父级（闭包）作用域，同时我们可以在中间部分选中相关代码，右键添加选中项到观察区（add Selected text to watch）这样便可以在右侧观察到目标代码的值。

Debug操作按钮

 Debug有五个按钮，如上图所示，从左至右分别是：

1. 继续执行：当点击该按钮后，代码将退出Debug模式向后执行，若遇到另一个断点则重新进入Debug模式，反之则完成函数的执行。
2. 单步执行：点击单步执行按钮时，将完成当前行代码的执行，注意单步执行不会进入当前行的内部函数块，而是直接跳到下一行。
3. 进入函数调用：点击进入函数调用后将进入当前行的内部函数，并从函数头开始调试。
4. 跳出函数调用：点击跳出函数调用后将跳出当前内部函数的调试，进入到外部函数的下一行。
5. 单步执行：这个按钮也是进行单步执行，不同的是它能够进入内部函数的执行，打个比方，在目标行使用了map函数，并传入了回调函数，使用当前的单步执行将进入到map的循环中，而使用第二个按钮则不会进入。具体的大家可以自己测试。

数据控制台

 在数据的查看上，有两种方式，第一种是如图左侧所示，将鼠标悬浮到想要查看的变量上，若是一个式子，你可以通过选中（鼠标按住选中为蓝色）的方式查看。当然这种方式的前提便是需要行数执行到目标行，若该行未执行得到不到结果是非常合理的哈。

 第二种便是通过右侧的Scope（函数作用域）查看，你也可以选中目标代码，右键将它添加到Watch中，或者在控制台（Console）中执行（Evaluate）。

三、条件断点

 上述简单的介绍了调试的使用，这里讲讲本章的中心内容"条件断点"。笔者也是在近期更频繁的使用debug时偶然发现的一个调试方式，大部分的时间可能大家与我一样更习惯使用console.log进行调试。当然，大部分的场景下使用日志打印的效率不会低于Debug调试。我使用调试的情况是需要与另一个语言的代码进行逐步比对以确保"算法语言移植"的正确性，此时使用日志打印显然是一个巨大的工程。

 那么既然是算法，就经常会遇上递归、多层的循环，那么这个比对过程中发现错误，打个比方错误在循环系数i=10、j=5的时候出现误差，我们总不能通过单步执行10*n+5次来找到对应的执行查看结果吧？毕竟我们还需要对错误结果进行调整。

 此时，笔者在浏览器断点右键菜单中找到了条件断点（Edit BreakPoint/Conditional BreakPoint），打开了新世界的大门。条件断点中与我们写if语句的语法是一致的，若只有一个条件时如i===100，若有多个条件时使用&&进行条件连接。

 下面举一个双层循环的例子，假设我在i=30、j=20时代码与Matlab中的算法结果不一致，我希望直接进入该次结果进行查看，我们就可以设置条件为i===30&&j===20，这里我们使用Gif进行演示：

四、总结

 在一些可能需要多步调试或者说在特定的条件下才能进入的断点，我们可以直接通过条件断点的方式来更快的进入到目标阶段，减少了多次的"单步执行"操作，解放双手！同时我们也可以利用条件断点的方式来直接跳到第n次循环，减少多次无用的调试。