Why inline source maps?

Question

Today I learned that it is possible to include source maps directly into your minified JavaScript file instead of having them in a separate example.min.map file. I wonder: why would anybody want to do something like that?

The benefit of having source maps is clear to me: one can for example debug errors with the original, non-compressed source files while running the minified files. The benefit of minimization is also clear: the size of source files is greatly reduced, making it quicker for browsers to download.

So why on Earth I would want to include the source maps into the minified file, given that the maps have size even greater than the minified code itself?

Pedagogue

Yep, that seems entirely pointless! – Lalitta

Maybe the .map extension is unknown and throws errors or problems for the administrators of machines that execute .exe and .dll files? – Dock

I also learned that today.... after spending an hour trying to figure out why there weren't any and then discovering they already existed embedded into the .js file... – Jamboree

Source maps are used for development purposes. – Vander

Answer 1

I searched around and the only reason I could see that people inline source maps is for use in development. Inlined source maps should not be used in production.

The rational for inlining the source maps with your minified files is that the browser is parsing the exact same JavaScript in development and production. Some minifiers like Closure Compiler do more than 'just' minify the code. Using the advanced options it can also do things like: dead code removal, function inlining, or aggressive variable renaming. This makes the minified code (potentially) functionally different than the source file.

This could still be done by referencing external source map files of course, but some people seem to prefer inlining for their build process.

Biquadratic

Found an article today that dissects sourcemaps options (for webpack, primarily) pretty thoroughly. Good additional reading to back up this answer: survivejs.com/webpack/building/source-maps – Peta

I wonder if there's a use-case for run-time code-generation as well? (would the browser accept an inline source-map provided as argument to new Function()?) – Tenebrous

Answer 2

If you are remote debugging Chrome on an android device, the Chrome debugger cannot just access any file it wants on the device and that includes separate map files. If you include them inline you don't have this issue.

Maite

True, but what about the performance hit once your files become double the size? – Inseparable

You would obviously only do this in development – Maite

I disagree. If you have a DTAP setup you would also have the minified version accompanied by a sourcemap on Test and Acceptance. And even on Production to allow debugging on that environment. In development, you don't have to work with a minified version persé. Package managers allow for a separate file for sourcemaps which you can send along so you will not have to include it in the initial load to prevent a performance hit. – Inseparable

Similarly, Chrome extensions can't currently access the source maps so for development purposes it is necessary to inline them within the minified file. – Fibre

Answer 3

JS bundling tools like Browserify or Webpack will bundle all your .js files input one or several bundles, even in developing mode. So in this case, adding inline source map to generated bundles is the easiest way to help debugging without bringing extra files.

Reames

wonderful. I will try that. you just might've resolved my question too. #40200498 – Squib

Answer 4

In some situations you might want to include inline sourcemaps into evaluated code. E.g you have a coffeescript input field and you want to enable debbuging the code in coffeescript. There is a stackoverflow question about source maps in evaluated code:

Getting source maps working with evaluated code

You could include @sourceURL in your comments to specify a URL of your eval code and load a map file (see page 8 of SourceMap Spec 3). But it is not always possible to write files to some location.

Obrian

Answer 5

If you're developing a browser extension, inline-source-map is the only option for debugging since extension itself can't access the sourcemap files -- even if it's possible you have to specify all of your sourcemap files inside the manifest.json(config file for browser extensions).

Brainstorm

Answer 6

cheap-module-source-map is much better for a production build.

inline-source-map is used to make quick and dirty builds when testing

Morphology

Answer 7

The use case (for me) is non-browser environments where source maps are not supported (or very much at all, hence the need for webpack.)

Or another way to put it, webpack without the web.

Fancied