一、背景

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

第一种方式是直接在代码中写上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"关键字的函数。

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

二、Debug界面介绍

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

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

Debug操作按钮

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

继续执行：当点击该按钮后，代码将退出Debug模式向后执行，若遇到另一个断点则重新进入Debug模式，反之则完成函数的执行。
单步执行：点击单步执行按钮时，将完成当前行代码的执行，注意单步执行不会进入当前行的内部函数块，而是直接跳到下一行。
进入函数调用：点击进入函数调用后将进入当前行的内部函数，并从函数头开始调试。
跳出函数调用：点击跳出函数调用后将跳出当前内部函数的调试，进入到外部函数的下一行。
单步执行：这个按钮也是进行单步执行，不同的是它能够进入内部函数的执行，打个比方，在目标行使用了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进行演示：