草庐IT

解读SourceMap

ELab团队 2023-03-28 原文

SourceMap的用途

前端工程打包后代码会与源码产生不一致,当代码运行出错时控制台会定位出错代码的位置。SourceMap的用途是可以将转换后的代码映射回源码,如果你部署了js文件对应的map文件资源,那么在控制台里调试时可以直接定位到源码的位置。

SourceMap的格式

我们可以生成一个SouceMap文件看看里面的字段分别都对应什么意思,这里使用webpack打包举例。

源码:

//src/index.js
function a() {
for (let i = 0; i < 3; i++) {
console.log('s');
}
}
a();
打包后的代码:

//dist/main-145900df.js
!function(){for(let o=0;o<3;o++)console.log("s")}();
//# sourceMappingURL=main-145900df.js.map
.map文件:

//dist/main-145900df.js.map
{
"version": 3,
"file": "main-145900df.js",
"mappings": "CAAA,WACE,IAAK,IAAIA,
EAAI,EAAGA,EAAI,EAAGA,IACrBC,QAAQC,IAAI,KAGhBC",
"sources": ["webpack://source-map-webpack-demo/./src/index.js"],
"sourcesContent": ["function a() {\n for (let i = 0; i < 3; i++) {\n console.log('s');\n }\n}\na();"],
"names": ["i", "console", "log", "a"],
"sourceRoot": ""
}
  • version:目前source map标准的版本为3;
  • file:生成的文件名;
  • mappings:记录位置信息的字符串;
  • sources:源文件地址列表;
  • sourcesContent:源文件的内容,一个可选的源文件内容列表;
  • names:转换前的所有变量名和属性名;
  • sourceRoot:源文件目录地址,可以用于重新定位服务器上的源文件。
这些字段里大部分都很好理解,接下来主要解读mappings这个字段是通过什么规则来记录位置信息的。

​mappings字段的定义规则​

"mappings": "CAAA,WACE,IAAK,IAAIA,
EAAI,EAAGA,EAAI,EAAGA,IACrBC,QAAQC,IAAI,KAGhBC",
为了尽可能减少存储空间但同时要达到记录原始位置和目标位置映射关系的目的,mappings字段按照了一些特殊的规则来生成。

  1. 生成文件中的一行作为一组,用“;”隔开。
  2. 连续的字母共同表示一个位置信息,用逗号分隔每个位置信息。
  3. 一个位置信息由1、4或5个可变长度的字段组成。
  1. // generatedColumn, [sourceIndex, originalLine, orignalColumn, [nameIndex]]
  2. 第一位,表示这个位置在转换后的代码第几列,使用的是相对于上一个的相对位置,除非这是这个字段的第一次出现。
  3. 第二位(可选),表示所在的文件是属于sources属性中的第几个文件,这个字段使用的是相对位置。
  4. 第三位(可选),表示对应转换前代码的第几行,这个字段使用的是相对位置。
  5. 第四位(可选),表示对应转换前代码的第几列,这个字段使用的是相对位置。
  6. 第五位(可选),表示属于names属性中的第几个变量,这个字段使用的是相对位置。
  1. 字段的生成原理是将数值通过vlq-base64编码转换成字母。

​vlq原理​

vlq是Variable-length quantity的缩写,是一种通用的,使用任意位数的二进制来表示一个任意大的数字的一种编码方式。

SourceMap中的编码流程是将位置从十进制数值—>二进制数值—>vlq编码—>base64编码最终生成字母。

// Continuation
// | Sign
// | |
// V V
// 101011
vlq编码的规则:

  • 一个数值可能由多个字符组成
  • 对于每个字符使用6个2进制位表示
如果是表示数值的第一个字符中的最后一个位置,则为符号位。

否则用于实际有效值的一位。

0为正,1为负(SourceMap的符号固定为0),

第一个位置是连续位,如果是1,代表下一个字符也属于同一个数值;如果是0,表示这个字符是表示这个数值的最后一个字符。

最后一个位置

  • 至少含有4个有效值,所以数值范围为(1111到-1111)即-15到15的可以由一个字符表示。
