sourcemap 可将压缩 js 映射回源码实现调试，需构建工具生成 .map 文件、在压缩文件末尾添加 //# sourcemappingurl= 路径声明，并在浏览器开发者工具中启用 javascript source maps。
压缩后的 JavaScript 代码无法直接调试，但通过 SourceMap 可以将运行时的压缩代码映射回原始源码，实现断点调试。关键在于生成正确的 SourceMap 文件，并确保浏览器能正确加载和解析它。
生成带 SourceMap 的压缩代码
使用构建工具（如 Webpack、Vite、Rollup 或 Terser）压缩时，需显式开启 SourceMap 输出：
-
Webpack：在
webpack.config.js中设置devtool: 'source-map'（生产环境推荐'hidden-source-map'或'nosources-source-map'，兼顾调试与源码保护） -
Vite：默认开发环境已启用，生产构建可通过
build.sourcemap: true开启 -
Terser CLI：添加
--source-map参数，例如：terser app.js -o app.min.js --source-map filename=app.min.js.map
生成后，会得到两个文件：app.min.js 和 app.min.js.map，后者就是 SourceMap 文件。
确保 SourceMap 被浏览器识别
压缩 JS 文件末尾必须包含注释行，告知浏览器 SourceMap 的位置：
// 示例：app.min.js 末尾应有这一行//# sourceMappingURL=app.min.js.map
注意：
– 路径可以是相对路径（如 ./js/app.min.js.map）、绝对路径或完整 URL
– 若部署在子路径下，路径需与实际 HTTP 可访问地址一致
– 浏览器控制台的 Network 面板中可检查 .map 文件是否返回 200
在浏览器中启用并验证 SourceMap
Chrome / Edge / Firefox 默认支持 SourceMap，无需额外开启，但需确认：
- 开发者工具 → Settings → Preferences → Sources → 勾选 Enable JavaScript source maps
- 刷新页面，在 Sources 面板左侧文件树中展开 top → webpack://（Webpack）或 localhost（Vite）等虚拟根目录，能看到原始
.js文件 - 点击原始文件即可设断点，执行时自动停在对应源码行（而非压缩后的一行）
若只看到压缩文件，常见原因：SourceMap 文件 404、路径错误、服务未允许跨域（CORS）、或开启了 eval 类型 map（不推荐用于生产）。
生产环境调试注意事项
为安全起见，不建议将原始源码随 SourceMap 一同发布。可选用以下策略：
-
不内联源码：用
sourcesContent: false（Webpack）或--source-map includeSources=false（Terser），仅保留映射关系，不嵌入原始内容 -
私有 SourceMap 服务器：将
.map文件部署在内部可访问地址（如监控平台），并在sourceMappingURL中指向该地址 - 错误堆栈还原：配合 Sentry、Bugsnag 等平台上传 SourceMap，自动将线上报错堆栈映射回源码位置
只要 map 文件可访问、路径正确、格式标准，DevTools 就能完成映射，调试体验几乎等同于未压缩代码。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
