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.

Mccollough

Why do you want to add a map to the minified file? Is the map file a private map file? – Jarrett

Just a map file generated by my build script which is not private. – Mccollough

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.

Jarrett

Very nice. What about Firefox, Safari, IE, etc? – Mccollough

It will be the same. Since Chromium is the early adopter of sourcemap. So all the browsers will more or less do it in the same way. Every browser knows that it's unnecessary to load the source map on page load. So the only way the file will be attached is when the debugger window is open – Jarrett

Awesome. Do you have a direct source from the browser manufacturers? My desired map file is 11mb and I don't want to put that in production without some guidance from the browser manufacturer. – Mccollough

If it's 11mb then it will take sometime to resolve the sourcemap and list the dependencies. Are you able to debug properly from your local set up?. As I mentioned the file size doesn't matter because it wont be downloaded until the user opens the dev tools. – Jarrett

But why do you want to push the sourcemap in a production enviroment? Are you not concerned about other people using your code? – Jarrett

I am adding a sourcemap to production since I use error tracking software to track bugs and without a sourcemap I can't figure out the problem is. I also don't think putting a sourcemap into the public space is that big an issue - the code can be expanded back to its original state and reverse engineered without a sourcemap. – Mccollough

Everything in the client side is easy to reverse engineer. But your site shouldnt make it that obvious. I don't agree to put the source map publically, but given your use case it makes sense. – Jarrett

Thanks for your help! – Mccollough

@Jarrett , if "It's not a practice to add sourcemap's to a minified file", then what is the practice? How do they add source map files in production then? are you saying not to add at all or are you saying only add thru private network? – Lather

@ANewGuyInTown: You dont need to add SourceMaps unless if you want end users to debug something. Its just an unnecessary file in the production environment. If you really want to debug it then do it in your stage or test environments.Or if you really want that so that you can debug it , just add it in any of your company's private network..... – Jarrett

@ANewGuyInTown... I am not saying that its a bad practice. But if you seriously want to add atleast some level of obfuscation to your awesome code. Just do that. But again the Note Part is my opinion. I will edit the answer. – Jarrett

@karthick,I understand what you saying. I was just making sure the practice, since I'm myself no expert in web development. I believe "having it in the private network" is better as this will enable developers to debug client's code. (As sometimes, things are not working only in client's environment and hard to replicate anywhere else) – Lather

Stupid question - I just opened devtools and saw that chunks-vendors.js weighs 3MB, tough in my build output folder it actually weighs ~0.6MB, but the source-map is ~2.6MB. Shouldn't browsers warn about that "hey 80% of the filesize here is the source map, don't panic"? – Status

@Jarrett And I believe browsers download them natively without XHR as I don't see any network activity. – Andromache

If you're creating open-source projects, I think making source maps available is a great thing. I bundle source maps with all of my public npm packages so that source maps for sites using my packages can get inside my packages when debugging too. – Zonnya