mapsource（Maps源映射以及如何正确使用它们）

小君 2023-04-24 01:58:39 601

mapsource（Maps源映射以及如何正确使用它们）编译代码后，人类将无法阅读，因为它已经适应了计算机占用更少的网络传输空间并提高了执行性能。这只是 JSON 数据！源映射是将转换或转译的代码映射回原始源的文件。它允许开发人员通过查看原始源代码（包括原始行号、列号、函数名称和在缩小或转译期间可能已更改的标识符）在开发人员工具（例如 Chrome 开发人员工具或 Firefox 开发人员工具）中调试转译代码。以下是源映射的示例：{ "version": 3 "sources": ["../src/index.js"] "names": ["Celebrate" "ReactDOM" "render" "document" "getElementById"] "mappings&#

如何使用Source Maps源映射来调试 JavaScript 应用程序？

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

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

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

那么，源映射究竟是如何工作的呢？

什么是源地图？

源映射是将转换或转译的代码映射回原始源的文件。它允许开发人员通过查看原始源代码（包括原始行号、列号、函数名称和在缩小或转译期间可能已更改的标识符）在开发人员工具（例如 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 文件链接回其原始源时，浏览器将能够显示发生错误的确切代码行。

这使得调试更容易。

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

内联源映射

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

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

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

外部源图

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

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

mapsource（Maps源映射以及如何正确使用它们）(1)