浏览器何时下载源映射文件?

48

浏览器何时下载缩小文件的源代码映射?

我无法找到任何浏览器相关的文档,说明它们是否 / 何时下载缩小文件的源代码映射(一个以 .map 扩展名结尾的外部文件,比如 scriptname.min.js.map)。

我试图决定要创建多详细的映射文件(这会严重影响文件大小),但在 Google Chrome 中我找不到文件下载位置(在 Dev 工具的网络选项卡中没有显示),但在源代码选项卡中调试时可用。


你为什么想要将地图添加到压缩文件中?这个地图文件是私有的吗? - karthick
2
只是我的构建脚本生成的地图文件,不是私有的。 - Ben Rondeau
1个回答

65

当您打开开发者工具时,Source Maps 将被下载并附加到浏览器上。在此之前,浏览器不知道 Source Map 的存在。

这里有一个关于 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。


我正在将源映射添加到生产环境中,因为我使用错误跟踪软件来跟踪错误,如果没有源映射,我无法找出问题所在。我也认为将源映射放入公共空间并不是什么大问题 - 代码可以还原回其原始状态并进行反向工程处理,即使没有源映射。 - Ben Rondeau
客户端的所有内容都很容易被逆向工程。但是你的网站不应该让这一点太明显。我不同意公开源代码,但考虑到你的使用情况,这是有道理的。 - karthick
感谢您的帮助! - Ben Rondeau
1
@ANewGuyInTown:除非你想让最终用户调试某些东西,否则你不需要添加SourceMaps。在生产环境中,这只是一个不必要的文件。如果你真的想要调试它,那就在你的阶段或测试环境中进行。或者,如果你真的想要这样做以便你可以调试它,那就将它添加到你公司的任何私有网络中... - karthick
1
如果你正在创建开源项目,我认为提供源代码映射是一件好事。我将所有公共的npm包都捆绑了源代码映射,这样使用我的包的网站也可以在调试时获取到我的包内的源代码映射。 - kshetline
显示剩余10条评论

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接