.MAP

Introduction

A source map links code that a build tool has generated back to the source it came from. Web code is often compiled, bundled and minified before it is served: TypeScript becomes JavaScript, many modules become one file, and names are shortened. A source map, usually named after the output with .map added, such as app.js.map or styles.css.map, lets browser developer tools and error trackers show the original files, lines and names instead.

The generated file points to its map with a comment on its last line, such as //# sourceMappingURL=app.js.map, or with a SourceMap HTTP header. The .map extension is also used for linker map files and for other unrelated formats.

Structure

A source map is a JSON object. version is 3; file names the generated file; sources lists the original files, optionally relative to sourceRoot; sourcesContent can hold their text so that the originals need not be served; and names lists the original identifiers. The mappings string holds the actual map.

In mappings, a semicolon starts each new line of the generated file and commas separate segments within a line. Each segment is one to five numbers in Base64 VLQ encoding: the column in the generated line, then the index of the source file, the line and column in it, and the index of the name. Each number is stored as the difference from the previous one, which keeps the string short.

{
  "version": 3,
  "file": "app.js",
  "sources": ["src/app.ts"],
  "names": ["greet", "name"],
  "mappings": "AAAA,SAASA,MAAMC"
}

Also used for

• Linker map file .map

Links