Node.js 调试
开发完一段代码，不能调试一番，总感觉不大爽，虽然我可以到处打印日志，但每到一处就写个日志，问题排查完还得再删掉，实在也太麻烦，所以我们就得需要可以调试写好的代码。当然，如此你个人对自己比较自信，写完的代码万年不会出错，那么这篇文可以跳过去了，本文是写给那些需要排查bug并且有点儿手懒不愿到处console的伙伴们的。
工具
要调试那一定得有个工具了，总不能拿手抠吧。工具当然很多啦，比如webstorm,比如node-inspect,比如Chrome的开发者工具啦，比如我们用的vscode了。我们这里讲的是node.js代码的调试，如果使用Chrome，不是不可以，总归还是有些不大方便。
Chrome
虽然Chrome可以调试node.js的代码，不过Chrome调试浏览器中的JavaScript代码确实挺方便的，这里顺带介绍一下，F12打开Chrome的开发者工具，可以看到一堆按钮和一大把面板：
-
箭头按钮
选中该按钮后，可以在页面上找到需要查找的元素，在元素上点击，可以快速切换到Elements面板中的节点位置，当然这个操作还可以通过直接在页面的元素上点击鼠标右键，选择
Inspect来完成。 -
模拟器按钮
点击切换移动端设备和桌面Web页面的调试方式，在模拟器方式，可以选择设备，网络等，甚至可以自定义分辨率。切换横屏竖屏。事实上远不止分辨率调整这些东西，它甚至还能模拟到触摸屏上面的Touch事件。
-
Elements
查看所有页面的元素，从html到body再到具体的节点元素，不管是页面上当前显示的还是隐藏的，全在这里。你还可以直接在这里编辑，撤销编辑等操作。当鼠标放在某个节点上时候，在浏览器上该元素所占的位置还会有一个背景高亮的效果。选中一个节点元素，还能查看（修改）该节点的样式（如果你愿意，你甚至可以把它当作一个样式编辑器，编辑完还可以保存），监听的事件等
-
Console
可以查看控制台的输出信息，甚至在控制台你可以直接输入一些代码。配合断点调试，非常方便。
-
Sources
当前页面加载的所有源文件，这通常会包括页面html文件，css样式文件以及JavaScript脚本文件，甚至包括所有加载的图片等都会在这个面板中列出。我们通常用它来调试JavaScript代码。我们可以打开某个JavaScript文件，添加断点，当脚本执行到断点处就会暂停，并且可以查看当前断点位置处所有变量的值以及完整的调用堆栈等。甚至可以在断点的时候在Console中执行JavaScript脚本修改变量的值。
-
NetWork
我们通过这个面板可以查看页面的所有网络请求，包括请求地址，请求头，请求内容以及响应头和响应内容等。
-
Performance
要想测试页面的执行效率或者想查找页面执行慢的原因？到这里看看吧
-
Memory
这应该是用地最少的面板了，在这里可以生成内存照相，可以详细查看页面中内存的占用情况，如果页面中有内存泄漏的情况（具体表现可能就是越来越慢），进行内存分析吧
-
Application
这里用地最多的就是查看Cookie和LocalStorage了，其它的太高深，这里不介绍
-
其它
开发时用不到，不介绍了
-
添加断点
调试Web页面的时候，我们可以在Sources文件中打开左侧Network/Filesystem面板，找到要调试的JavaScript文件，鼠标点击在右侧打开该文件，找到要调试的代码段，在代码段左侧代码行号的位置用鼠标左键单击，就可以添加或去掉断点了。
-
添加条件断点
有时候断点位于某个循环当中，这时候如果正常添加节点，那么可能要等好久才能真正定位到你想要的那个位置，这时候可以添加条件断点，具体操作方法是找到代码段，鼠标右键单击Sources面板中行号的位置，在弹出菜单中选择Add Conditional Breakpoint，输入条件回车即可，当条件满足的时候代码才会暂停执行。
-
断点处理
当代码执行到这个位置的时候，只要是开发者工具是打开状态，即使当前查看的面板不是Sources，它也会自动切换到Sources面板并且代码断在断点的位置，等候开发者进一步处理，在这时，可以通过鼠标放在某个变量上看这个时候变量的值，也可以按Esc，同时再打开一个Console面板，在Console面板中输入脚本。也可以添加某个变量或表达式到Watch。还能够切换到调用堆栈的其它位置
-
调试快捷键
- F10执行下一行代码
- F11进入当前断点处的调用函数内部
- Shift+F11直接跳出当前函数
- F8恢复正常执行。
- F5不再执行当前页面的脚本，直接刷新页面
VS code
但是，如果我们如果要调试Node.js中的代码呀，上面提到的内容是不很适用的，比如在浏览器中是没有require的，是没有fs模块的。这些如果直接在浏览器里调试的话，肯定是会出错。没有办法吗？当然有，有兴趣到这里看看.我觉得还是挺麻烦的。鉴于我们开发的时候写代码都用vscode，所以调试也用它得啦
使用vscode打开一个js文件，将光标焦点放置于该js文件当中，这时候按快捷键F5,即可启动Node.js调试，默认情况下，它会将断点断在文件开始的第一行代码处。如果没有断下，可以手动添加断点，方法有两种，一种跟Chrome调试一样，在左侧代码的行号的位置使用鼠标左键单击，就可以在该行添加一个断点，这时候，会有一个红色小圆点显示在行号的位置上，如果要取消该断点，再次点击就可以了。也可以在光标位于某一行代码的位置上的时候按下键盘的F9，同样可以进行断点的设置和取消操作。
当断点断下的时候，vscode左侧的面板会自动切换（默认为在vscode打开后第一次进行调试的时候才会这样）到调试（带有个虫子的图标）面板，这里会显示变量，监视，调用堆栈以及断点等内容。
-
变量：
断点位置作用域可见的所有变量的值，它们的个数和值会随着代码逐行调试而不断改变。
-
监视：
有时候我们会添加一些变量（或表达式）到该面板，用来监视这些变量（或表达式）在程序运行过程中的值。
-
调用堆栈：
显示当前断点处的调用堆栈，可以查看是哪个函数调用了该函数。
-
断点：
可以使用该面板禁用，启用，删除已设置的断点。
像Chrome中一样，我们可以在断点的时候在近观台Debug Console输入一些变量（或表达式）并回车查看他们的值的打印情况，甚至可以在控制台修改某个变量的值。是不是很酷？
快捷键有点儿杂交的味道：F5启动调试和继续执行，Ctrl+F5重新开始调试，VS上我们经常这样干。F8,F10,F11用法跟Chrome上一样。实在记不清楚，调试的时候会显示一个调试工具栏，上面的图标按钮用鼠标也是一样的操作，Good Luck！
VS配置
上面讲的是不使用配置的情况，这样我觉得挺好，没有必要搞一个配置文件，很多时候，其实我们不使用复杂的配置进行调试，因为学习成本相对比较高。如果你有兴趣，自己百度一些文章来看吧，我觉得在vscode里调试在一些复杂的项目中，甚至没有直接写输出（console）来地简单。
debugger
如果你知道代码在哪儿有问题，直接在代码中键入关键字debugger进行调试也是一个不错的办法，可以非常快地断点到合适的位置，在vscode和Chrome中调试都可以使用这个办法，特别是在浏览器中调试的时候这种方法非常实用，但是，切记别用滥了，因为你在调试之后忘记删除debugger的话，也许会给别人调试页面带来一些不必要的烦恼。