What are Sourcemaps in JavaScript?

Definition

A Sourcemap is a file that maps from the transformed source to the original source. It is a mapping between the generated/transpiled/minified JavaScript file and one or more original source files. The main purpose of Sourcemaps is to aid debugging.

If there is an error in the generated code file, the map can tell you the original source file location. That’s it. It is pretty powerful in practice!

Debugging in JS with Sourcemaps

Sourcemaps have become an essential aspect of front-end development thanks to the advent of JavaScript transpilers. While working with Angular 2, React, Om, Elm, or some other framework, using Sourcemaps for debugging has many benefits.

How to use Sourcemaps

A Sourcemap must be generated from the original script before use. There are several tools available for creating Sourcemaps from input files. There are so many that you can nearly be sure that whatever language you are using and converting to JavaScript is covered.

Both Google Chrome and Mozilla Firefox currently support the processing of Sourcemaps in the developer tools. Additionally, logging and monitoring tools like TrackJS are supporting these maps as well.

Sourcemaps with Transcrypt

To use single or multi-level Sourcemaps, use the -m flag while transpiling the code. This will allow you to debug minified and non-minified JavaScript code from source level Python code. These Sourcemaps are regularly tested on both Windows and Linux versions of Google Chrome. However, it may also work with Firefox. This and the great readability of the generated JavaScript code allows us to efficiently debug real-world applications.