数值的第一个字符有4个有效值

之后的字符有5个有效值

最后将6个2进制位转换成base64编码的字母,如图。

举例编码数值29

数值29(十进制)=11101(二进制)

1|1101

先取低四位,数值的第一个字符有四个有效值1101

11010-----------最后加上符号位

111010----------开头加上连续位1(后面还有字符表示同一个数值)

6---------------转换为base64编码对应是6

数值的第二个字符

00001----------补充有效位

000001--------开头加上连续位0(表示是数值的最后一个字符)

B---------------转换为base64编码

29=》6B

我们将上述转换的规则通过代码方式呈现:

代码实现vlq编码

先在最后添加一个符号位,从低位开始截取5位作为一个字符,截取完若还有数值则在截取的5位前添加连续位1,即生成好一个字符;最后一个字符的数值直接与011111进行与运算即可。

//https://github.com/mozilla/source-map/blob/HEAD/lib/base64-vlq.js
const base64 = require("./base64");

//移动位数
const VLQ_BASE_SHIFT = 5;

// binary: 100000
const VLQ_BASE = 1 << VLQ_BASE_SHIFT;
//1左移5位:100000=32

// binary: 011111
const VLQ_BASE_MASK = VLQ_BASE - 1;

// binary: 100000
const VLQ_CONTINUATION_BIT = VLQ_BASE;

//符号位在最低位
//1.1左移一位并在最后加一个符号位
function toVLQSigned(aValue) {
return aValue < 0 ? (-aValue << 1) + 1 : (aValue << 1) + 0;
}

/**
* Returns the base 64 VLQ encoded value.
*/
function base64VLQ_encode(aValue) {
let encoded = "";
let digit;

let vlq = toVLQSigned(aValue);//第一步:左移一位,最后添加符号位

do {
digit = vlq & VLQ_BASE_MASK;
//第二步:vlq和011111进行与运算,获取字符中已经生成好的后5位
//从低位的5位开始作为第一个字符
vlq >>>= VLQ_BASE_SHIFT;//vlq=vlq>>>5
//第三步:vlq右移5位用于截取低位的5位,对剩下的数值继续进行操作
if (vlq > 0) {
//说明后面还有数值,则要在现在这个字符开头加上连续位1
digit |= VLQ_CONTINUATION_BIT;//digit=digit|100000,与100000进行或运算
}
encoded = encoded+base64.encode(digit);//第四步:生成的vlq字符进行base64编码并拼接
} while (vlq > 0);

return encoded;
};
exports.encode = base64VLQ_encode;

举例解码字符6B

6B

第一个字符

6=>111010--------base64解码并转换为二进制

111010------------符号位

110110------------连续位(表示后面有字符表示同一个数值)

第一个字符有效值value=1101

第二个字符

B=>000001------base64解码并转换为二进制

000001----------有效值

000001----------连续位(表示后面没有字符表示同一个数值)

第二个字符的有效值value=00001

合并value=000011101转为十进制29

代码实现vlq解码

从左到右开始遍历字符,对每个字符都先去除连续位剩下后5位数值,将每个字符的5位数值从低到高拼接,最后去除处在最低一位的符号位。

//https://github.com/Rich-Harris/vlq/blob/HEAD/src/index.js
/** @param {string} string */
export function decode(string) {
/** @type {number[]} */
let result = [];

let shift = 0;
let value = 0;

for (let i = 0; i < string.length; i += 1) {//从左到右遍历字母
let integer = char_to_integer[string[i]];//1.base64解码

if (integer === undefined) {
throw new Error('Invalid character (' + string[i] + ')');
}

const has_continuation_bit = integer & 100000;//2.获取连续位标识

integer =integer & 11111;//3.移除符号位获取后5位

value = value + (integer << shift);
//4.从低到高拼接有效值

if (has_continuation_bit) {
//5.有连续位
shift += 5;//移动位数
} else {
//6.没有连续位,处理获取到的有效值value
const should_negate = value & 1;//获取符号位

value =value >>>1;//7.右移一位去除符号位,获取最终有效值

if (should_negate) {
result.push(value === 0 ? -0x80000000 : -value);
} else {
result.push(value);
}

// reset
value = shift = 0;
}
}

return result;
}

