VSCode怎么对编译打包后的压缩代码进行调试 - Source Map源码映射准确配置排坑指南-VSCode-PHP中文网

webpack source map 失效主因是开发服务器未透传.map文件或devtool配置不当；需设devtool为"source-map"、正确配置devtoolmodulefilenametemplate和sourcemappathoverrides，并确保sourcemap注释未被压缩工具删除。

vscode怎么对编译打包后的压缩代码进行调试 - source map源码映射准确配置排坑指南

Webpack 生成的 `source-map` 不生效，断点打不中怎么办

根本原因通常是开发服务器没读到或没透传 Source Map 文件。Webpack 默认打包后生成 main.js 和 main.js.map，但 VSCode 调试器只认运行时实际加载的资源路径——如果 Webpack Dev Server 没把 .map 文件挂载进静态服务，或者用了 devtool: "eval" 这类不落地文件的模式，VSCode 就找不到映射关系。

devtool 必须设为 "source-map" 或 "inline-source-map"（前者生成独立 .map 文件，后者内联进 JS，更易调试）
确保 output.devtoolModuleFilenameTemplate 指向真实源码路径，比如 "file://[absolute-resource-path]"，否则 VSCode 无法定位原始 .ts 或 .jsx 文件
若用 webpack-dev-server，确认它没加 headers: { "Access-Control-Allow-Origin": "*" } 之外的干扰配置，某些代理规则会拦截 .map 请求

VSCode `launch.json` 中 `sourceMapPathOverrides` 怎么写才对

这是最常配错的一环：VSCode 默认按浏览器返回的 sourceMappingURL 去找原始文件，但 Webpack 打包后路径和本地工程路径往往不一致，必须手动做路径映射。不配或配错，VSCode 就会显示 “No source available”。

先在浏览器开发者工具里打开 Sources 面板，右键压缩 JS → “Reveal in sidebar”，看右侧显示的原始文件路径长什么样（比如 webpack:///./src/App.tsx）
再对比你本地项目根目录结构（比如 /Users/me/project/src/App.tsx），用 sourceMapPathOverrides 把前者映射到后者，例如：
```
"sourceMapPathOverrides": {
  "webpack:///./src/*": "${webRoot}/src/*",
  "webpack:///src/*": "${webRoot}/src/*"
}
```
注意斜杠方向：Windows 下也统一用正斜杠 /，VSCode 不认反斜杠

Vue / React 项目里 `vue-cli-service` 或 `react-scripts` 怎么开 Source Map

这类封装工具默认关掉了生产环境的 Source Map，但开发时其实支持开启——只是开关位置藏得深，且不同版本行为不一。

VSCode

避免常见的 VSCode 错误——设置冲突、调试器配置和扩展冲突。

下载

Vue CLI：在 vue.config.js 加
```
module.exports = {
  configureWebpack: {
    devtool: 'source-map'
  }
}
```
，别信 productionSourceMap: true，它只影响 npm run build 输出，不影响 dev server
Create React App：直接改 node_modules/react-scripts/config/webpack.config.js 里 devtool 的值（不推荐）；更稳妥的是用 craco + craco.config.js 覆盖：
```
module.exports = {
  webpack: { configure: (config) => { config.devtool = 'source-map'; return config; } }
}
```
注意：react-scripts@5+ 默认用 cheap-module-source-map，断点可能跳到 Babel 编译后的代码行，不是原始 JSX 行，必须显式改成 source-map

Chrome 能断点、VSCode 断点灰掉？检查 `sourceMappingURL` 是否被污染

VSCode 调试依赖浏览器暴露的 sourceMappingURL 注释，如果构建流程里有 UglifyJS、Terser 或其他压缩插件把它删了、改错了，VSCode 就彻底失联。

打开打包后的 main.js，滚动到底部，确认存在类似 //# sourceMappingURL=main.js.map 的注释（注意是 # 不是 //）
如果用了 Terser 插件，检查是否误开了 compress.drop_console 或 output.comments 相关选项——有些版本会连 sourcemap 注释一起删
某些 CDN 或 Nginx 配置会过滤掉含 sourceMappingURL 的行，用 curl 直接请求 JS 文件验证原始响应体

Source Map 不是“开了就灵”的开关，它是三端对齐的结果：Webpack 生成路径、浏览器加载路径、VSCode 解析路径，任意一环脱节，断点就失效。最容易忽略的是 devtoolModuleFilenameTemplate 和 sourceMapPathOverrides 的组合效果，建议每次改完都重新启动 dev server 并清空浏览器缓存再试。