Source Map 能让 VS Code 在原始源码（如 TypeScript）上调试，需正确配置编译工具生成 .map 文件并在 launch.json 中设置 sourceMaps: true、outFiles 等，确保 sourceMappingURL 注释存在且路径匹配，从而实现断点与变量查看的精准映射。
在VS Code中调试JavaScript时，Source Map能让你直接在原始源代码（如TypeScript、ES6+）上设置断点并查看变量，而不是在编译后的JS文件中操作。这极大提升了开发效率。要实现这一点，关键在于正确配置编译工具和VS Code的调试环境。
理解 Source Map 的作用
Source Map 是一个映射文件，它将编译后的 JavaScript 代码反向关联到原始源码。比如你用 TypeScript 写代码，经过 tsc 编译成 JS，浏览器或 Node.js 执行的是 JS，但通过 Source Map，VS Code 能“还原”执行位置到 .ts 文件。
确保你的构建工具生成了 .map 文件，并且在输出的 JS 文件末尾包含注释：
//# sourceMappingURL=xxx.js.map这是 VS Code 识别映射关系的基础。
立即学习“Java免费学习笔记（深入）”；
配置 launch.json 支持 Source Map
在项目根目录的 .vscode/launch.json 中添加或修改调试配置，确保启用 source map 支持。
Node.js 环境调试示例：
- type: 设置为 "node"
- request: "launch" 或 "attach"
- program: 指向入口 JS 文件（如 dist/index.js）
- sourceMaps: true —— 告诉调试器尝试使用 source map
- resolveSourceMapLocations: 可指定 map 文件路径，例如 ["src/**/*.js", "dist/**/*.js.map"]
- outFiles: 指定编译后文件的路径，如 ["${workspaceFolder}/dist/**/*.js"]
浏览器调试（如使用 Chrome）可使用 "pwa-chrome" 类型，同样设置 sourceMaps: true 和正确的 webRoot。
确保构建工具正确生成 Source Map
不同的工具配置方式不同，关键是开启 sourcemap 输出。
TypeScript（tsconfig.json）：
- "sourceMap": true —— 生成 .map 文件
- "outDir": "./dist" —— 明确输出目录
- "rootDir": "./src" —— 原始源码目录
Babel 配置（babel.config.js）：
- 在 babel 调用时加上 sourceMaps: "inline" 或 "both"
- 配合 webpack 时，设置 devtool: 'source-map'
Webpack（webpack.config.js）：
- devtool: 'source-map'（生产可用）或 'cheap-module-source-map'（开发推荐）
- 确保 output.path 和 publicPath 正确，便于路径解析
常见问题与排查技巧
如果断点显示“未绑定”或跳转到编译后代码，说明 source map 未生效。
- 检查 JS 文件末尾是否有 sourceMappingURL 注释
- 确认 .map 文件存在且内容正确
- 在 launch.json 中使用 trace: true 查看调试器日志
- 路径问题常见：使用 webRoot 或 localRoot/remoteRoot 映射路径
- 清除缓存：有时浏览器或 Node.js 缓存旧文件，重启调试会话
在 VS Code 中打开“调试控制台”，观察是否提示 “Could not load source…” 错误，通常指向路径不匹配。
基本上就这些。只要构建输出正确，launch.json 配置得当，VS Code 就能无缝调试原始代码。调试体验接近原生，不复杂但容易忽略细节。