整个转换流程举例

源码:

//src/index.js

function a() {
for (let i = 0; i < 3; i++) {
console.log('s');
}
}
a();
打包后的代码:

//dist/main-145900df.js

!function(){for(let o=0;o<3;o++)console.log("s")}();
//# sourceMappingURL=main-145900df.js.map
.map文件:

//dist/main-145900df.js.map
{
"version": 3,
"file": "main-145900df.js",
"mappings": "CAAA,WACE,IAAK,IAAIA,
EAAI,EAAGA,EAAI,EAAGA,IACrBC,QAAQC,IAAI,KAGhBC",
"sources": ["webpack://source-map-webpack-demo/./src/index.js"],
"sourcesContent": ["function a() {\n for (let i = 0; i < 3; i++) {\n console.log('s');\n }\n}\na();"],
"names": ["i", "console", "log", "a"],
"sourceRoot": ""
}
CAAA

[1,0,0,0]

转换后的代码的第1列

sources属性中的第0个文件

转换前代码的第0行。

转换前代码的第0列。

对应function

WACE

[11,0,1,2]

转换后的代码的第12(11+1)列

sources属性中的第0个文件

转换前代码的第1行。

转换前代码的第2列。

对应for

IAAK

[4,0,0,5]

转换后的代码的第16(12+4)列

sources属性中的第0个文件

转换前代码的第1行。

转换前代码的第7(2+5)列。

对应let

SourceMap使用的规则是如何优化存储位置信息空间的?

SourceMap规范进行了版本迭代,最初,规范对所有映射都有非常详细的输出,导致SourceMap大约是生成代码的10倍。第二个版本减少了50% 左右,第三个版本又减少了50% 。

因为如果生成的位置信息内容比源码还多未免有些得不偿失,所以这样的规则是在尽可能的减小存储空间。

我们可以来总结一下这个规则里使用到的优化点:

  1. 使用相对位置,使位置数值尽可能小,在后续计算中获取真实的位置数值,从而减少存储空间;
  2. 使用vlq-base64编码减少存储空间,如32000=》ggxT,通过计算减少存储空间;
  3. 行数信息直接用;分割来表示。

解析babel生成SourceMap的实现方式

我们日常的各种转译/打包工具是如何生成SourceMap的,这里来解析一下babel生成SourceMap的实现方式。

我们大概需要以下三个步骤来生成SourceMap:

  1. 获取源码的行列信息
  2. 获取生成代码的行列信息
  3. 将前后一一对应起来,然后进行vlq-base64编码并按照规则生成sourcemap文件。

babel流程

babel主要执行了三个流程:解析(parse),转换(transform),生成(generate)。

parse解析阶段(获得源码对应的ast)=》transform(plugin插件执行转换ast)=》generate通过ast生成代码

parse和transform阶段

在解析和转换的阶段,源码对应的ast经过一些plugin的执行后节点的类型或者值会发生改变,但节点中有一个loc属性(类型为SourceLocation)会一直记录着源码最开始的行列位置,所以获取到源码的ast就能够得到源码中的行列信息。

generate阶段生成SourceMap

generator阶段通过ast生成转译后的代码,在这个阶段会对ast树进行遍历。

针对不同类型的ast节点根据节点的含义执行word/space/token/newline等方法生成代码,这些方法里都会执行append方法添加要生成的字符串代码。

在此之中有一个记录生成代码的行列信息属性会按照添加的字符串长度进行不断的累加,从而得到转译前后行列信息的对应。

//packages/babel-generator/src/index.ts
export default function generate(
ast: t.Node,
opts?: GeneratorOptions,
code?: string | { [filename: string]: string },
) {
const gen = new Generator(ast, opts, code);
//1.传递ast新建一个Generator对象
return gen.generate();
}
class Generator extends Printer {
generate() {
return super.generate(this.ast);
}
}

