Source Map是映射压缩代码与原始源码位置关系的JSON文件，通过构建工具生成并在浏览器中加载，实现错误堆栈和断点还原；生产环境建议上传至私有服务器以兼顾错误追踪与代码安全。
线上压缩后的 JavaScript 代码无法直接调试，是因为源码被混淆、删空格、变量重命名、合并文件等处理后，和原始开发代码完全不一致。解决办法是使用 Source Map（源映射）——它是一份 JSON 文件，记录了压缩后代码每一行、每一列对应原始源文件的位置关系，让浏览器能在 DevTools 中“还原”出可读的源码视图。
生成 Source Map 的关键配置
构建工具（如 Webpack、Vite、Rollup、Terser）需显式开启 Source Map 输出：
-
Webpack：在
webpack.config.js中设置devtool: 'source-map'（生产环境推荐'hidden-source-map'或'nosources-source-map'，兼顾调试与源码安全） -
Vite：在
vite.config.ts中配置build.sourcemap: true（默认为false） -
Terser（独立使用）：添加参数
--source-map，并确保输入输出路径正确关联
确保 Source Map 被浏览器正确加载
压缩 JS 文件末尾需包含注释指向对应的 .map 文件，例如：
部署时注意以下几点：
JavaStoryDevelop
下载
你接手一个需求时，是不是经常这样："改一个小字段 → 结果把不相关的代码也改了"、"需求说得很模糊 → 做着做着发现跑偏了"、"数据库加个字段 → 上线才发现漏了数据兼容"、"做了个新功能 → 一个月后自己都忘了当时怎么设计的"、"写到一半被中断 → 再回来不知道从哪继续"；这个 Skill 就是专门解决这些问题的。 它会自动探测你的项目环境（JDK、Spring Boot、ORM、数据库、前端框架），记在
立即学习“Java免费学习笔记（深入）”；
- JS 文件与同名
.map文件必须放在同一目录，或路径与注释中一致 - 服务器需允许
.map文件被公开访问（检查 HTTP 响应状态码是否为 200） - 避免 CDN 缓存了旧版 JS 但未更新对应 map 文件（建议对 JS 和 map 都加哈希指纹，如
app.a1b2c3.min.js+app.a1b2c3.min.js.map）
在 Chrome DevTools 中启用并验证 Source Map
打开开发者工具 → Sources 面板 → 左侧文件树中展开 localhost 或你的域名 → 查看是否有 webpack://、src/ 等原始路径；若看到压缩文件（如 app.min.js）旁有灰色箭头展开后显示源码，说明已生效。
常见问题排查：
- 没看到源码？检查 Network 面板里
.map文件是否 404 或 CORS 被拒 - 断点不触发？确认 DevTools 右上角未勾选 Disable JavaScript source maps
- 路径错乱（如显示
webpack:///./src/index.ts却打不开）？在 DevTools 的 Settings → Preferences → Sources 中点击 Map to network resource 手动关联本地文件
生产环境的安全与权衡
Source Map 包含完整源结构，直接暴露可能泄露业务逻辑。稳妥做法是：
- 不将
.map文件部署到线上 CDN 或用户可访问路径 - 上传至错误监控平台（如 Sentry、Bugsnag），它们支持私有上传 + 符号化堆栈解析
- 使用
hidden-source-map：生成 map 文件但不在 JS 中写注释，仅供内部错误分析系统使用 - 敏感项目可禁用 production sourcemap，靠
console.log+ 错误上下文 + 用户复现辅助定位
