Sourcemap

Advantages

When you develop front end web applications, you would like to use ES6, Sass etc. Then you need to compile javascript into ES5 compatible form, compile sass (or scss) to css. Additionally, you may want to compress these static source for smaller size and better performance. But unfortunately, you find it hardly to seek which line exactly it is in the source code when there are errors prompt. Chrome dev tools just show the compiled and compressed code to you for debugging. It’s a nightmare because you do not know what codes are generated by framework and what codes are transformed from your code actually. Then source map come to rescue. Source map provide you the function that link the compiled and compressed code to your source code.

Description

A source map consists of a whole bunch of information that can be used to map the code within a compressed file back to it’s original source. You can specify different source map for each of your compressed files. Using source maps allows developers to maintain a straight-foward debugging environment while at the same time optimizing their size for performance.

How Browser Download Sourcemap

Sourcemaps are downloaded and attached to the browser only when opening the developer tools. Before that the browser is not aware of the sourcemap