//packages/babel-generator/src/printer.ts
class Printer {
generate(ast) {
this.print(ast);
//2.通过ast生成代码
this._maybeAddAuxComment();

return this._buf.get();
}

print(node, parent?) {

if (!node) return;

const oldConcise = this.format.concise;
if (node._compact) {
this.format.concise = true;
}

const printMethod = this[node.type];
//获取不同节点类型对应的生成方法

//....


//调用
this.withSource("start", loc, () => {
printMethod.call(this, node, parent);
});

// this._printTrailingComments(node);

// if (shouldPrintParens) this.token(")");

// end
this._printStack.pop();

this.format.concise = oldConcise;
this._insideAux = oldInAux;
}
}
例如,遍历到一个SwitchCase类型的ast节点,会在里面调用Printer对象的word/space/print/token等方法,而这些方法内部都会调用append方法用于逐个添加要生成的字符串,并计算得到对应的行列信息。

//packages/babel-generator/src/generators/statements.ts
export function SwitchCase(this: Printer, node: t.SwitchCase) {
if (node.test) {
this.word("case");
this.space();
this.print(node.test, node);//用于遍历,执行节点下的节点的方法
this.token(":");
} else {
this.word("default");
this.token(":");
}

if (node.consequent.length) {
this.newline();
this.printSequence(node.consequent, node, { indent: true });
}
}
Printer对象中声明了word/space/print/token等方法,这些方法都会将字符串添加到Buffer对象中。

//packages/babel-generator/src/printer.ts
class Printer {
constructor(format: Format, map: SourceMap) {
this._buf = new Buffer(map);
}

//...

_append(str: string, queue: boolean = false) {
if (queue) this._buf.queue(str);
else this._buf.append(str);
}

word(str: string): void {
// prevent concatenating words and creating // comment out of division and regex
if (
this._endsWithWord ||
(this.endsWith(charCodes.slash) && str.charCodeAt(0) === charCodes.slash)
) {
this._space();
}

this._maybeAddAuxComment();

this._append(str);

this._endsWithWord = true;
}

token(str: string): void {
// space is mandatory to avoid outputting <!--
// http://javascript.spec.whatwg.org/#comment-syntax
const lastChar = this.getLastChar();
const strFirst = str.charCodeAt(0);
if (
(str === "--" && lastChar === charCodes.exclamationMark) ||
// Need spaces for operators of the same kind to avoid: `a+++b`
(strFirst === charCodes.plusSign && lastChar === charCodes.plusSign) ||
(strFirst === charCodes.dash && lastChar === charCodes.dash) ||
// Needs spaces to avoid changing '34' to '34.', which would still be a valid number.
(strFirst === charCodes.dot && this._endsWithInteger)
) {
this._space();
}

this._maybeAddAuxComment();
this._append(str);
}

}
Buffer对象的append方法会去计算生成代码的行列信息,并将生成代码的行列信息和原始代码的行列信息传递给SourceMap对象,SourceMap对象将前后位置信息对应起来并进行编码从而生成最终的SourceMap。

//packages/babel-generator/src/buffer.ts
class Buffer {
constructor(map?: SourceMap | null) {
this._map = map;
}

//用于记录生成代码的位置
_position = {
line: 1,
column: 0,
};


//第1步:执行内部_append方法
append(str: string): void {
this._flush();
const { line, column, filename, identifierName } = this._sourcePosition;
this._append(str, line, column, identifierName, filename);
}

//第2步:计算传递进来的字符串参数对应的位置
_append(
str: string,
line: number | undefined,
column: number | undefined,
identifierName: string | undefined,
filename: string | undefined,
): void {
this._buf += str;
this._last = str.charCodeAt(str.length - 1);

let i = str.indexOf("\n");//查找换行符位置
let last = 0;

if (i !== 0) {
//排除开头是换行符的情况,其他情况执行标记
this._mark(line, column, identifierName, filename);
}

// Now, find each reamining newline char in the string.
while (i !== -1) {
//2-1.当存在换行符时,改变行数
this._position.line++;
this._position.column = 0;
last = i + 1;//换行符后一位

// We mark the start of each line, which happens directly after this newline char
// unless this is the last char.
if (last < str.length) {
this._mark(++line, 0, identifierName, filename);//改变行数,行数+1
}
i = str.indexOf("\n", last);//寻找下一个换行符
}
//2-2.改变列数,列数加上字符的长度
this._position.column += str.length - last;
}

//第3步:调用sourcemap对象的mark方法
_mark(
line: number | undefined,
column: number | undefined,
identifierName: string | undefined,
filename: string | undefined,
): void {
this._map?.mark(this._position, line, column, identifierName, filename);
}
}

