一.为什么需要调试
在进行前端开发的时候很多人都通过console.log来进行代码调试，其实这样有很多的缺点，首先log其实对正常的代码是一种侵入，如果类似的代码多了之后容易发生内存泄漏，并且也很难快速的定位问题，解决问题的速度大打折扣，其实更加正确的方法就是代码调试，也就是常说的debug，代码调试的能力能够从侧面反应一个程序员的技术水平，所以Node调试非常重要，可能这样说还不是非常的贴切，总之当你的程序出现了问题，并且在各种输出无果后，通过调试解决了问题，就会明白了，调试的重要性。
二.从认识调试按钮说起
调试的第一步就是先要知道调试按钮是如何使用的，不同工具中的调试按钮不完全一样，但是基本大差不差，所以我们会讲解我们前端最常用的VSCode中调试按钮的用法，理解不同调试按钮的作用才能更好的去调试自己的代码，如果不了解不同调试按钮的特点，可能你会很疑惑为什么😳在调试的时候突然进去到了不知名代码中，能不能不要进去方法中啊😫，这些疑惑当你了解了不同按钮的特点之后将会迎刃而解，这一定是你学会调试的第一步。
首先我们先来认识下VSCode的调试按钮的各种不同功能：
继续执行按钮：这个按钮的作用是继续执行，具体的作用是从当前断点执行到下一个断点。
下一步按钮：这个按钮的作用是执行下一行，如果在debug的时候只想一步一步的向下执行，不进入任何自定义方法或者系统类库方法可以使用这个按钮。
进入方法按钮：这个按钮是最全的debug，点击这个按钮不仅仅会进入自定义方法，而且可以进入系统方法
跳出方法按钮：这个按钮的作用是当通过上一个按钮进入了某个方法之后，想跳出方法可以点击这个按钮，但是会直接将整个方法执行完，简单记忆就是跳出方法并把方法执行完。
刷新按钮：如果我们想刷新重新来一遍，或者在debug的时候更改了某些代码，我们需要通过点击这个按钮进行重新刷新。
停止按钮：想要结束调试可以点击这个按钮进行停止。
三.VSCode中的配置文件
在VSCode中并不是直接就可以进行的Node的代码调试的，我们首先需要生成配置文件。
然后调试器我们选择Node程序
然后我们通过npm来启动，因为npm我已经配置过了
{
// 使用 IntelliSense 了解相关属性。
// 悬停以查看现有属性的描述。
// 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"name": "Launch via NPM",
"request": "launch",
"runtimeArgs": [
"run-script",
"debug"
],
"runtimeExecutable": "npm",
"skipFiles": [
"<node_internals>/**"
],
"type": "node"
},
{
"type": ,
"request": "launch",
"name": "启动程序",
"skipFiles": [
"<node_internals>/**"
],
"program": "${workspaceFolder}\src\main.js"
}
]
}
具体配置如上，如果想要进行其他配置可以单独进行研究使用。
四.使用LogPoint代替console
我们可以通过如下的方法给我们的代码添加LogPoint，首先我们需要选择添加记录点。
然后我们给它设置一个我们想要等代码执行到这个地方的时候打印的值，输入Enter键就添加成功了。
然后我们就可以看到当代码执行到这个地方的时候就会打印我们设置的值，是不是比console更加方便？
五.条件表达式
条件表达式故名思意就是我们希望在什么条件下断住，举个简单的例子如下的代码，如下的代码会瞬间，执行完，如果我们想要在item为c的时候断住的话 ，这个时候我们就需要使用条件断点了。
let arr = ['a','b','c','d','e']
arr.forEach(item=>{
console.log(item);
})
然后我们添加条件断点
然后选择我们需要断住的条件，按下回车添加条件断点。
然后我们就可以看到如下的效果
并且控制台打印了如下的内容，说明断点在为c的地方断住了
六.触发断点
如果你比较细心，可能你会发现当我们在设置断点的时候还有一项叫做添加触发的断点。
什么是添加触发的断点，这个断点是如何使用的？我们来举个例子
// 数据准备函数
function prepareData() {
let data = [];
for (let i = 0; i < 5; i++) {
data.push(i);
}
return data;
}
// 计算函数
function calculate(data) {
let sum = 0;
for (let num of data) {
sum += num;
}
return sum;
}
// 主程序
let preparedData = prepareData();
let result = calculate(preparedData);
console.log('计算结果:', result);
如上代码，我们想要实现一个需求，这个需求就是我们希望在preparedData执行成功或者完毕之后再激活calculate的断点进行计算函数的调试，这个时候我们就可以进行如下的设置。
这个时候当第一个断点执行到之后才会激活我们设置的第二个断点，这个方式在一般的调试下使用的不多，但是在一些特殊的条件下会使用到。
七.调试中的其他技巧
在调试控制台查看某个变量的值：
查看代码的堆栈信息：
八.其他开发工具断点调试
其实除了VSCode还有其他比较常用的开发工具我们常开发中使用的也比较频繁，其中最常用的当属Chrome浏览器，还有另外一个编辑器WebStorm和同一个公司的产品IDEA（写Java用的）接下来我们会一次讲解它们和VSCode的差异点。
这个按钮叫做Step在Window上的快捷键是F9 其实他的作用很多地方都讲了，但是我感觉都没讲清楚，其实他的作用用一句话就可以概括该走的路都会走 就是说这个按钮的功能是按照代码的逻辑顺序，逐行执行代码，效果如下：
然后就是如下的这个按钮，这个按钮的作用就是暂时使断点失效，也就是暂时断点没用了，走到具体位置也不会停住了。
除了这些Chorome中调试还需要了解的三个配置项包含：
Pause on uncaught exceptions：意为 “在未捕获的异常处暂停”。开启该选项后，当代码运行过程中抛出的异常没有被 try...catch 语句捕获时，调试器会暂停程序的执行，定位到抛出异常的代码行，主要用于定位导致程序崩溃或无法正常运行的错误源头。当程序因为未处理的异常而停止工作时，该选项能帮助开发者快速找到异常抛出的位置，分析错误原因。
function doSomething() {
// 这里会抛出未捕获的异常
throw new Error('这是一个未捕获的异常');
}
doSomething();
开启 Pause on uncaught exceptions 后，调试器会在 throw new Error('这是一个未捕获的异常'); 这一行暂停。
Pause on caught exceptions：意为 “在捕获到的异常处暂停”。开启此选项后，只要代码中的 try...catch 语句捕获到异常，调试器就会暂停程序执行，定位到 catch 代码块的起始处，侧重于调试异常处理逻辑。在复杂的代码中，异常处理机制可能存在问题，开启此选项可以让开发者在异常被捕获的瞬间暂停程序，检查异常对象、相关变量的值以及异常处理的具体流程是否符合预期。
try {
// 这里抛出异常
throw new Error('这是一个被捕获的异常');
} catch (error) {
// 开启 Pause on caught exceptions 后，调试器会在此处暂停
console.log('捕获到异常:', error.message);
}
只要异常被 try...catch 语句捕获就会触发调试器暂停。
Don't pause on exceptions：(可能有的浏览器没有这个选项) 当开启 Don't pause on exceptions 选项后，在代码运行过程中，无论出现未捕获的异常还是被捕获的异常，调试器都不会因为异常的出现而暂停程序的执行。程序会按照正常的流程继续运行，就好像开发者没有开启调试模式一样，异常会按照代码中既定的逻辑（如果有处理逻辑）进行处理，或者导致程序崩溃（如果没有处理逻辑）
这个是IDEA中的调试面板，其实红色下箭头就相当于是VSCode中的下箭头，但是不同点是多了蓝色下箭头，他的功能是可以进入自定义方法，但是不会进入系统方法，如果使用WebStorm按钮其实是和VSCode的一样的，这个了解即可，当遇到了会用就达到了目的。
九.内容总结
🌀本文主要讲解了我们为什么要调试Node代码而不是直接使用console因为直接使用打印会有很多的代码侵入，如果在上线的时候忘记很可能会造成内存泄漏等问题，然后我们先从VSCode的调试工具说起，我们讲了调试工具中的各种按钮的作用，这就是先利其器🔪，学会工具的使用才能更改好的对代码进行调试，然后我们就介绍了，如何在VsCode中添加调试的配置文件，以及LogPoint来代替console除此之外我们还学习了条件断点，触发断点，以及查看堆栈，和调试控制台输出等内容，相信学习了这些内容，你的技术会更上一层楼。
