断点变灰但Chrome能跳源码，说明VSCode未正确关联Chrome传来的原始路径，根源在于webRoot或sourceMapPathOverrides配置错误导致本地文件路径匹配失败。
断点灰掉但Chrome能跳源码，说明什么
说明 VSCode 没拿到映射信息，不是没生成 source map，而是调试器没把 Chrome 解析出的原始路径正确关联到你本地文件。VSCode 本身不解析 .map 文件，它靠 Chrome 的 DAP 协议把“我在 webpack:///src/App.tsx 第12行”这个位置传过来，再用 webRoot 和 sourceMapPathOverrides 去拼出真实路径。拼错，就找不到文件，断点变灰。
- Chrome Sources 面板里能看到
webpack:///src/结构，VSCode 里却打不上断点 - 悬停提示 “unbound breakpoint”
-
outFiles路径没错，但断点仍无效
launch.json 中 outFiles 和 sourceMaps 必须同时配对生效
outFiles 是 VSCode 查找 .map 的起点，填错等于直接放弃解析。它必须精确指向编译后的真实 JS 文件路径，而不是源码路径、也不是打包前的中间产物。
-
sourceMaps: true是开关，不写默认为false - TS 项目输出到
dist/，outFiles应写：["${workspaceFolder}/dist/**/*.js"] - 若输出多目录（如
dist/cjs/和dist/es/），必须列全：["${workspaceFolder}/dist/cjs/**/*.js", "${workspaceFolder}/dist/es/**/*.js"] -
program指向${workspaceFolder}/dist/index.js，但outFiles写成["./src/**/*.js"]—— 断点一定失效
webRoot 和 sourceMapPathOverrides 怎么配才不拼错路径
就算 .map 文件存在，里面 sources 字段的路径（如 webpack:///src/App.vue）也得能映射回你本地真实文件位置。
-
webRoot是基准目录：如果开发服务器以dist/为根（比如index.html在dist/下），则设为"${workspaceFolder}/dist"，不是"${workspaceFolder}" -
sourceMapPathOverrides的 key 必须和.map里sources字段完全一致：少一个/或*都会失败，例如"webpack:///./src/*"≠"webpack:///src/*" - Vite / Webpack 项目常见写法：
"webpack:///./src/*": "${webRoot}/src/*" - 多包项目（如
packages/foo/src）容易漏映射，加一行："resolveSourceMapLocations": ["${workspaceFolder}/packages/**/src/**"]
devtool 和 sourcemap 生成方式直接影响 VSCode 能否加载
devtool 决定是否产出可被 VSCode 加载的独立 .map 文件。很多项目用 'eval-source-map'，它把 map 嵌在 JS 末尾 base64 编码里，Chrome 能用，但 VSCode 的调试器无法提取——因为 outFiles 只认物理存在的 .js 和同目录下的 .js.map。
- 真正兼容 VSCode 调试的选项只有两类：
'source-map'（生成独立文件）、'inline-source-map'（VSCode 1.70+ 开始支持，但旧插件或远程调试仍可能失败） - 避免
'hidden-source-map'：生成.map但不写//# sourceMappingURL=注释，VSCode 和 Chrome 都找不到 - 慎用
'cheap-module-source-map'：丢失列信息，断点可能偏移，尤其对 JSX/TSX 行内表达式不友好 - Vite 用户注意：
vite build默认不生成.map，必须在vite.config.ts显式加build.sourcemap: true；vite preview默认不提供.map文件服务
真正卡住人的地方，往往不是某个字段漏填，而是 webRoot、sourceMapPathOverrides、outFiles 这三者之间路径逻辑没对齐——比如 webRoot 指向 dist/，但 sourceMapPathOverrides 里写的却是 "webpack:///src/<em>": "${workspaceFolder}/src/</em>"，结果拼出来是 dist/src/，而实际文件在 src/ 下。这种细微偏差不会报错，只会让断点永远灰着。
