根本原因是vscode调试器未正确解析sourcemap，需确保打包工具生成有效.map文件、launch.json中sourcemaps:true/outfiles/webroot/sourcemappathoverrides配置准确，且浏览器成功加载了source map。
为什么断点打不进原始TS/JS文件，而总停在bundle.js里
根本原因是VSCode的Debugger没找到正确的SourceMap映射路径，或者打包工具生成的SourceMap没被正确加载。常见表现是：你在src/index.ts打的断点完全不生效，调试器只响应dist/bundle.js里的行——哪怕你确认开启了sourceMap: true。
关键不在VSCode本身，而在三者是否对齐：打包工具（如Webpack/Vite）输出的sourceMappingURL、生成的.map文件位置、以及VSCode的launch.json中sourceMaps和outFiles配置是否匹配。
- Webpack默认把
sourceMappingURL写成相对路径（如//# sourceMappingURL=main.js.map），但若main.js被放到dist/下，而main.js.map也在同目录，VSCode才能自动定位；否则需手动指定resolveSourceMapLocations - Vite 4.0+默认用
inlineSourceMap: false，生成独立.map文件，但开发服务器路径和磁盘路径不一致时，VSCode无法解析sources字段里的../src/xxx.ts - 混淆工具（如Terser）若开启
keep_fnames或mangle: false，会影响调用栈可读性，但这和SourceMap加载无关——先确保能断到源码，再优化可读性
launch.json里必须设对的三个配置项
VSCode的Node调试器靠launch.json驱动，仅开sourceMaps: true远远不够。以下三项缺一不可：
-
"sourceMaps": true—— 启用SourceMap解析（必需） -
"outFiles": ["./dist/**/*.js"]—— 明确告诉Debugger：哪些编译后文件需要反查SourceMap。路径必须匹配实际输出位置，且用glob（不能写./dist/main.js这种单文件） -
"resolveSourceMapLocations": ["./src/**", "!./node_modules/**"]—— 指定SourceMap中sources字段的原始文件查找范围。如果sources里是webpack:///./src/App.tsx，这个配置就不起作用；此时要加"webRoot": "${workspaceFolder}"并配合sourceMapPathOverrides
示例（适用于Webpack打包后调试）：
{
"type": "node",
"request": "launch",
"name": "Debug bundled app",
"program": "./dist/index.js",
"sourceMaps": true,
"outFiles": ["./dist/**/*.js"],
"resolveSourceMapLocations": ["${workspaceFolder}/src/**"]
}
Webpack/Vite/Terser的SourceMap配置陷阱
打包工具输出的SourceMap质量，直接决定VSCode能否定位。不是所有devtool值都适合调试：
- Webpack用
devtool: "source-map"（而非cheap-module-source-map）——后者缺失列信息，断点可能偏移 - Vite中确保
build.sourcemap = true（默认false），且build.rollupOptions.output.sourcemapIgnoreList设为() => false，否则node_modules的map被跳过，导致第三方库断点失效 - Terser混淆时，若用
terserOptions.sourceMap: { filename: "bundle.js" }，但没同步改output.filename，会导致sourceMappingURL指向错误文件名
验证方法：打开dist/bundle.js末尾，找//# sourceMappingURL=xxx.map，然后手动访问该.map文件，检查其中sources字段是否为相对路径（如["../src/main.ts"]）且路径可从workspace根抵达。
混淆后断点仍跳转错行？检查SourceMap的sources字段是否被重写
某些打包流程（尤其含自定义插件或CI构建）会重写SourceMap的sources，比如把src/App.ts改成/home/ci/project/src/App.ts。VSCode按当前workspace路径去拼接，自然找不到。
- 临时解法：在
launch.json加"sourceMapPathOverrides"，例如{"^/.*/src/": "${workspaceFolder}/src/"} - 根治法：在Webpack中用
devtoolModuleFilenameTemplate统一路径前缀，或Vite中用build.rollupOptions.output.sourcemapPathTransform做归一化 - 注意：VSCode 1.86+对
sources中的webpack:///协议支持更好，但若用rollup-plugin-sourcemaps等第三方插件，可能输出file://路径，需额外处理
最省事的验证方式：启动调试后，在VSCode的“调试控制台”里输入debugger;，停住后看“调用堆栈”里显示的文件路径是否可点击——能点开就是映射成功，点不开就得查sources和resolveSourceMapLocations。
