<p>浏览器通过JS文件末尾的//# sourceMappingURL=xxx.js.map注释自动识别并加载Source Map，仅扫描最后一行或紧邻末尾的注释行，匹配后发起HTTP请求获取.map文件，要求状态码200、MIME类型为application/json，内联脚本不支持此机制。</p>
浏览器通过脚本文件末尾的 //# sourceMappingURL=xxx.js.map 注释自动识别并加载 Source Map。这个注释是关键触发点，不是可选配置，而是必须存在的显式声明。
SourceMap 是怎么被浏览器识别的
浏览器 DevTools（Chrome、Edge、Firefox）在解析 JS 文件时，会逐行扫描文件末尾（注意：仅限最后一行或紧邻末尾的注释行），查找符合规范的 sourceMappingURL 注释。一旦匹配成功，就会发起一个独立的 HTTP 请求，去获取该 URL 指向的 .map 文件。
这个过程不依赖 HTML 结构，也不需要你在 <script> 标签里做额外声明——只要 JS 文件本身包含这行注释，且服务器能正确返回 .map 文件（状态码 200、MIME 类型为 application/json），DevTools 就会自动建立映射关系。
- 注释格式必须严格：以
//#开头（不是// @或/* */），后面紧跟空格和sourceMappingURL= - 路径可以是相对路径（如
./main.js.map），此时以 JS 文件所在目录为基准解析；也可以是绝对路径或完整 URL（如https://cdn.example.com/js/main.js.map） - 若 JS 文件通过内联方式写在 HTML 中（
<script>...</script>），则无法使用此机制——因为内联脚本没有独立文件路径，浏览器不支持为其注入 source map
如何手动用 //#sourceMappingURL 关联 SourceMap
当自动加载失败（比如线上 JS 已发布但遗漏了注释，或 .map 文件路径不对），你可以临时补上这行注释来触发加载。操作前提是：你有权限修改 JS 文件内容，并能重新部署或通过本地覆盖方式注入。
- 打开原始 JS 文件（如
app.min.js），在文件最末尾插入一行：//# sourceMappingURL=app.min.js.map - 确保
.map文件已部署到对应路径，且可通过浏览器直接访问（例如在地址栏输入该 URL 能看到 JSON 内容） - 刷新页面后，打开 DevTools → Sources 面板，检查是否出现
webpack://、src/或其他原始路径结构；若仍显示压缩代码，说明 .map 文件未被加载，需检查网络面板中该 .map 请求是否返回 404 或 MIME 类型错误
手动关联失败的常见卡点
即使加了注释，也不一定立刻生效。以下情况会导致关联中断：
-
路径错位：注释里写的
app.min.js.map实际部署在/static/js/app.min.js.map，但 JS 文件在/js/app.min.js，相对路径就失效了 -
服务器拦截：Nginx/Apache 默认禁止下载
.map文件，需显式配置允许（例如 Nginx 添加location ~ \.map$ { add_header Content-Type application/json; }） -
CSP 限制：如果页面启用了严格的
Content-Security-Policy，可能阻止浏览器加载外部 .map 文件，需在connect-src或default-src中加入对应域名 -
构建产物被二次处理：CDN 自动压缩、反向代理重写、或 Nginx 启用
gzip_static on却没同步提供.map.gz，导致 JS 内容与 .map 文件记录的原始字节不一致
