线上用 sourcemap 调试压缩代码需三步：构建时生成 .map 文件（webpack 设 devtool，vite 开 build.sourcemap，terser 加 --source-map），部署时确保 .map 与 js 同目录且可访问（路径正确、200 响应、版本哈希一致），浏览器自动关联后可在 sources 面板调试原始文件；生产环境推荐 nosources-source-map 或 hidden-source-map 保障安全。
线上压缩代码用 SourceMap 调试，核心是：构建时生成 .map 文件 + 部署时保留 map 文件 + 浏览器自动关联源码。只要三步配对正确，就能在 Chrome DevTools 里像调试未压缩代码一样看原始文件、打断点、查变量。
构建阶段：开启 SourceMap 输出
不同工具配置方式不同，但目标一致——让打包结果包含 sourceMappingURL 注释，并生成对应 .map 文件。
-
Webpack：在
webpack.config.js中设置devtool: 'source-map'（生产环境推荐'hidden-source-map'或'nosources-source-map'，兼顾调试与源码保护） -
Vite：默认开发环境已启用，生产构建加
build.sourcemap: true（v4+ 默认为'inline'，上线需改为true写入独立 .map 文件） -
Terser（单独压缩）：命令行加
--source-map参数，或 API 中传{ sourceMap: true }
部署阶段：确保 .map 文件可访问
压缩后的 JS 文件末尾有一行注释，例如：//# sourceMappingURL=app.min.js.map
浏览器会根据这行路径去请求 .map 文件。所以必须：
- 把
.map文件和对应的.js文件一起上传到服务器（同目录最稳妥） - 检查网络面板：打开 DevTools → Network → 刷页面 → 找到
app.min.js.map，状态码应为 200；若 404，说明路径不对或没上传 - 避免 CDN 缓存了旧 JS 却没更新 map（建议 JS 和 map 使用相同版本哈希命名，如
app.a1b2c3.min.js+app.a1b2c3.min.js.map）
浏览器调试：确认 SourceMap 已生效
打开 DevTools → Sources 面板，左侧文件树中如果能看到 webpack://、src/ 或你项目里的原始路径（而非只有 app.min.js），说明 SourceMap 加载成功。
- 点击原始文件（如
src/utils/api.js）即可打断点，执行时会停在对应位置 - 右键 JS 文件 → “Reveal in Sources panel” 可快速定位映射后的源码视图
- 若只看到压缩后代码，检查 Settings → Preferences → “Enable JavaScript source maps” 是否开启（默认开）
安全与线上注意事项
SourceMap 包含原始路径、变量名甚至注释，直接暴露给用户有风险：
- 不建议将完整 SourceMap（含 sourcesContent）公开在生产环境；可用
'nosources-source-map'（仅映射位置，不带源码）或'hidden-source-map'（不写 sourceMappingURL 注释，仅用于错误监控平台解析） - 错误监控（如 Sentry）需要上传 SourceMap 到其后台，再配合堆栈自动还原，此时无需公开 .map 文件
- 内网系统或管理后台可全量开启，平衡调试效率与安全要求
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
