上次卡在后端接口报错半天，翻了一堆零散帖子，才搞懂vscode怎么调试，一开始以为点那个虫子图标就能直接跑，结果点进去一片空白，连启动配置都没有。
vscode调试配置文件
打开左侧边栏那个虫子样式的调试面板，顶部会弹出创建launch.json的选项，选对应语言环境，我当时写的是nodejs代码，就挑了Node.js。生成的文件会放在项目根目录的.vscode文件夹里面，很多人会忽略这个文件夹，直接把配置写在别的地方，调试就一直失效。
路径写错，是最常踩的坑。
program字段要填你入口文件的相对路径，比如"${workspaceFolder}/index.js"，别直接复制本地绝对路径，换电脑或者挪项目文件夹，配置直接作废。还有request类型，选launch就是每次从头启动程序，attach是挂载到已经跑起来的进程上，新手优先用launch就行。
vscode调试断点操作
代码行号左边空白位置，单击一下，会出现红色圆点，这就是断点。程序运行到这一行的时候会停下，不会继续往下执行。红色圆点要是变成灰色空心，代表断点没生效，大概率是文件路径和配置里面对不上，或者代码没有被实际加载。
调试启动之后，顶部会弹出一排控制按钮，几个按键作用分得很清楚。
- 继续：跳到下一个断点
- 单步跳过：执行当前行，不进入内部函数
- 单步进入：点进调用的函数内部查看代码
- 单步跳出：从当前函数返回上层代码
- 重启：重新启动调试会话
- 停止：终止程序
侧边栏的变量面板可以实时看当前作用域里所有变量的值，监视面板可以手动输入表达式，持续观察指定变量变化，调用堆栈面板能看到代码一层一层的调用顺序，定位报错源头很方便。
vscode调试遇到的异常问题
| 现象 | 原因 | 处理方式 |
|---|---|---|
| 断点灰色无效 | 代码文件路径不匹配 | 核对launch.json的program路径 |
| 点击启动无反应 | 缺少运行环境 | 安装对应语言的运行时和插件 |
| 断点命中但变量看不到 | 源码映射没配置 | 添加sourceMap相关配置 |
当时装了语言插件之后，没重启vscode，插件加载不全，调试面板一直识别不了代码类型，折腾好久才搞明白，装好插件最好重启一次编辑器，省去很多莫名其妙的问题。还有就是不要同时开多个调试会话，新的调试任务启动前，把上一个调试进程关掉，不然端口占用，程序启动失败。
不要一次性打一堆断点，代码跑起来会频繁中断，思路很容易乱。优先在怀疑出错的代码块前后设置断点，一步步缩小出错范围。
关掉编辑器的时候，.vscode文件夹会留在项目目录里，提交代码前记得把这个目录加到.gitignore，不然本地调试配置会上传到代码仓库，别的人拉取代码会出现路径错乱。