使用VSCode已经很长时间了，但是从来没用过它自带的debugger功能，这几天从网络上查了一些资料，了解了一些。
其中过程有些杂乱，看了很多篇相关的文章，大都是简单明了的描述了配置信息，对于几个关键点，并没有明确的指出，也可能是我有些呆滞，没能想通这些小细节，我要将我遇到的关键点分享出来，希望能帮助到其他人。
首先，绝大部分相关文章称需要先下载插件 JavaScript Debugger 如下图所示
在扩展商店搜索 debugger 之前版本的插件已经废弃了，通过废弃插件的详情中可以看到提示，通过点击废弃插件的提示信息跳转过去(上图右侧橙色框内的蓝色链接文字)，可以跳转到一款官方内置插件的描述页面。如下图所示
所以简单使用 VSCode 的debugger功能，是不需要额外下载插件的，其本身就有内置的。但话说回来这几个插件都是 Microsoft 官方的，具体功能差异，我尚未了解。也许其他文章提到的插件功能比内置的更好用。
然后，需要配置debugger的配置项，如下图所示
点开debugger侧边栏，发现有很多按钮，大部分我也不晓得具体功能，单击第一个绿色的图标的效果和单击橙色框内的蓝色链接图标的效果是一致的，都会出现下图所示的交互框。
其中 NodeJS 的调试和 Vue 框架的调试有所不同，本文只单描述后者。此外还可以选择 FireFox 等不同的浏览器调试,本文中只以 Chrome 为例
单击橙色框，出现下图所示的界面
要修改的参数其实并不多， 都在 configurations 中，关于其中的配置项的意义，下面链接这位大哥已经写的很清楚了
如下图所示是简单能跑的配置信息
关键点在于
url需要是你启动项目的入口地址webRootdebugger是通过source-map映射出源码和经过webpackbabel等处理后的关系实现连接的， 这个参数也相当于alias吧，可以根据需求配置不同的参考路径，可以去上文 配置信息详解 中查看。sourceMapPathOverrides这部分相当重要，我在这里的映射中浪费了大量的时间，其他大部分的文章和我上图的配置信息不一致，他们没有区分.vue和.js这导致了无法在js文件中无法进行debugger断点映射。
关于第三点也是在网络上看了一个大哥的文章，才跑通的，等明天放链接
还有最后一点，需要在 vue.config.js 中配置 devtool: "source-map", 此配置项，这在其他文章中都有描述。
我踩的坑就是上文所说的第三个关键点，以及配置了最后一点后，没有 保存 且没有 重启项目 导致我一直迷糊哪里不对，断点无法映射。
哎，随手 Ctrl + S 且 配置项改动后一定要重启， 一定要养成好习惯，下意识的去做，不然事一多，脑子一烦，就容易犯傻。麻了！
哎，我突然发现掘金的网页编辑 Ctrl + S 不会下载页面，嗯~ 好评！
有问题欢迎留言~
2240104晚
0240109早 补充: 在 Vue 项目中,未加载的 .vue 文件添加断点是不会被绑定的.
