48

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.

Ben Rondeau
  • 2,983
  • 1
  • 15
  • 21

1 Answers1

65

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.

karthick
  • 11,998
  • 6
  • 56
  • 88
  • Very nice. What about Firefox, Safari, IE, etc? – Ben Rondeau Jun 01 '17 at 20:09
  • 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 – karthick Jun 01 '17 at 20:11
  • 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. – Ben Rondeau Jun 01 '17 at 20:13
  • 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. – karthick Jun 01 '17 at 20:27
  • But why do you want to push the sourcemap in a production enviroment? Are you not concerned about other people using your code? – karthick Jun 01 '17 at 20:29
  • 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. – Ben Rondeau Jun 01 '17 at 20:32
  • 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. – karthick Jun 01 '17 at 20:36
  • Thanks for your help! – Ben Rondeau Jun 01 '17 at 20:37
  • @karthick , 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? – ANewGuyInTown Feb 09 '18 at 00:06
  • 1
    @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..... – karthick Feb 09 '18 at 00:18
  • @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. – karthick Feb 09 '18 at 00:20
  • @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) – ANewGuyInTown Feb 09 '18 at 01:14
  • 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"? –  Apr 01 '20 at 18:18
  • @karthick And I believe browsers download them natively without XHR as I don't see any network activity. – Rashmin Javiya May 01 '20 at 19:32
  • 1
    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. – kshetline May 24 '22 at 14:08