Source Map：线上代码出错时，为什么还能找到源文件

Source Map：线上代码出错时，为什么还能找到源文件

现代前端代码在上线前通常会被压缩、合并和转换。浏览器真正执行的文件可能只有一行，变量名也被缩短了；但开发者调试时，仍然希望看到熟悉的 TypeScript、JSX 或原始模块。Source Map，源码映射，就是把发布后的代码位置关联回原始代码位置的一份映射信息。

它做了什么

构建工具在转换源代码时，会记录生成文件中的位置对应原始文件的哪一行、哪一列。浏览器开发者工具读取映射后，可以在源码面板中展示原始文件，错误堆栈也更容易定位到开发者实际写下的代码。

这不是把原始文件重新执行一遍，而是给调试器一张翻译表。浏览器运行压缩后的产物，开发者看到的是经过映射还原的视图。

AI 编程为什么应该关心它

AI 很擅长快速生成前端页面和组件，但上线后的问题往往发生在编译、打包、懒加载和运行时边界。没有 Source Map，AI 和人类都只能面对一段难读的压缩代码；有了映射，错误可以回到真实组件、原始函数和对应的生成位置。

它也有安全边界。公开部署完整 Source Map 可能暴露源代码结构、内部路径和注释。开发环境需要方便调试，生产环境则要根据风险决定是否公开、限制访问或只保留给错误监控平台。

映射失效时会发生什么

如果构建工具版本、文件路径或映射文件没有正确上传，堆栈可能指向错误行，或者只能显示打包后的匿名函数。多阶段构建、CDN 缓存和代码分割还可能让浏览器加载的产物与监控平台保存的映射版本不一致。

一个适合 Vibe Coding 项目的检查清单

让 AI 修改前端构建配置时，要求它说明 Source Map 在开发、测试和生产环境中的策略；发布后用真实错误触发一次，确认堆栈能回到源文件；如果不对外公开映射，也要确保错误监控平台能安全保存对应版本。

MDN 对 SourceMap 响应头和调试用途有清晰介绍，可参考官方文档。