SourceMap 配置正确且加载成功时，可在浏览器开发者工具中直接查看原始源码。需构建时生成 .map 文件并正确关联，如 Webpack 设 devtool、Vite 开启 build.sourcemap，Terser 启用 sourceMap；同时确保路径正确、服务器允许 .map 文件访问、CSP 策略放行，并在生产环境权衡安全与调试需求，如使用 hidden-source-map 或排除源码内容。
直接在浏览器开发者工具里点开混淆后的 JS 文件，就能看到原始源码——前提是 SourceMap 配置正确、加载成功、且未被拦截。
确保构建时生成有效的 SourceMap 文件
不同构建工具启用方式略有差异，但核心都是让工具输出 .map 文件，并与压缩 JS 关联：
-
Webpack：在
webpack.config.js中设置devtool: 'source-map'（生产推荐）或'nosources-source-map'（不暴露源码内容，只保留位置映射） -
Vite：默认开发环境已开启；生产构建需显式配置
build.sourcemap: true（生成独立.map文件）或"inline"（Base64 内联，调试快但增大 JS 体积） -
Terser（单独压缩）：命令行加
--source-map，或 API 中传入{ sourceMap: true }，并指定sourceMapFileName和sourceMapUrl
验证 SourceMap 是否被浏览器正确加载
关键看混淆 JS 文件末尾是否有有效注释，例如：
//# sourceMappingURL=app.min.js.map
立即学习“Java免费学习笔记（深入）”；
常见卡点：
-
路径错误：相对路径易出错，建议用绝对路径（如
/static/js/app.min.js.map），或统一放在public目录下 -
服务器拦截 .map 后缀：Nginx/Apache 需显式允许，例如 Nginx 添加：
location ~ \.map$ { add_header Content-Type application/json; } -
CSP 限制：若启用了
Content-Security-Policy，需确保connect-src或default-src允许加载.map文件
在 DevTools 中还原业务逻辑的关键操作
SourceMap 生效后，你能在 Chrome 的 Sources 面板中看到原始文件结构（如 src/utils/api.ts、views/Home.vue），而不是一堆 bundle.js:1:12345：
- 报错堆栈点击后，直接跳转到原始文件对应行，变量名、函数名、注释都保持可读
- 可在原始代码中打断点，执行时停在源码逻辑处，而非压缩后那一行单字母函数
- 配合
sourcesContent: true（Vite/Webpack 支持），即使没部署源码，也能在面板里直接查看原始内容
生产环境兼顾安全与可追溯性
上线后不能简单把 .map 文件放 CDN 根目录供所有人下载：
- 使用
hidden-source-map（Webpack）或sourcemap: "hidden"（Vite）：生成.map但不写入sourceMappingURL，避免自动加载，仅用于上传至 Sentry 等监控平台 - 上传时绑定 release 版本号和 Git commit hash，让错误堆栈能精准匹配当时源码
- 敏感项目可设
excludeContent: true（Terser），去掉源码内容，只保留路径和位置映射，降低泄露风险
