浏览器何时下载源地图？

Posted 2023-02-22

【中文标题】浏览器何时下载源地图？

【英文标题】：When do browsers download sourcemaps?

【发布时间】：2017-11-03 01:40:54

【问题描述】：

浏览器何时下载压缩文件的源映射？

我正在努力为任何浏览器查找有关是否/何时下载缩小文件的源映射（以.map 扩展名结尾的外部文件，如scriptname.min.js.map）的文档。

我正在尝试确定要创建的地图文件的详细程度（这会极大地影响文件大小），但我看不到文件在 Google Chrome 中的下载位置（未显示在开发工具的网络选项卡中）但是当我在源选项卡中调试时它是可用的。

【问题讨论】：

为什么要在缩小文件中添加地图？地图文件是私有地图文件吗？

只是我的构建脚本生成的地图文件，不是私有的。

【参考方案1】：

当您打开开发者工具时，会下载源地图并将其附加到浏览器。在此之前，浏览器不知道 sourceMap。

Chrome 的开发工具有代码参考

https://chromium.googlesource.com/chromium/src/+/refs/tags/75.0.3770.67/third_party/blink/renderer/devtools/front_end/sdk/DebuggerModel.js

this._sourceMapManager.setEnabled(Common.moduleSetting('jsSourceMapsEnabled').get());

上述代码中发生的事情的简短要点是

一旦附加了 Devtools，模态触发器并启用 sourceMapManager。 sourceMapManager 管理 Chrome 中的 sourceMap。初始化 SourceMapManager 后，它会查找 #sourceMapUrl 下载并将地图附加到调试器。

更新 注意：将 sourcemap 添加到缩小文件不是一种做法，除非 sourcemap 是从专用网络提供的。这是出于安全、混淆等各种原因。但这只是我的看法，具体取决于您的实际要求。例如：如果您有任何需要附加代码的错误跟踪工具，那么您必须附加源图。

【讨论】：

非常好。 Firefox、Safari、IE 等呢？

还是一样。由于 Chromium 是 sourcemap 的早期采用者。所以所有的浏览器或多或少都会以同样的方式做到这一点。每个浏览器都知道没有必要在页面加载时加载源映射。因此，附加文件的唯一方法是在调试器窗口打开时

太棒了。您是否有浏览器制造商的直接来源？我想要的地图文件是 11mb，如果没有浏览器制造商的指导，我不想将它投入生产。

如果是 11mb 则需要一些时间来解析源映射并列出依赖项。您是否能够从本地设置正确调试？正如我所提到的，文件大小并不重要，因为在用户打开开发工具之前不会下载它。

@ANewGuyInTown：除非您希望最终用户调试某些东西，否则您不需要添加 SourceMaps。它只是生产环境中不必要的文件。如果您真的想调试它，请在您的阶段或测试环境中进行。或者如果您真的想要调试它，只需将它添加到您公司的任何专用网络中.....