Source Map

定义

Source Map 是一种描述"生成代码到原始源码"位置映射的 JSON 文件,通常以 .map 为扩展名。现代前端代码普遍经过转译(TypeScript、Babel)、打包与压缩,线上运行的代码与开发者书写的源码差异巨大,Source Map 让调试器和错误监控能把压缩代码中的位置还原回源文件、行号与变量名。

原理

.map 文件包含 sources(源文件列表)、names(原始标识符)与 mappings 字段,后者用 Base64 VLQ 编码压缩存储逐段的位置对应关系。生成代码末尾通过 //# sourceMappingURL= 注释指向映射文件,浏览器 DevTools 加载后即可在源码层面断点、单步与显示调用栈。

应用

各类构建工具均可输出 Source Map;Sentry 等错误监控平台依赖上传的 Source Map 还原线上报错堆栈。生产环境的常见策略是生成但不公开(hidden source map),仅供监控系统使用,避免源码泄露。

现状

该格式由 Mozilla 与 Google 推动的规范定义,近年在 TC39 下继续标准化,是现代 JS 工程调试体验的隐形支柱。