Source Map是映射压缩代码与源码位置关系的JSON文件，通过mappings等字段实现错误反向定位，开发者可在浏览器中直接调试原始代码，构建工具如Webpack、TypeScript通过配置生成.map文件或内联注释启用，便于开发调试但生产环境需谨慎使用以防源码暴露。
前端调试 JavaScript 时，Source Map 是一个非常关键的技术。它让开发者能在浏览器中直接调试压缩、混淆或编译后的代码，看到原始的源代码结构，而不是难以阅读的生产代码。
什么是 Source Map
Source Map（源映射）是一个 JSON 文件，记录了转换后的代码（如压缩、编译后的 JS）与原始源代码之间的位置映射关系。当代码在浏览器中出错时，浏览器可以通过 Source Map 将错误位置“反向映射”回原始文件中的行和列，从而实现精准调试。
例如：你用 Webpack 打包 TypeScript 或 ES6+ 代码，最终生成的是压缩过的 bundle.js。如果没 Source Map，调试时只能看到一行堆叠的代码；有了 Source Map，开发者工具能展示你原本写的 .ts 或 .js 文件内容，并支持断点、查看变量等操作。
Source Map 的工作原理
Source Map 的核心是建立一种从“输出代码”到“源代码”的坐标映射。这个映射信息保存在一个 .map 文件中，或者以 data URL 形式内联在 JS 文件末尾。
立即学习“Java免费学习笔记（深入）”；
一个典型的 Source Map 包含以下关键字段：
- version：Source Map 格式版本，通常是 3
- sources：原始源文件路径列表
- names：代码中变量名或函数名的列表（用于避免重复）
- mappings：最关键的部分，使用 Base64 VLQ 编码描述每一段生成代码对应源代码的位置
- file：生成文件的名称
- sourceRoot：源码根路径（可选）
mappings 字符串是一串编码字符，表示生成代码的每一行每个位置如何映射回源码。它按行分割，每行内部用分号 ; 分隔不同位置，逗号 , 分隔不同映射项。每个映射项包含：
- 生成代码的列号
- 对应的源文件索引（在 sources 数组中的位置）
- 源代码行号
- 源代码列号
- 名字索引（在 names 中的位置，可选）
通过这种编码方式，浏览器可以在运行时快速查找某一行列的代码来自哪个原始文件的哪一行哪一列。
如何启用 Source Map
在开发环境中，大多数构建工具默认生成 Source Map。以下是常见配置示例：
Webpack:
在 webpack.config.js 中设置 devtool：
module.exports = {
mode: 'development',
devtool: 'source-map' // 或 cheap-module-source-map, eval-source-map 等
};TypeScript:
客户端： 1.支持商品新品上架，特价促销，以及推荐商品等图文展示。 2.支持系统公告，商品的快速搜索，以及在线客服实时沟通，联系方式发布等 3.支持多收货地址管理，灵活选择配送方式。 4.提交订单前，可以随时调整订单商品，还支持提交特殊需求留言等功能。 5.支持查询原始订单数据，方便与发货方进行订单核对，以及订单追溯。 6.支持客户留言，随时与网站管理员沟通联系。 管理端： 1.管理端支持实时查询
在 tsconfig.json 中开启 sourceMap：
{
"compilerOptions": {
"sourceMap": true,
"outDir": "./dist"
}
}Babel:
Babel 在转换代码时也会生成 map 信息，通常由打包工具统一处理输出。
构建完成后，JS 文件末尾会添加一行注释：
//# sourceMappingURL=bundle.js.map
浏览器发现这行注释后，会自动请求同目录下的 .map 文件并加载映射关系。
调试过程中的实际应用
当你在 Chrome DevTools 中打开 Sources 面板时，可以看到左侧文件树中不仅有打包后的文件，还会显示原始的源文件结构（如 src/ 目录下的 .ts 或 .vue 文件）。
点击这些原始文件，可以设置断点。运行时，即使实际执行的是压缩代码，JavaScript 引擎也会根据 Source Map 自动跳转到对应位置暂停。
控制台报错信息也会显示原始文件名和行列号。比如报错显示 “TypeError in utils.ts:45”，而不是 “bundle.js:1234”。
注意：生产环境是否开启 Source Map 需权衡。虽然便于排查问题，但也暴露了源码结构。建议使用 hidden source map（不发布.map 文件链接）或只在内部部署时提供。
基本上就这些。Source Map 不复杂但容易忽略细节，理解它有助于更高效地定位问题。
