JavaScript Source Map

JavaScript Source Map

Source Map. It is an independent map file. It is in the same directory as the source code. You can click it to see how it looks.

This is a very useful feature, which will be described in detail in this article.

1. Start with Source Code Conversion

JavaScript scripts are becoming increasingly complex. Most source code (especially various function libraries and frameworks) must be converted before they can be put into the production environment. A front-end UI framework that can improve development efficiency by 500%!

Common source code conversion mainly involves the following three situations:

(1) compression to reduce the volume. For example, the source code of jQuery 1.9 Is 252KB before compression and 32KB after compression. (2) Merge multiple files to reduce the number of HTTP requests. (3) compile other languages into JavaScript. The most common example is CoffeeScript.

These three situations make the actual running code different from the development code, and debugging becomes difficult.

Generally, the JavaScript interpreter will tell you the number of lines in which the code goes wrong. However, this is useless for the converted code. For example, jQuery 1.9 only has three lines after compression, each line contains 30 thousand characters, and all internal variables are renamed. When you look at the error message, you have no clue and do not know its original location.

This is the problem that Source map wants to solve.

2. What is Source map

Simply put, Source map is an information file that stores location information. That is to say, each position of the converted Code corresponds to the position before the conversion.

When an error occurs, the debugging tool displays the original code instead of the converted code. This undoubtedly brings great convenience to developers. A front-end UI framework that can improve development efficiency by 500%!

Currently, only Chrome supports this function. In DevelZ development? Http://www.bkjia.com/kf/ware/vc/ "target =" _ blank "class =" keylink "> vcGVyIFRvb2xztcRTZXR0aW5nyejWw9bQo6zIt8jP0aHW0A =" Enable source maps ".

3. How to enable Source map

As mentioned above, you only need to add a line at the end of the converted code.

//@ sourceMappingURL=/path/to/file.js.map

Map files can be stored on the network or local file system.

4. How to generate Source map

The most common method is to use Google's Closure compiler.

The command format is as follows:

java -jar compiler.jar \　　--js script.js \　　--create_source_map ./script-min.js.map \　　--source_map_format=V3 \　　--js_output_file script-min.js

The significance of each parameter is as follows: a front-end UI framework that can improve development efficiency by 500%!

-Js: code file before conversion-create_source_map: The generated source map file-source_map_format: source map version. Currently, V3 is used. -Js_output_file: The converted code file.

For other generation methods, refer to this article.

V. Source map format

Open the Source map file, which looks like this:

{　　　version : 3,　　　file: "out.js",　　　sourceRoot : "",　　　sources: ["foo.js", "bar.js"],　　　names: ["src", "maps", "are", "fun"],　　　mappings: "AAgBC,SAAQ,CAAEA"　}

The entire file is a JavaScript object that can be read by the interpreter. It has the following attributes:

-Version: Source map version. Currently, it is 3. -File: The converted file name. -SourceRoot: directory of the file before conversion. If it is in the same directory as the file before conversion, this item is blank. -Sources: the file before conversion. This is an array, indicating that multiple files may be merged. -Names: all variable names and attribute names before conversion. -Mappings: string used to record location information, which is described in detail below.

Vi. mappings attributes

The following is an interesting part: how the two files correspond to each other in one location.

The key is the mappings attribute of the map file. This is a long string that is divided into three layers.

The first layer isRow correspondence, In semicolon (;), each semicolon corresponds to a line of the converted source code. Therefore, the content before the first semicolon corresponds to the first line of the source code, and so on.

The second layer isLocation, Expressed by commas (,). Each comma corresponds to a location of the converted source code. Therefore, the content before the first comma corresponds to the first position of the source code of the line, and so on.

The third layer isLocation Conversion, Expressed in VLQ encoding, representing the source code position before conversion corresponding to this location.

For example, assume that the content of the mappings attribute is as follows: a front-end UI framework that can improve development efficiency by 500%!

mappings:"AAAAA,BBBBB;CCCCC"

The converted source code is divided into two rows. The first row has two locations, and the second row has one location.

VII. Principle of location correspondence

Each position uses five digits to indicate five fields.

From the left,

-The first column indicates the number of columns in the position (converted code. -The second digit indicates the file in the sources attribute. -The third digit indicates the line number of the code before the conversion. -The fourth digit indicates the column of the code before conversion. -The fifth digit indicates the variable in the names attribute.

Several notes are required. First, all values are based on 0. Second, the fifth digit is not required. If the location does not correspond to a variable in the names attribute, the fifth digit can be omitted. Once again, each bit is represented by VLQ encoding. Since VLQ encoding is longer, each bit can contain multiple characters.

If A location is AAAAA, because A represents 0 in VLQ encoding, the five digits in this location are actually 0. It means that the position is in The 0th columns of the converted code, corresponding to the 0th files in the sources attribute, and belongs to the 0th columns of the code before conversion, corresponds to the 0th variables in the names attribute.

8. VLQ Encoding

Finally, we will talk about how to use VLQ encoding to represent a value.

This encoding was first used for MIDI files and later used in multiple formats. It is characterized by a very simplified representation of large numbers.

VLQ encoding is variable-length. If the (integer) value is between-15 and + 15 (including two endpoints), it is represented by one character. Beyond this range, it must be represented by multiple characters. It specifies that each character uses six binary digits, which can be used to borrow a Base 64-encoded orders table. A front-end UI framework that can improve development efficiency by 500%!

In these six digits, the first (highest) on the left indicates whether to "continuation ). If the value is 1, the six digits after the six digits also belong to the same number. If the value is 0, the value ends at the end of the six digits.

Continuation
| Sign
|
V
101011

The meaning of the last digit on the right of the six digits depends on whether the six digits are the first character of VLQ encoding for a specific value. If yes, this bit indicates "sign" (sign), 0 is positive, and 1 is negative (the Source map symbol is fixed to 0). If not, this bit has no special meaning, is counted as a part of the value.

9. VLQ encoding: instance

The following is an example of how to perform VLQ encoding on the value 16.

Step 1: rewrite 16 to binary 10000.

Step 2: Add a symbol on the rightmost side. Because 16 is greater than 0, the sign bit is 0, and the entire number is 100000.

Step 3: Start from the second bit on the right and segment the entire number every five digits into segments 1 and 00000. If the maximum bit is in less than five segments, the first 0 is added, so the two segments are changed to 00001 and 00000.

Step 4: reverse the order of the two segments, that is, 00000 and 00001.

Step 5: Add a "continuous bit" at the beginning of each segment, except that the last segment is 0, and the others are 1, that is, they are 100000 and 000001.

A front-end UI framework that can improve development efficiency by 500%!

Step 6: convert each segment to Base 64 encoding.

According to the table, 100000 is g and 000001 is B. Therefore, the VLQ of the value 16 is encoded as gB. The above process, it seems very complex, it is actually very simple to do, the specific implementation Please see the official base64-vlq.js file, there are detailed notes.