Understanding source maps

Question

I have the following code with line numbers in the basic.js file:

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!');

Then I have minified file:

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

And the mapping:

{
    "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"
}

I am looking at the second line in the minified file hence I need to look at this part of the mapping:

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"

I've decoded the first segment CACC using this decoder and it outputted:

[1,0,1,1]

As I understand according to this tutorial it states that the column 1 in the basic.min.js is mapped to the file with the index 0 in the sources , which is basic.js , and to its line 1 and column 1. But it's mapped to the line 6 in the original number. What am I missing?

Answer 1

You are missing that

1. lines and columns are zero based
2. segment value is actually delta added to the previous value to get the current position

Line by line:

//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

This lets us know that line 1, column 1 of the generated file maps to file 0 (in array of files 0 is basic.js), line 5 at column 1.

Take a look at visualisation tool here