浏览器何时下载源地图？ [英] When do browsers download sourcemaps?

问题描述

当浏览器下载缩小文件的源代码时，我正在努力寻找关于任何浏览器的文档。外部文件以 .map 扩展名结尾，如 scriptname.min.js.map ）。

我想确定一个我想创建的地图文件是多么详细（这会大大影响文件大小），但是我没有看到文件在Google Chrome中下载的位置开发工具的网络选项卡），但它是可用的，当我在源代码选项卡调试。

解决方案

当您打开开发人员工具时浏览器。在这之前，浏览器并不知道源地图。

Chrome开发工具有一个代码引用

https://chromium.googlesource.com/chromium/src.git/+/master/third_party/WebKit/Source/devtools/front_end/sdk/DebuggerModel.js#73

上面的代码发生了什么

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

注意：将sourcemap添加到缩小文件是不行的，除非源代码由专用网络提供。这是由于各种原因的安全性，模糊等

When do browsers download the sourcemap for a minified file?

I am struggling to find documentation for any browser on if/when they download a minified file's sourcemap (an external file ending in a .map extension, like scriptname.min.js.map).

I am trying to decide how verbose a map file I want to create (which drastically affects the file size) but I don't see where the file is downloaded in Google Chrome (not showing in the network tab of Dev Tools) yet it is available when I debug in the source tab.

解决方案

Source Maps are downloaded and attached to the browser when you open the developer tools. Until then the browser is not aware of the sourceMap.

There is a code reference to the Chrome's Dev tools

https://chromium.googlesource.com/chromium/src.git/+/master/third_party/WebKit/Source/devtools/front_end/sdk/DebuggerModel.js#73

Short Gist of what happens in the above code is

Once Devtools is attached the modal triggers and enables the sourceMapManager. The sourceMapManager manages the sourceMap in Chrome. Once the SourceMapManager is initialized it looks for the #sourceMapUrl downloads and attaches the map to the debugger.

Note: It's not a practice to add sourcemap's to a minified file, unless the sourcemap is served from a private network. This is for various reasons security, obfuscation etc

这篇关于浏览器何时下载源地图？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！