断点失效主因是launch.json中outFiles路径错误:必须用${workspaceFolder}开头的glob模式,如["${workspaceFolder}/dist/*/.js"],写相对路径或多目录未全列会导致调试器找不到.js及对应.map文件。

launch.json里outFiles路径写错,断点直接失效
VSCode 不会自动猜你编译产物在哪,outFiles 填错等于告诉调试器“去错地方翻地图”。它只负责按这个路径找 .js 文件,再根据文件末尾的 sourceMappingURL 去加载对应 .map,路径一错,整个链路就断了。
-
outFiles必须是 glob 模式,且以${workspaceFolder}开头,不能写相对路径如"dist/**/*.js"或"./dist/**/*.js" - 多输出目录必须全列出来:Vite 项目若同时输出
dist/es/和dist/lib/,就得写["${workspaceFolder}/dist/es/**/*.js", "${workspaceFolder}/dist/lib/**/*.js"] - Vue CLI 项目改过
outputDir(比如设成public/build),outFiles就得同步改成"${workspaceFolder}/public/build/**/*.js" - TS 项目用
ts-node直接运行.ts文件?那outFiles不需要——但必须关掉sourceMaps,否则 VSCode 会强行去找不存在的.map文件
sourceMapPathOverrides映射漏斜杠或星号,断点变空心
sourceMapPathOverrides 是把 .map 文件里 sources 字段的路径(比如 webpack:///src/index.ts)转回你本地真实路径的关键。少一个 / 或 *,VSCode 就找不到源码,断点永远空心。
- 常见正确写法:
"webpack:///./src/*": "${webRoot}/src/*"—— 注意webpack:///./src/中的./和结尾/*都不能省 - 如果构建工具用的是
app://协议(如某些 Electron 打包配置),得加一行:"app://./src/*": "${webRoot}/src/*" - 多包项目(如
packages/cli/src)必须单独映射:"webpack:///../cli/src/*": "${workspaceFolder}/packages/cli/src/*",不能指望一条规则覆盖全部 - 映射值末尾不带
/也没关系,但 key 里的协议前缀(webpack:///)必须严格匹配.map文件中sources的实际内容
build.sourcemap没开或devtool设错,.map文件压根不存在
VSCode 再怎么配,也救不了没生成的 .map 文件。很多项目默认关闭 sourcemap,尤其在生产构建时,但调试阶段必须打开。
- Vite 用户检查
vite.config.ts:确认build.sourcemap是true或"inline",不是false(vite preview默认不带 map,要自己加--sourcemap) - Webpack 用户避开
devtool: 'hidden-source-map'—— 它生成.map但不写sourceMappingURL注释,VSCode 和 Chrome 都看不到 - TS 编译必须有
"sourceMap": true,且不能和"inlineSourceMap": true共存(后者会把 map 写进.js,导致outFiles匹配不到独立.map文件) - 验证方法:打开编译后的
dist/index.js,末尾必须有一行且仅一行://# sourceMappingURL=index.js.map,路径要是相对路径(如./index.js.map),不能是绝对路径或拼写错误
webRoot设错,路径拼出来根本找不到文件
webRoot 是所有路径映射的基准目录。它不是“源码在哪”,而是“从哪开始拼路径”。设错会导致 webpack:///src/App.tsx 被拼成 /wrong/path/src/App.tsx,自然打不开。
- 绝大多数项目填
"${workspaceFolder}"就够了 - 但如果你用
vite preview或自建静态服务,HTML 入口在dist/index.html,服务根目录就是dist/,这时webRoot得设成"${workspaceFolder}/dist",否则webpack:///src/会拼成dist/src/,而你源码其实在src/ - React/Vue 项目若用
public/目录放index.html,且构建输出到build/,那webRoot应该是"${workspaceFolder}/build",不是public -
webRoot错了,sourceMapPathOverrides再准也没用——因为它是基于webRoot拼的
真正卡住人的,往往不是配置项漏了,而是 outFiles 指向了空目录、sourceMapPathOverrides 里少了个 /、或者 webRoot 和实际服务路径差了一层。这些细节不手动验证路径是否存在、不打开 .map 文件看 sources 字段,光靠重装插件或重启 VSCode 解决不了。


















