了解源地图

Question

我在 basic.js 文件中有以下带有行号的代码：

1 /**
2  * This is a multi-line comment.
3  * So the error shouldn't throw until a later line.
4  * Om nom nom.
5 */
6 throw new Error('Hello world!');

然后我缩小了文件：

1
2 throw new Error('Hello world!');
3 //@ sourceMappingURL=basic.js.map

和映射：

{
    "version" : 3,
    "file" : "basic.min.js",
    "sources" : ["basic.js"],
    "names" : [],
    "mappings" : "AAIG,AAAH;CACC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC"
}

我正在查看缩小文件中的第二行，因此我需要查看映射的这一部分：

CACC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC"

我使用这个 decoder 解码了第一段 CACC 并输出：

[1,0,1,1]

据我了解，根据 this tutorial，它指出 basic.min.js 中的第 1 列映射到 sources 中索引为 0 的文件，这是 basic.js，并映射到它的第 1 行和第 1 列。但它映射到原始数字中的第 6 行。我错过了什么？

Answer 1

你错过了

行和列从零开始
段值其实就是delta加上前一个值得到当前位置

逐行：

//basic.js
0 /**
1  * This is a multi-line comment.
2  * So the error shouldn't throw until a later line.
3  * Om nom nom.
4 */
5 throw new Error('Hello world!');

//basic.min.js
0 
1 throw new Error('Hello world!');
2 //@ sourceMappingURL=basic.js.map

//line 0
AAIG >  0,  0,  4,  3 // current value 0, 0, 4, 3
AAAH >  0,  0,  0, -3 // current value 0, 0, 4, 0
;
//line 1
CACC >  1,  0,  1,  1 // current value 1, 0, 5, 1

1 // output file column
0 // input file index
5 // input file line
1 // input file column

这让我们知道生成文件的第 1 行第 1 列映射到文件 0（在文件数组 0 中是 basic.js），第 5 行第 1 列。

看看可视化工具here

了解源地图

Understanding source maps

javascript

source-maps