浏览器如何或在哪里获取“源映射”javascript文件的源文件？

Question

我正在开始使用angular JS构建的现有项目。当我打开chrome dev工具“源”视图时，浏览器会告诉我：

  

检测到源地图......

我看到了这个：

哪里

• inline.bundle.js
• main.bundle.js
• 等...

是已编译的文件，其原始文件位于我圈出的源目录中，例如

• ng://
• webpack://
• 等。

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

我猜服务器向浏览器发送了一个“源映射”文件，其中包含所有原始源代码及其相应的编译代码？然后浏览器解析了源图，并基本上为这些文件生成了一个“虚拟”文件树 - 这就是为什么没有网络请求？ 这些“文件”来自哪里？

Answer 1

源图可以烘焙到原始JS包中，但通常不会在生产中完成。

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

Webpack通过devtool config option。

允许所有这些不同的选项

Answer 2

如果你浏览angularjs，webpack等，你应该会看到以.map扩展名结尾的文件。加载网页时，服务器会发送包含源地图网址的标头。根据规范，标题如下：

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;"
}

该规范可在google docs https://docs.google.com/document/d/1U1RGAehQwRypUTovF1KRlpiOFze0b-_2gc6fAH0KY0k/edit?hl=en_US&pli=1&pli=1

上找到

为了调试目的，引入了源映射，以便您可以看到源中出现错误的位置。例如，你可以将一堆sass文件编译成css，并且不知道css在sass文件中的来源。