SourceMap丢失本质是生成了但无法使用，需从构建配置、产物结构、运行时加载三环节排查：检查devtool设置是否合理（如生产环境禁用eval/inline模式）、确认.map文件存在且路径正确、验证浏览器能否加载解析（注意跨域、HTTPS混合内容等问题）。
SourceMap 丢失不是“没生成”，而是“生成了但用不上”——浏览器找不到、解析失败、或映射关系断裂。排查要从构建配置、产物结构、运行时加载三个环节入手，重点看 devtool 设置、文件路径、部署方式是否匹配。
检查 Webpack 的 devtool 配置是否合理
devtool 决定了 SourceMap 的生成方式和内容完整性，选错会导致根本没生成，或生成了但不被浏览器识别：
-
生产环境误用 'eval-source-map' 或 'inline-source-map'：这类内联模式会把 map 内容直接嵌入 JS 文件，体积膨胀且无法被错误监控系统（如 Sentry）提取；上线前务必改成
'source-map'或'hidden-source-map' -
用了 'cheap' 系列但缺失列信息：如
'cheap-module-source-map'不包含列号映射，某些错误堆栈（尤其箭头函数、模板字符串）可能定位不准，调试时看似“丢失” -
误配 'nosources-source-map'：它生成的 .map 文件不含
sourcesContent，浏览器能定位行号，但打不开源码——看起来像“有 map 没源码”，实为故意隐藏源码内容
验证产物中 .map 文件是否存在且路径可访问
即使配置正确，部署环节常导致 .map 文件缺失或路径错位：
-
构建后未上传 .map 文件：Webpack 默认生成独立 .map 文件（如
app.js.map），但很多 CI/CD 流程只同步.js和.css，漏掉.map后缀文件 -
sourceMappingURL 路径错误：JS 文件末尾的注释如
//# sourceMappingURL=app.js.map是相对路径。若 JS 在/static/js/app.js，而 .map 实际放在/dist/app.js.map，浏览器请求 404 就等于丢失 -
CDN 或 Nginx 未开放 .map 后缀：部分静态服务默认屏蔽非标准资源类型，需显式配置
location ~ \.map$ { add_header Content-Type application/json; }
确认浏览器能否正确加载并解析 SourceMap
前端运行时环境干扰也常被忽略：
立即学习“Java免费学习笔记（深入）”；
- DevTools 设置关闭了 SourceMap：Chrome/Firefox 默认开启，但用户可能手动禁用（Settings → Preferences → Sources → Enable JavaScript source maps）
-
跨域限制阻止加载：若 .map 文件与 JS 不同源（如 JS 在 cdn.example.com，.map 在 api.example.com），需服务端返回
Access-Control-Allow-Origin: * -
HTTPS 页面加载 HTTP 的 .map：混合内容被现代浏览器拦截，控制台报
Mixed Content错误，.map 加载失败
用工具快速验证 SourceMap 是否生效
别靠猜，用三步现场验证：
- 打开浏览器 DevTools → Sources 面板，展开左侧文件树，看是否有展开的
webpack://或原始源码路径（如/src/index.ts） - 在 JS 文件末尾找到
sourceMappingURL=xxx.map，右键复制 URL，在新标签页打开——应返回合法 JSON，且含sources和sourcesContent字段 - 触发一个已知错误（如
throw new Error('test')），看堆栈是否指向src/xxx.ts:12:5而非app.min.js:1234:5
