浏览器如何获取源映射？

Question

我正在尝试了解源映射的工作原理。我使用 nodejs 创建了一个带有一个页面的简单 Web 服务器。安装了带有缩小版本和源映射的 jQuery。然后我在我的网页上放了一个脚本标签，包括缩小版的 jQuery。多亏了源映射，我现在可以在 chrome 开发人员工具中浏览未缩小的代码。但是怎么做呢？

我分析从服务器发送的东西，源地图没有传输。它们未显示在 chrome 开发人员工具的网络选项卡中，也不包含在缩小的 jquery 文件的下载内容中。唯一的就是//# sourceMappingURL=jquery.min.map 在缩小的 jQuery 文件的末尾。浏览器如何访问它们？

部分原因是我想知道，因为在我的工作中我正在创建一个应用程序，如果能够在生产中使用源映射跟踪错误，那就太好了。但现在看来，如果我想允许，这也意味着任何访问该站点的人都可以获得未缩小的代码。这是正确的还是我可以控制源映射如何从服务器传输到客户端？

编辑： 感谢您的回答。我自己也做了更多的研究，记录服务器收到的每个请求。如果使用调试器工具，则源映射是在缩小文件末尾指定的 url 处的请求。 chrome 隐藏了这一点的事实使事情变得非常混乱。如果我阻止传输源映射，源映射将不起作用，但 chrome 也会缓存源映射。 IE。如果我允许源映射，查看它，然后阻止它并再次查看源映射可能仍然有效。

Answer 1

确实会传输源映射，但在当前版本的 Chrome 中，它们不会显示在“网络”选项卡中。根据this answer 的说法，源映射过去在“网络”选项卡上可见，但在某些时候他们决定更改它，使请求不再可见。

至于保持您的源映射私有，this answer 中提到的解决方案之一是创建一个.htaccess 文件，该文件限制源映射从您的本地网络访问客户端。另一种方法是设置身份验证，因此您必须登录该站点才能查看源地图，否则您会收到 403。

Answer 2

在这种情况下，浏览器正在请求相对于<script> 元素的src URL（“源源”）的jquery.min.map 文件。 （并且源映射可能将所有源嵌入sourcesContent。）我不确定为什么它没有显示在网络选项卡中（我以前从未检查过）。在其他情况下，源映射可以完全嵌入脚本中。您可以想象将源文件放在不可公开访问但属于您的 URL 后面，并相应地设置源映射的 sourceRoot 属性。在这种情况下，您需要确保您的源映射不包含 sourcesContent