VSCode不生效Source Map是因为它依赖调试器而非自身解析，需确保构建生成有效map文件、launch.json中启用sourceMaps:true并正确配置outFiles、webRoot及sourceMapPathOverrides路径映射。
Source Map 为什么在 VSCode 里不生效
VSCode 本身不主动解析或加载 sourceMap，它依赖调试器（比如 Chrome DevTools 或 Node.js 的 node 调试协议）提供映射能力。如果你看到断点打在混淆后的 bundle.js 上、无法跳转到原始 .ts 或 .jsx 文件，大概率是调试配置没把 sourceMap 路径告诉调试器，或者生成的 map 文件没被正确关联。
- 检查浏览器是否实际加载了
sourceMap：在 Chrome DevTools 的Sources面板里展开webpack://或file://，看有没有原始文件结构；没有的话说明构建阶段就没产出或没暴露 - 确认构建工具输出了
.map文件（如bundle.js.map），且和bundle.js同目录，或通过sourceMappingURL注释正确指向 - VSCode 的
launch.json中必须启用sourceMaps: true，否则调试器会直接忽略所有 map
launch.json 中 sourceMaps 相关关键配置项
VSCode 的调试行为由 .vscode/launch.json 控制，其中几个字段直接影响 Source Map 是否可用：
-
sourceMaps: true— 必须显式开启，不写默认为false -
outFiles— 告诉调试器哪些是“输出文件”，用于反向匹配 map；常见值：["${workspaceFolder}/dist/**/*.js"]；如果路径不对，VSCode 找不到对应 map 就不会尝试解析 -
webRoot— 对于浏览器调试，指定网页根路径（通常是"${workspaceFolder}"），影响sources中路径的解析逻辑；若你的index.html在子目录，这里填错会导致原始文件路径拼接失败 -
resolveSourceMapLocations— 可选，用于排除或限定 map 查找范围，比如["!**/node_modules/**"]防止误加载第三方库的 map
示例片段：
{
"type": "pwa-chrome",
"request": "launch",
"name": "Launch Chrome",
"url": "http://localhost:3000",
"webRoot": "${workspaceFolder}",
"sourceMaps": true,
"outFiles": ["${workspaceFolder}/dist/**/*.js"]
}
Webpack/Vite 构建时 sourceMap 配置差异
构建工具决定你有没有可用的 .map 文件，以及内容是否完整。开发环境常用 eval-source-map，但它不生成独立 .map 文件，VSCode 无法读取 —— 这是本地调试失败最常见的原因。
- Webpack：用
devtool: "source-map"（生成独立.map）或"inline-source-map"（base64 内联，VSCode 支持）；避免"eval-*"系列 - Vite：默认
build.sourcemap: false，需手动设为true或"inline"；注意vite build --sourcemap命令行参数优先级高于配置项 - TSC（TypeScript 编译）：确保
tsconfig.json中"sourceMap": true，且"outDir"和launch.json的outFiles路径一致
Chrome 调试器与 VSCode 联调时的路径映射陷阱
VSCode 通过 Chrome Debug Protocol 获取源码信息，但原始路径（如 /src/App.tsx）和本地文件系统路径可能不一致，导致“找到 map 却打不开文件”。这时候需要 sourceMapPathOverrides 做路径重写。
- 典型现象：断点命中，但打开的是空白页或提示
Unable to open 'App.tsx': File not found - 常见原因：Webpack 输出的 map 里记录的是
webpack:///src/App.tsx，而你本地文件在/Users/name/project/src/App.tsx - 解决方式：在
launch.json中添加sourceMapPathOverrides，例如：
"sourceMapPathOverrides": {
"webpack:///./src/*": "${workspaceFolder}/src/*",
"webpack:///src/*": "${workspaceFolder}/src/*"
}
这个映射不是正则，是前缀替换；顺序重要，更具体的规则放前面。
路径问题往往最耗时间，尤其在 monorepo 或使用别名（@/）的项目里 —— 别假设路径自动对得上，先看 Chrome DevTools 的 Sources 面板里显示的原始路径长什么样，再针对性配 sourceMapPathOverrides。
