javascript - When do browsers download sourcemaps?

Question

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.

Answer 1

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/+/refs/tags/75.0.3770.67/third_party/blink/renderer/devtools/front_end/sdk/DebuggerModel.js

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

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.

Update 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. But this is just my opinion,it varies depending on your actual requirement. For Example: If you have any error tracking tools which needs the code to be attached, then you will have to attach the sourcemap.