正确配置源代码映射和异常捕获机制可显著提升VSCode调试体验。首先在TypeScript项目中启用sourceMap与inlineSources，构建工具如Webpack或Vite也需配置对应sourcemap选项，并通过调用栈跳转验证映射有效性。接着在launch.json中设置outFiles、sourceMaps和webRoot等字段，确保生成文件与源码路径正确映射。同时启用stopOnException、showAsyncStacks及runtimeArgs支持，增强异步错误捕获能力。最后利用skipFiles、autoAttachChildProcesses等优化项，避免进入第三方代码并自动附加子进程，结合trace日志排查配置问题，实现高效精准的调试流程。
在使用 VSCode 进行开发时，尤其是涉及编译型语言（如 TypeScript、Sass）或打包工具（如 Webpack、Vite）的项目，调试体验的好坏很大程度上取决于源代码映射（Source Map）和异常捕获机制是否配置得当。合理设置这些选项，可以让你直接在原始源码中打断点、查看调用栈，并精准定位运行时错误。
启用并验证源代码映射
源代码映射（Source Map）是连接生成代码与原始源码的桥梁。若未正确启用，断点将无法命中，调试器也无法显示真实变量值。
确保以下几点：
- TypeScript 项目：在 tsconfig.json 中启用 "sourceMap": true 和 "inlineSources": true。后者能将源码内联到 map 文件中，便于脱离原始目录调试。
- 构建工具配置：Webpack 应设置 devtool: 'source-map'；Vite 推荐使用 build.sourcemap: true。
- 验证映射有效性：启动调试后，在 VSCode 的“调用栈”面板点击函数，查看是否跳转到 .ts 或 .jsx 文件而非 .js。若跳转失败，说明 Source Map 路径解析有问题。
配置 launch.json 精准定位源码
VSCode 的调试行为由工作区下的 .vscode/launch.json 控制。针对不同环境需调整路径映射。
常见关键字段包括：
- outFiles：指定生成文件路径，例如 "outFiles": ["${workspaceFolder}/dist/**/*.js"]，帮助调试器加载对应 map 文件。
- sourceMaps：设为 true 启用自动查找 map 文件。
- resolveSourceMapLocations：限制 map 文件的合法来源路径，增强安全性并避免误匹配。
- webRoot（前端项目）：映射服务器根路径，如 "webRoot": "${workspaceFolder}/src"，解决浏览器调试中路径不一致问题。
捕获异步与未处理异常
默认情况下，调试器可能忽略 Promise 拒绝或异步堆栈，导致问题难以追踪。
可通过以下方式增强异常捕获能力：
- 在 launch.json 中添加：
"stopOnEntry": false,
"stopOnException": true,
"showAsyncStacks": true
启用异步调用栈展示，让 debugger 显示完整的异步链路。 - Node.js 环境下，添加 "runtimeArgs": ["--enable-source-maps"]，使原生错误堆栈支持 source map 解析。
- 浏览器调试场景中，可在 breakpoints 面板勾选“Uncaught Exceptions”和“Caught Exceptions”，实现全面异常中断。
优化调试体验的小技巧
提升效率不止于基础配置，一些细节设置能让调试更顺畅。
- 使用 "skipFiles" 忽略 node_modules 或第三方库代码，防止意外跳入无关上下文。
- 开启 "autoAttachChildProcesses": true，自动附加 fork 的子进程，适用于 cluster 模式或多进程服务。
- 结合 console.log 调试时，启用 "trace": true 输出调试器内部日志，排查 launch 失败原因。
基本上就这些。一套合理的调试配置能大幅减少“为什么断点没生效”“错误来自哪一行”的困扰。关键是根据项目结构匹配 source map 输出，并在 launch.json 中精确控制路径与行为。不复杂但容易忽略。