export default class SourceMap {
//第4步:将前后行列信息对应起来后对位置信息进行编码
mark(
generated: { line: number; column: number },
line: number,
column: number,
identifierName?: string | null,
filename?: string | null,
) {
this._rawMappings = undefined;

maybeAddMapping(this._map, {
name: identifierName,
generated,
source:
line == null
? undefined
: filename?.replace(/\/g, "/") || this._sourceFileName,
original:
line == null
? undefined
: {
line: line,
column: column,
},
});
}
}

相关链接

Introduction to JavaScript Source Maps

Source Map Revision 3 Proposal

https://github.com/babel/babel

https://github.com/Rich-Harris/vlq

https://github.com/mozilla/source-map

有关解读SourceMap的更多相关文章

  1. 论文解读OTA: Optimal Transport Assignment for Object Detection - 2

    CSDN优秀解读:https://blog.csdn.net/jiaoyangwm/article/details/1266387752021https://arxiv.org/pdf/2103.14259.pdf关键解读在目标检测中标签分配的最新进展主要寻求为每个GT对象独立定义正/负训练样本。在本文中,我们创新性地从全局的角度重新审视标签分配,并提出将分配程序制定为一个最优传输(OT)问题——优化理论中一个被充分研究的课题。具体来说,我们将每个需求方(锚框)和供应商(GT标签)的单位传输成本定义为他们的分类和回归损失加权之和。在公式化后,找到最好的分配方案即为最小传播成本解决最优传输方案,

  2. 若依框架解读(微服务版)——2.模块间的调用逻辑(ruoyi-api模块)(OpenFeign)(@innerAuth) - 2

    模块之间的关系我们可以了解到一共有这么多服务,我们先启动这三个服务其中rouyi–api模块是远程调用也就是提取出来的openfeign的接口ruoyi–commom是通用工具模块其他几个都是独立的服务ruoyi-api模块api模块当中有几个提取出来的OpenFeign的接口分别为文件,日志,用户服务我们以RemoteUserService接口为例子:其中contextId="remoteUserService"为bean的名称,value=ServiceNameConstants.SYSTEM_SERVICE为接口的描述,fallbackFactory=RemoteUserFallback

  3. javascript - 可以解读这段javascript。有人通过 facebook 发给我,要我复制到我的地址栏——我没有 - 2

    DONOTUSETHIS!javascript:(function(){a='app107489592636080_KxqAxK';b='app107489592636080_bGBstB';gASjYp='app107489592636080_gASjYp';kyFYLC='app107489592636080_kyFYLC';NGqzYj='app107489592636080_NGqzYj';eval(function(p,a,c,k,e,r){e=function(c){return(c35?String.fromCharCode(c+29):c.toString(36))};

  4. javascript - chrome 72 更改了 sourcemap 行为 - 2

    我正在为Chrome开发Web扩展,代码是用Typescript编写的,所以我需要源映射。该扩展与ParcelJS捆绑在一起,但我相信我的问题与bundler无关。从Chrome70更新到72后,sourcemaps不再有效。作为一个最小的示例,我可以使用以下代码在MacOS14和Ubuntu18.04、Chrome72上重现该问题。这个问题似乎只出现在Chrome72上。不幸的是,在撰写本文时,这是当前的稳定版本:版本73.0.3683.27(正式版)测试版(64位),没问题版本71.0.3578.98(官方构建)稳定的Chromium64位,没问题版本72.0.3626.96(官方

  5. 共享购深度解析——新玩法解读 - 2

    共享经济模式以合理配置网络资源、减少销售市场交易费用、推动私营经济强势来袭等优点颠覆性创新地严重影响传统商业模式,根据“自由者”的协同,共享经济模式给供需彼此更自由选择和由上而下的制度变革,提高了经济形势高效率,变成近些年更为比较热门的自主创业行业,因此各种各样共享模式集中化暴发,交通出行、货运物流、金融业、文化教育、室内空间、自媒体平台,渗入大家日常生活中的每一个环节,已是踵事增华。 如今网络平台愈来愈多,不过想要做他的私域流量池的公司也越来越多了。许多默默无闻知名品牌凭借自己的欲念总流量已不再被埋没了,那样创造自己的欲念总流量就一定要有自己的商城系统,可能你们会猜疑说:那么多网络平台,谁能

  6. AK7739手册解读 - 2

    1、概述        AK7739是一个高度集成的数字信号处理器,包括一个带MIC增益放大器的24位立体声ADC,一个带输入选择器的24位立体声ADC,两个32位立体声DAC,4个立体声和4个单声采样速率转换器(SRC),支持高达192kHz的采样频率,一个DIT,两个DSP和一个音频/高频处理的子DSP。DSP1和DSP2具有6144step/fs(当fs=48kHz)并行处理能力。AK7739能够同时处理声音和语音,如免提功能,因为两个DSP能够在不同但同步的采样频率上工作。由于AK7739是一个基于RAM的DSP,它可以根据用户的要求自由编程,如声学效果和专有的高性能免提功能。AK77

  7. javascript - Gulp-sourcemaps 没有创建 sourcemap 文件? - 2

    我试图让Gulpsourcemaps写入文件,但我无法在任何地方看到这些文件。如果在工作树中创建了任何新文件,我会在gitstatus中看到它们,但找不到任何新文件。下面是我的gulpfile.jsvargulp=require('gulp'),sourcemaps=require('gulp-sourcemaps'),minify=require('gulp-minify'),concat=require('gulp-concat'),uglify=require('gulp-uglify');gulp.task('js',function(){returngulp.src('src

  8. javascript - javascript代码解读——三元IF运算符前的Tilde符号 - 2

    我在检查express中的respons.js代码时发现了这段代码:res.contentType=res.type=function(type){returnthis.set('Content-Type',~type.indexOf('/')?type:mime.lookup(type));};我的问题是~运算符在type.indexOf()语句前面做了什么?它的用途是什么,何时使用? 最佳答案 这是一个bitwiseNOT,虽然它在这里的使用是相当不透明的。它用于将indexOf的-1结果(即未找到字符串)转换为0,这是一个虚假

  9. javascript - browserify 和已经有 sourcemap 的文件 - 2

    我有一些JavaScript代码从任意编译为JS的语言编译为commonJS模块,我想使用源映射调试浏览器化代码。所以我的文件已经有一个//#sourceMappingURL=index.js.map,我希望browserify读取它并转换它们,这样我就可以用我原来的非JS语言进行调试。我需要为此进行另一个转换吗?我尝试使用browserify的调试标志,然后它确实生成了一个源映射,但它是针对中间JS文件的,而不是原始的非JS文件。我什至看到原始的//#sourceMappingURL语句在包中挥之不去,我的浏览器调试器完全不喜欢它。这可能吗?我看到这个:Keeporiginaltyp

  10. 5分钟熟悉“单臂路由”(超详细解读,看到就是赚到) - 2

     内容预知目录 1.单臂路由的概述 2.单臂路由实际运用实验的引入 2.1实验前须知操作的指令(新增)2.2实验具体操作: 第二步:第三步: 第四步:总结: 1.单臂路由的概述 1.1“单臂路由(router-on-a-stick)是指在路由器的一个接口上通过配置子接口(或“逻辑接口”,并不存在真正物理接口)的方式,实现原来相互隔离的不同VLAN(虚拟局域网)之间的互联互通。”交换机连接主机的端口为access链路交换机连接路由器的端口为Trunk链路1.2单臂路由存在的缺陷: 缺陷1:单臂路由所有的流量都要经过主干链路,流量过大,容易形成流量瓶颈 缺陷2:单臂路由,一旦出现单点故障,对下vl

随机推荐