<p>Source Map是提升JavaScript调试效率的关键工具，它通过映射压缩或编译后代码与原始源码的位置关系，使开发者能在浏览器中直接查看和调试原始代码。其核心为JSON文件，包含version、sources、names、mappings和file等字段。在Webpack中可通过devtool配置eval-source-map、cheap-module-source-map、source-map等类型，分别适用于开发或生产环境；Vite则在vite.config.js中通过build.sourcemap选项控制，支持true、'inline'或false等设置。使用时需确保.map文件正确输出、JS文件包含//# sourceMappingURL注释且服务器可访问该文件。Chrome DevTools可据此显示原始文件结构，支持断点与调用栈追踪。生产环境中应避免公开部署.map文件以防源码泄露，推荐将map上传至Sentry等监控平台或使用hidden-source-map隐藏引用，兼顾调试能力与安全性。合理配置可实现高效、安全的调试体验。</p>
调试JavaScript时，源代码映射（Source Map）是提升开发效率的关键工具。尤其在使用构建工具（如Webpack、Vite）或压缩混淆后的代码中，错误堆栈往往指向打包后的文件，难以定位原始代码问题。通过正确配置Source Map，开发者可以在浏览器中直接调试原始源码，极大简化排查过程。
什么是Source Map？
Source Map是一个JSON文件，记录了压缩或编译后的代码与原始源码之间的位置映射关系。当代码出错时，浏览器可通过该映射将错误位置反向定位到原始文件的行和列，实现“所见即所得”的调试体验。
一个典型的Source Map包含以下字段：
- version：格式版本（通常是3）
- sources：原始源文件路径列表
- names：原始变量和函数名
- mappings：Base64 VLQ编码的映射数据
- file：生成文件名
构建工具中的Source Map配置
不同构建工具提供多种Source Map类型，选择合适的模式对性能和调试效果至关重要。
立即学习“Java免费学习笔记（深入）”；
Webpack
在webpack.config.js中通过devtool选项配置：
- eval-source-map：适合开发环境，每次构建生成完整map，调试精准但速度慢
- cheap-module-source-map：保留行信息，不包含列映射，构建较快
- source-map：生成独立.map文件，适合生产环境发布时附带调试信息
- none：关闭Source Map，用于纯生产部署
Vite
Vite默认在开发模式启用高效Source Map，配置位于vite.config.js：
- defineConfig({ build: { sourcemap: true } })：构建时生成map文件
- sourcemap: 'inline'：将map嵌入JS文件，便于调试但体积增大
- sourcemap: false：禁用映射
浏览器中的调试实践
确保浏览器能正确加载Source Map需满足几点：
- 构建输出目录包含.map文件且路径正确
- JS文件末尾含有注释：
//# sourceMappingURL=app.js.map - 服务器允许访问.map文件（检查CORS与404）
打开Chrome DevTools后，在Sources面板可看到原始文件结构。设置断点、查看调用栈时，显示的是未编译前的代码，变量名也保持原始状态，极大提升可读性。
生产环境注意事项
虽然Source Map方便调试，但在生产环境中需谨慎处理：
- 避免将.map文件部署到公开CDN，防止源码泄露
- 可上传map文件至错误监控平台（如Sentry、Bugsnag），仅用于错误解析
- 使用
hidden-source-map生成不带引用注释的map，手动管理分发
基本上就这些。合理配置Source Map，能让复杂项目调试变得直观高效，关键是根据环境权衡安全与便利。
