浏览器如何或在哪里获取“sourcemapped”javascript 文件的源文件？答案

【问题标题】：How or Where does the browser get the source files for "sourcemapped" javascript files?浏览器如何或在哪里获取“sourcemapped”javascript 文件的源文件？
【发布时间】：2021-12-04 08:41:39
【问题描述】：

我正在着手处理一个使用 Angular JS 构建的现有项目。当我打开 chrome 开发工具“源”视图时，浏览器告诉我：

检测到源地图...

我看到了：

在哪里

inline.bundle.js
main.bundle.js
等等……

是编译后的文件，其原始文件在我圈出的源目录中，例如

ng://
webpack://
等等..

浏览器没有显示对这些ng://、webpack:// 文件的任何网络请求，所以我的问题是，这些文件是从哪里来的？浏览器是如何获取这些数据的？

我猜服务器向浏览器传递了一个“sourcemap”文件，其中包含所有原始源代码及其相应的编译代码？然后浏览器解析了源映射并为这些文件生成了一个“虚拟”文件树——这就是为什么没有网络请求的原因？这些“文件”从何而来？

【问题讨论】：

标签： javascript node.js angular npm webpack

【解决方案1】：

sourcemaps 可以被烘焙到原始的 JS 包中，尽管它通常不会在生产环境中完成。

它也可以是一个外部文件（通常在包的最后一行引用）。

Webpack 通过 devtool config option 允许所有这些不同的选项。

【讨论】：

谢谢，我在任何输出文件中都看不到任何看起来像 sourcemap 数据的东西，还有这个：//# sourceMappingURL=vendor.bundle.js.map 位于文件 vendor.bundle.js.map 的底部。但是网络请求或源视图中似乎没有任何vendor.bundle.js.map 文件。
它会在某个时候加载那个 .map 文件。也许你现在因为缓存没有看到它。

【解决方案2】：

如果您浏览 angularjs、webpack 等，您应该会看到以 .map 扩展名结尾的文件。当您加载网页时，服务器会发送带有源地图 url 的标头。从规范来看，标题看起来像：

SourceMap: <url>

源映射必须遵循特定格式。

{
"version" : 3,
"file": "out.js",
"sourceRoot": "",
"sources": ["foo.js", "bar.js"],
"sourcesContent": [null, null],
"names": ["src", "maps", "are", "fun"],
"mappings": "A,AAAB;;ABCDE;"
}

该规范可在谷歌文档https://docs.google.com/document/d/1U1RGAehQwRypUTovF1KRlpiOFze0b-_2gc6fAH0KY0k/edit?hl=en_US&pli=1&pli=1上找到

源映射是为了调试目的而引入的，这样您就可以看到源代码中的错误来自何处。例如，您可能将大量 sass 文件编译为 css，但不知道 css 来自 sass 文件的何处。

【讨论】：

【解决方案3】：

与源映射的关联通常由编译文件末尾的注释表示。例如：

main.bundle.js

//# sourceMappingURL=main.bundle.js.map

然后，源映射文件在其sources 属性中以数组形式包含原始文件路径（供浏览器在其资源管理器视图中组织），以及它们在sourcesContent 属性下的实际源内容。行号/列号使用a fairly complex derivation of base64 strings 关联，在mappings 属性下定义。

【讨论】：