源映射（Source Map）是JavaScript调试的关键工具，它通过JSON文件记录压缩或编译后代码与原始代码的位置对应关系，使开发者能在浏览器中直接调试原始代码。该文件包含version、sources、names、mappings、file和sourceRoot等字段，构建工具如Webpack、Babel、UglifyJS需配置相应选项（如devtool、sourceMaps: true）以生成映射文件，输出的JS文件末尾会添加注释“//# sourceMappingURL=app.js.map”供浏览器加载并建立调试桥梁。在Chrome DevTools中启用后可查看原始结构、设断点、监视变量，但需确保.map文件可访问、路径正确，生产环境应避免暴露源码，推荐使用nosources-source-map等类型保护源码安全。合理配置能显著提升复杂构建流程下的调试效率。
前端开发中，JavaScript 源映射（Source Map）是调试压缩或编译后代码的关键工具。当代码经过 Webpack、Babel 或 UglifyJS 等工具处理后，原始的可读代码被转换成紧凑、优化后的版本，这使得在浏览器中直接调试变得困难。源映射正是为了解决这个问题而存在。
什么是源映射（Source Map）？
源映射是一个 JSON 格式的文件，它记录了转换后的代码与原始源代码之间的位置对应关系。通过这个映射关系，开发者可以在浏览器中直接查看和调试原始的、未压缩的代码，即使实际运行的是打包后的版本。
一个典型的 source map 文件包含以下关键字段：
- version：Source Map 的版本（通常是 3）
- sources：原始源文件的路径列表
- names：原始代码中的变量名和函数名
- mappings：Base64-VLQ 编码的映射数据，描述了每一段生成代码对应原始代码的位置
- file：生成文件的名称
- sourceRoot：源文件的根路径（可选）
如何启用 Source Map？
在构建工具中开启 source map 输出非常关键。以下是常见工具的配置方式：
立即学习“Java免费学习笔记（深入）”；
- Webpack：在配置文件中设置 devtool 选项，如 'source-map'、'cheap-module-source-map' 或 'eval-source-map'，根据开发或生产环境选择合适类型
- Babel：使用 sourceMaps: true 选项，确保生成映射信息
- UglifyJS/Terser：启用 sourceMap: true，以保留压缩过程中的映射关系
最终输出的 JavaScript 文件末尾通常会添加一行注释：
//# sourceMappingURL=app.js.map
浏览器检测到这行注释后，会自动加载对应的 .map 文件并建立调试桥梁。
调试中的实际应用
在 Chrome DevTools 中，启用 source map 后，你可以在 Sources 面板看到原始的文件结构，设置断点、查看调用栈、监视变量值等操作都作用于原始代码。
注意以下几点以确保调试体验顺畅：
- 确保 .map 文件可访问，部署时不要遗漏
- 生产环境慎用完整 source map，避免暴露源码逻辑，可使用 hidden 或 nosources-source-map 类型保护源文件内容
- 检查路径是否正确，特别是 sourceRoot 和 sources 路径配置错误会导致映射失败
基本上就这些。合理配置 source map，能让复杂构建流程下的调试工作变得直观高效。不复杂但容易忽略。
