Generating source maps #

Source maps are files with names ending with .map (for example, example.min.js.map
and styles.css.map). They can be generated by most build tools, for example, Vite,
webpack, Rollup, Parcel, esbuild, and more.

Some tools include source maps by default, while others may need additional
configuration to produce them.

/* Example configuration: vite.config.js */

/* https://vitejs.dev/config/ */

export default defineConfig({

build: {
sourcemap: true, // enable production source maps
},
css: {
devSourcemap: true // enable CSS source maps during development
}
})
Understanding the source map #
These source map files contain essential information about how the compiled code
maps to the original code, enabling developers to debug with ease. Here is an
example of a source map.

{
"mappings": "AAAAA,SAASC,cAAc,WAAWC, ...",
"sources": ["src/script.ts"],
"sourcesContent": ["document.querySelector('button')..."],
"names": ["document","querySelector", ...],
"version": 3,
"file": "example.min.js.map"
}
To understand each of these fields, you can read the source map specification or
this classic article on the anatomy of a source map.

The most critical aspect of a source map is the mappings field. It uses a VLQ base
64 encoded string to map lines and locations in the compiled file to the
corresponding original file. This mapping can be visualized using a source map
visualizer like source-map-visualization and Source Map Visualization.

A source map visualization.

The image shows the visualization of our previous code example above, generated by
a visualizer.
The generated column on the left shows the compressed content and the original
column shows the original source.

The visualizer color codes each line in the original column and its corresponding
code in the generated column.

The mappings section shows the decoded mappings of the code. For example, the entry
65-> 2:2 means:

Generated code: The word const starts at position 65 in the compressed content.
Original code: The word const starts at line 2 and column 2 in the original
content.