SourceMap 的作用是将压缩混淆代码的错误精准映射回原始源码位置。配置需生成 .map 文件并正确关联，确保浏览器可加载且 DevTools 启用源码映射，线上监控还需上传 map 文件并保证路径一致。

SourceMap 的作用就是把压缩混淆后的代码错误，精准映射回原始的、未打包的源码位置。只要配置正确、浏览器或工具支持，就能直接在 DevTools 中看到报错发生在 src/xxx.js 第 23 行第 5 列，而不是 bundle.min.js:1:12345 这种不可读的位置。

打包工具中开启 SourceMap 输出

不同工具配置方式不同，但核心都是生成 `.map` 文件并让 JS 文件通过注释关联它：

• Webpack：在 webpack.config.js 中设置 devtool: 'source-map'（生产环境可用 'hidden-source-map' 避免暴露源码路径）
• Vite：默认开发环境已启用，构建时加 --sourcemap 或在 vite.config.ts 中设 build.sourcemap: true
• Rollup：在 output.sourcemap = true，并确保 output.sourcemapFile 正确指向 map 文件位置

确保 .map 文件可被浏览器加载

SourceMap 生效的前提是浏览器能拿到 .js.map 文件。常见问题和解决方法：

• 检查 Network 面板里是否有 xxx.js.map 返回 404 —— 说明静态资源没部署或路径不对
• 确认 xxx.js 文件末尾有注释如 //# sourceMappingURL=xxx.js.map，且路径相对正确（比如打包后放在 /static/ 下，map 文件也要在同一目录）
• 若用 CDN 或 Nginx，需确保服务器允许访问 .map 后缀文件（有些默认禁止）

浏览器 DevTools 中启用 SourceMap

即使生成了 map 文件，浏览器也可能默认关闭解析：

Java 接口排错助手

在调试 Java 后端 API 故障时使用此技能，尤其适用于以下任务：分析日志、跨 Controller、Service 和 Mapper 层追踪请求、定位异常根因、检查 SQL 执行或参数流转，以及生成简洁的诊断结论与修复方案。

下载

立即学习“Java免费学习笔记（深入）”；

• Chrome / Edge：打开 DevTools → ⚙️ Settings → Preferences → Sources → 勾选 Enable JavaScript source maps 和 Enable CSS source maps
• Firefox：DevTools → ⚙️ Settings → Advanced Settings → 勾选 Enable source maps
• 刷新页面后，在 Sources 面板左侧应能看到 webpack:// 或 app:// 等虚拟文件系统，点进去就是原始源码

线上错误监控中使用 SourceMap 还原堆栈

用户在生产环境上报的错误（如通过 Sentry、Bugsnag），需要服务端配合还原：

• 上传 SourceMap 文件到监控平台（如 Sentry 的 sentry-cli releases files … upload-sourcemaps）
• 确保错误日志中的 script URL 和上传的 map 文件路径能匹配（例如都基于 /static/ 前缀）
• 原始堆栈中的 bundle.min.js:123:456 就会被自动转成 Button.vue:42:18

不复杂但容易忽略的是路径一致性与网络可达性。只要 map 文件能加载、浏览器开了开关、监控平台配对成功，压缩代码的错误就和写源码时一样直观。