什么是Source Map

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第6天，点击查看活动详情

您正在为客户端调试 Web 应用程序，但 JavaScript 和 CSS 代码的缩小版本使您无法理解浏览器实际执行的语句。

您可以在编辑器中逐行分解原始代码，在console.log()此处和此处放置一些语句，或者尝试从转换后的状态对其进行调试。

在这里，您可以从使用源映射作为开发人员工具箱中的便捷工具中受益。就像名字所暗示的那样，源映射提供了一种将压缩的 JavaScript 文件中的代码映射回源文件中原始位置的方法，它们也为调试部门提供了帮助。这些是了解如何调试浏览器以及轻松阅读已编译脚本的有用、快速且直接的方法。

什么是Source Map？

源映射是将转换或转译的代码映射回原始源的文件。它允许开发人员通过查看原始源代码（包括原始行号、列号、函数名称和在缩小或转译期间可能已更改的标识符）在开发人员工具（例如 Chrome 开发人员工具或 Firefox 开发人员工具）中调试转译代码。

以下是源映射的示例：

{
  "version": 3,
  "sources": ["../src/index.js"],
  "names": ["Celebrate", "ReactDOM", "render", "document", "getElementById"],
  "mappings": "AAAA,MAAMA,SAAS,GAAG,MAAM;AACtB,sBAAO,oFAAP;AACD,CAFD;;AAIAC,QAAQ,CAACC,MAAT,eACE,oBAAC,SAAD,OADF,EAEEC,QAAQ,CAACC,cAAT,CAAwB,MAAxB,CAFF",
  "sourcesContent": [
    "const Celebrate = () => {\n  return <p>It's working! </p>;\n};\n\nReactDOM.render(\n  <Celebrate />,\n  document.getElementById('root'),\n);"
  ]
}

这只是 JSON 数据！

编译代码后，我们将无法阅读，因为它已经适应了计算机占用更少的网络传输空间并提高了执行性能。

当压缩的 JavaScript 或 CSS 文件链接回其原始源时，浏览器将能够显示发生错误的确切代码行。 

这使得调试更容易。

您可以生成三种类型的源映射来满足不同的需求。

1.内联源映射

内联源映射只是包含我们之前看到的以 base64 编码的 JSON 对象的数据 URL。它看起来像这样：

//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uL3NyYy9pbmRleC5qcyJdLCJuYW1lcyI6WyJDZWxlYnJhdGUiLCJSZWFjdERPTSIsInJlbmRlciIsImRvY3VtZW50IiwiZ2V0RWxlbWVudEJ5SWQiXSwibWFwcGluZ3MiOiJBQUFBLE1BQU1BLFNBQVMsR0FBRyxNQUFNO0FBQ3RCLHNCQUFPLG9GQUFQO0FBQ0QsQ0FGRDs7QUFJQUMsUUFBUSxDQUFDQyxNQUFULGVBQ0Usb0JBQUMsU0FBRCxPQURGLEVBRUVDLFFBQVEsQ0FBQ0MsY0FBVCxDQUF3QixNQUF4QixDQUZGIiwic291cmNlc0NvbnRlbnQiOlsiY29uc3QgQ2VsZWJyYXRlID0gKCkgPT4ge1xuICByZXR1cm4gPHA+SXQncyB3b3JraW5nISDwn46J8J+OifCfjok8L3A+O1xufTtcblxuUmVhY3RET00ucmVuZGVyKFxuICA8Q2VsZWJyYXRlIC8+LFxuICBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgncm9vdCcpLFxuKTsiXX0=

这是放置在普通 JavaScript 文件中的特殊注释，用于告诉浏览器如何将编译后的代码链接到原始版本。

2.外部Source Map

源映射也可以放在单独的文件中。这对于生产使用很方便，因为加载源映射是可选的。

下面是一个如何直接从 Inspector 前端代码声明外部源映射的示例：

无论您是否想为生产启用源映射，它们对于暂存都很方便。跳过源地图会加快构建速度，因为以最佳质量生成源地图可能是一项复杂的操作。

3.隐藏Source Map

隐藏的源映射仅提供堆栈跟踪信息。您可以将它们与监控服务连接，以在应用程序崩溃时获取跟踪，从而解决问题情况。虽然这并不理想，但最好了解可能的问题。