Detailed Source Map

http://www.cnblogs.com/xuld/p/5882677.html

First, what is a source map
In order to improve performance, many sites will compress the JavaScript code and then go online,

but if there is an error when the code is running, the browser will only display Where in the minified code it is difficult to pinpoint the true source error location.

That's where source maps come in.



Source Map is a data format that stores the location mapping relationship between source code and generated code.

The source map generally uses the .map extension. The source map is essentially a JSON text document, and its MIME type is generally set to application/json.



2. How to use source mapping Add comments
to JavaScript code:

//# sourceMappingURL=file.js.map The
browser (supported by the latest versions of Chrome, Firefox and Edge) will load file.js.map and automatically calculate the actual value of the code Location.

In the settings of the Chrome development panel (press F12 to open) (press F1 to open), you can set whether to load source maps by checking the "Enable Source Maps" option.



The source map itself does not affect the execution of the code, it is only used when locating the wrong location.



Originally browsers marked addresses with "@sourceMappingURL", but this caused some engine and tooling problems (conflicts with IE's @cc_on), so it is now "#sourceMappingURL".



Source Maps in NodeJS

When NodeJS displays the error stack, it does not load the source map, which can be achieved with the source-map-support package.

$ npm install source-map-support
and add at the top of the code:

require('source-map-support/register');
then all stack locations will be updated to the real source locations.

Source Maps in VSCode VSCode supports using source maps while debugging, add in .vscode

/launch.json: {     "configurations": [         {             "sourceMaps": true,             "outDir": "${workspaceRoot}/build "         }     ] } Copy code Note that outDir must be set, otherwise there may be a problem that a breakpoint cannot be added. 3. How to generate source maps Now many generation tools support generating source maps, such as Uglify, Grunt, Gulp, you can refer to the documentation of the build tool. 4. Detailed explanation of source map format The source map is essentially a JSON, the format is such as: copy code {   version: 3,






















  file: 'min.js',
  names: ['bar', 'baz', 'n'],
  sourceRoot: 'http://example.com/www/js/',
  sources: ['one.js', 'two.js'],
  sourcesContent: ['', ''],
  mappings: 'CAAC,IAAI,IAAM,SAAUA,GAClB,OAAOC,IAAID;CCDb,IAAI,IAAM,SAAUE,GAClB,OAAOA'
}
Copy Code
Main It includes the following fields:

version: The version number of the Source Map, currently version 3 is used uniformly.
file: (optional) The path to the generated file (relative to the Source Map itself).
names: (optional) all names, such as variable names, function names, which are described in detail below.
sourceRoot: (optional) root path of all source files (relative to Source Map (source map) itself)
sources: path of all source files (relative to sourceRoot)
sourcesContent: (optional) content of all source files.
mappings: All mapping points, described in detail below.
Among them, all relative paths are calculated in the same way as relative addresses in web pages.

All addresses can be http: // URL or local file address.

sources

sources is an array, which means a file can be generated from multiple files.

Many readers will feel that there are too many paths here, so let me help you:

if the source file is xld.js, and xld.min.js and xld.min.js.map are generated by compression, then:

in xld.min. js needs to specify its source map through // #sourceMappingURL=xld.min.js.map.

In xld.min.js.map, you need to specify the file it takes effect through file: xld.min.js. file is not a required field, this field is only used for verification.

In xld.min.js.map, you need to specify the real source file address through sources: ["xld.js"].

sourceRoot

If there are many sources with the same prefix, they can be extracted into sourceRoot uniformly. So the following are equivalent:

{
  sources: ["a/foo.js", "a/bar.js"],
}
{
  sourceRoot : "a",
  sources: ["foo.js", "bar.js" ],
}
mappings

Mappings is the core of the record mapping relationship.

On the surface, mappings is a string consisting of many seemingly garbled characters.

In fact, mappings is an array obtained by encoding in a certain way. This array contains the list of mapping points for each line in the generated file:



mappings = [
   list of mapping points in row 1, list of mapping points in
   row 2,
   ...
] The list


of mapping points in each row is again an array containing the mapping points for all columns in that row.





mappings = [
    [ line 1 mapping point 1, line 1 mapping point 2, ... ] // list of mapping points for
    line 1 [ line 2 mapping point 1, line 2 mapping point 2 map points, ... ] // list of map points on line 2
    ...
]


Each map point is again an array of 5 numbers:

[ column of generated file, source file index, source file line number, source file column number, name index]
where the name index can be omitted. The source file index, source file line number, and source file column number can also be omitted at the same time,

which means that the length of the array of mapping points may be 1, 4 or 5.

All row and column numbers of the source map are counted from 0, and the row and column numbers used in this article are also counted from 0.

For example, there is now a source map as follows:

Copy code
1 {
2 version: 3,
3 file: 'min.js',
4 names: ['bar', 'baz', 'n'],
5 sourceRoot: 'http://example.com/www/js/'
6 sources: ['one.js', 'two.js'],
7 sourcesContent: ['', ''],
8 mappings: [
9 [],
10 [],
11 [
12 [1, 0, 2, 5, 1],
13 [4, 0, 3, 6, 0] // #13 line
14 ]
15 ]
16 }
Copy code
Take the data of line #13 as an example: line #13 appears in mappings[2], so It represents the information on line 2 of the generated file.

Line #13 contains 5 numbers, representing the generated file column = 4, source file index = 0, source file line number = 3, source file column number = 6, name index = 0.

The final result: In the generated file (ie min.js), the position of line 2, column 4 is from the position of line 3, column 6 in the 0th source code (ie http://example.com/www/js/one.js) Generated, the relevant name in the source code is 0 (ie bar).



Through multiple mapping points, the actual source code location corresponding to each location in the generated file can be defined one by one.

Note that even if the source code position of a certain row and column is specified, the position of the source code of the adjacent row and column cannot be inferred, and the mapping must be added one by one.



Name indexes can be used to quickly locate the uncompressed names of variables and functions.

mappings encoding

To save storage space, mappings are encoded as a string.

The first step: Calculate the relative

value Replace each number in the mapping point with the difference between the current mapping point and the corresponding position of the previous mapping point, such as:

copy code
mappings: [
    [
      [1, 0, 2, 5, 1],
      [ 2, 0, 3, 6, 0]
    ],
    [
      [5, 0, 2, 3, 0]
    ]
]
Copy code
where the first mapping point remains unchanged, and each number on each subsequent mapping point is subtracted from the upper The number of the corresponding position of a mapping point (allowing spanning lines) (if the number of mapping point elements is less than 5, the omitted part will be processed as 0), and finally get:

copy code
mappings: [
    [
      [1, 0, 2, 5, 1], // unchanged
      [1, 0, 1, 1, -1] // 1 = 2 - 1, 0 = 0 - 0, 1 = 3 - 2, 1 = 6 - 5, 1 = 0 - 1
    ],
    [
      [3, 0, -1, -3, 0] // 3 = 5 - 2, 0 = 0 - 0, -1 = 2 - 3, -3 = 3 - 6, 0 = 0 - 0
    ]
]
Copy code
Step 2 : Combine numbers

Write all numbers that appear in mappings into one line, separate different mapping points with , (comma), and separate lines with ; (semicolon).

1 0 2 5 1 , 1 0 1 1 1 ; 3, 0 , -1, -3, 0
Step 3: Encoding numbers

For each number, use VLQ encoding to convert it to letters, the specific conversion method is:

1 . If the number is negative, take its opposite.

2. Convert the number to its binary equivalent. And add the sign bit at the end, if the number is negative then add 1 otherwise add 0.

3. Divide the binary from right to left, take 5 bits at a time, and add 0 if there is insufficient.

4. Reverse the sorted binaries.

5. Each segment of binary is complemented by 1 at the front, and the last segment is complemented by 0. In this way, each piece of binary is 6 bits, and its value range is 0 to 64 (including 0, excluding 64).

6. Convert each segment of binary to letters according to the Base64 encoding table:



Take 170 as an example,

1) Convert to binary: 10101010

2) 170 is a positive number, and the right side is filled with 0: 101010100

3) Divide the binary from right to left: 10100, 1010 .

4) Add 0 for less than 5 digits: 01010, 10100

5) Reverse order: 10100, 01010

6) Add 0 in front of the last one, and add 1 in front of every other segment: 110100, 001010

7) Convert to decimal: 52, 10.

8) Look up the table and get: 0K



Any integer can be encoded by VLQ to get a string of text represented by letters and numbers.

The VLQ encoding was first used in MIDI files, and it can represent very large numbers very compactly.

Step 4: Combining the

results VLQ encoding and splicing each number in the second step is the final result.

CAEKC, CACCC; GADHA
5. Tools and frameworks related to source mapping
To better understand source mapping, source mapping visualization tools can be used.

For working with source maps, the official source-map library can be used.

At the same time, a better library is recommended: source-map-builder, which has higher performance and smarter derivation functions than the official library.

6. Reference link
Source Map Revision 3 Proposal

http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/

http://www.ruanyifeng.com/blog/2013/01/javascript_source_map.html