sourcemaps

Source maps are files that provide a mapping from transformed source code back to the original source code. They are primarily used to improve debugging and error reporting for code that has been compiled, minified, transpiled, or otherwise transformed during a build process.

A source map typically relates positions in the generated file to positions in one or more original files. In the standard source map format (version 3), the map is a JSON object that may include version, file, sources, sourcesContent, names, sourceRoot, and mappings. The mappings field encodes the relationship between generated lines and columns and original lines and columns in a compact string using VLQ encoding.

Source maps can be emitted as external files or embedded inline. An external map is a separate .map file referenced by a sourceMappingURL comment at the end of the generated file. An inline map embeds the map as a data URL in the same comment. Developers may choose various tool options such as inline-source-map or source-map to control how maps are produced and referenced.

Usage and benefits: in browsers with devtools, source maps allow code to be shown and inspected in its original form, and stack traces point to original sources. This is common for JavaScript and CSS workflows, including languages that compile to CSS or JS, like TypeScript, CoffeeScript, or SASS.

Limitations and considerations: source maps reveal original sources and can expose proprietary code, secrets, or comments. They may impact build performance and increase payload size if not configured carefully, especially in production. Access should be controlled and only shipped when debugging is needed.

In practice, toolchains such as Webpack, Babel, TypeScript, UglifyJS/Terser, and Sass generate or consume source maps to improve debugging, error reporting, and developer experience.