前言
在之前写的一篇以launch.json为主的vscode基础介绍之中，我们已经可以在很多场景的node代码中去进行调试了。但有的时候，我们有的时候需要掌握更多的方法，更加灵活方便的去进行调试，官方文档和大部分文章往往比较散乱并且省略了不少细节。让大家的学习和理解没那么顺畅，这里小鹅就用最简单的方式，一篇文章让大家大多数的情况下都可以按照自己想法达到调试效果。也可以结合之前的文章一起看下，理解更全面哦～
两个调试环境
在这里我介绍两个我平时最常用的两个调试环境，vscode和Chrome devtools。大家可以都了解学习一下之后，按照自己的情况和喜好灵活使用
vscode环境调试
vscode相信已经成为绝大部分前端开发工程师必备的ide，也是我平时最常用的，其实最喜爱的就是它不断进步的丰富功能
下边介绍一个我平时最常使用的，调试方法： auto-attach
开启
我们要如何开启它呢？
在我们的vscode中，按住(shift+command+p) 就可以调出这个面板
看到这个面板大家应该就会觉得比较熟悉了，它可以设置我们很多相关的命令配置
我们输入 auto attach 可以找到相应的配置，如下
我们如果之前没有操作过，它一般都会选中 “已禁用”，这个时候我们把选项选择到“智能”
使用
当我们打开这个配置的时候，我们很简单就可以进入相应的debugger程序了
比如,我们在本地调试一个算法题，如下
我们在打了debugger之后，只是很简单的运行，就进入了调试，是不是很简单呢？少了一些多余的配置
tip1 ：如果无效可以在目录npm init 一下，生成相应json继续尝试
tip2: 如果我们不想继续调试可以把之前的配置重新设置成禁用哦
Chrome devtools调试
在一些同学更习惯于用chrome调试或者前一种情况不通的情况下，可以用第二种方法
比如一个和之前差不多的场景，我们同样打了debugger，打开chrome如下
有些同学可能一下不解，为什么我的debugger出来就是一堆很复杂的代码，我看不懂？
这往往是因为你的代码经过了打包，那如何让它在chrome上显示出我们能看懂的样子呢？
这就牵扯出一个你听过但可能不是很了解的词：sourceMap
简单说它就是一个记录了我们文件位置标注的文件，可以在我们chrome里看到原本的样子，更多了解可以看下阮一峰老师的这篇文章
如果我们打包的文件下方，有相应的sourcemap的文件就可以。
我这里例子是用parcel打包的，默认就生成了sourcemap文件
有很多同学是用webpack进行打包的话，需要确认你在webpack.config.json文件里有 设置 devtool: 'source-map' ，就可以用此模式进行打包了，更多相关可以看下官网的这个位置
总结
此篇算是上一篇的一个补充，在大家更加理解之后就可以用更随心所欲的方式进行调试了～ 加油！ 有问题评论区交流哦
如果对你有帮助的话，点个赞吧，彦祖
