浏览器如何获取“sourcemapped”javascript文件的源文件？

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

检测到源地图…

我看到这个：

哪里

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

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

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

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

我猜服务器提供了一个“源代码”文件/ s到浏览器，其中包含所有的原始源代码及其相应的编译代码？ 然后浏览器parsingsourcemap，并为这些文件生成一个“虚拟”文件树 – 这就是为什么没有networking请求？ 这些“文件”从哪里来？

Answer 1

源代码可以被烧成原始的JS包，虽然通常不会在生产中完成。

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

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

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

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

为了进行debugging，引入了源地图，以便您可以看到源中的错误来自哪里。 例如，你可能会有一些sass文件被编译为css，并且不知道css来自哪个sass文件。