北京华网天下

深入解析Sourcemaps：如何解读编译代码与源代码的映射关系

2024-12-29

来源：网络整理

什么是

等工具会对源代码进行编译，生成编译后的代码（以下简称目标代码），编译后的代码保留了目标代码在源代码中的位置信息。

---------大神的分割线---------

如何解读

是一个json

{ "version": 3, "sources": ["a.js", "b.js"], // 源文件列表，这个表示是由 a.js 和 b.js 合并生成 "names": ["myFn", "test"], // 如果开启了变量名混淆，这里会保留变量名在源文件中名字信息 "sourcesContent: [], // 可选项，保存源码信息，顺序与 sources 字段对应，chrome 的 sources 面板中源码使用了这个字段的内容进行展示 "sourceRoot": "", // 源文件所在的目录信息 "file": "dist.js", // 可选，编译后的文件名 "mappings": "" // 这个是重点，是目标代码和源文件的位置的映射关系 }

有关目标文件“line”的信息

用;分隔，每个部分对应一行目标代码

如：“;AAAA;AAAA,BBBB;;”

本例中的目标文件有4行

第0行和第3行没有源文件对应信息，因此这两行是编译过程中添加的代码。

目标文件的“列”信息

如：“AAAA、CAEA、CAEA；”

','表示行内的位置信息分隔符

该示例表明目标文件的这一行具有三个有效的位置信息。

位置信息的第一位表示目标文件的列的偏移信息。

本例中列信息为‘A’、‘C’、‘C’，对应的数字为0、+1、+1，（vlq编码，在线编解码工具）

注意，这是偏移量信息；

列数从0开始，依次累加偏移值，计算出当前位置信息对应的真实列。

那么这个例子代表的是目标文件第n行的第0列、第1列、第2列（没错，就是第2列）。

源文件信息

如：'AAAA;ACAA;ADAA;'

位置信息的第二位代表源文件信息。在这个例子中，它是“A”、“C”和“D”，对应的数字是0、+1和-1。

如果该字段中只有一个文件，则位置信息中的第二位数字始终为 A（无需偏移）

假设：['a.js', 'b.js'] 这个例子意味着

AAAA：目标文件第0行第0列对应第0个文件a.js

亚洲航空协会；目标文件第1行第0列对应第1个文件b.js

阿达达；目标文件第2行第0列对应第0个文件a.js（偏移量为-1，返回a.js）

源文件行信息

位置信息的第三位代表源文件中的行信息。我们很容易理解位置偏移的概念。

微信开发者工具小程序怎么运行_微信开发者工具项目_微信开发工具怎么运行

如：'AACA,CACA;AACA;'

所以

AACA：目标文件的第0行第0列对应第0个文件的第1行

CACA：目标文件的第0行0+1列对应第0个文件的第1+1行。

AACA：目标文件的第1行第0列对应第0个文件的第1行（注：';'后的行列偏移信息返回0）

源文件中的列信息

第四位位置信息代表源文件中的列信息

如：“AAAA，CAAC；”

所以

AAAA：目标文件的第0行0列对应第0个文件的第0行0列。

CAAC：目标文件第0行0+1列对应第0个文件第0行0+1列

第五位位置信息

第五位表示变量的偏移量，对应域in，表示目标文件中的变量名对应域源文件中的变量。

如：'AAAA,;;'

中间字段是 ['a', 'b']

所以

AAAA：目标文件的第0行0列对应第0个文件的第0行0列，无变量信息。

：目标文件的第0行0+1列对应第0个文件的第0行0+1列。存在可变信息。源文件中的变量为“b”(0+1=1)。

：目标文件的第1行第0列对应第0个文件的第0行0列。存在可变信息。源文件中的变量为“a”(1-1=0)。

---------大神的分割线---------

如何使用

Q：在线小程序报错时，如何恢复到源代码？

A：如果报.js 1:，则说明目标文件的第一行第一列报错。根据上面的介绍，是通过字段来计算的。

问：没有。

A：如果你会写代码，请参考以下内容

import fs = require('fs') import {SourceMapConsumer} from 'source-map' async function originalPositionFor(line, column) { const sourceMapFilePath = '如果你不真的替换的成 sourcemaps 在硬盘中的位置，那你还是放弃自己写代码吧。 ' const sourceMapConsumer = await new SourceMapConsumer(JSON.parse(fs.readFileSync(sourceMapFilePath, 'utf8'))) return sourceMapConsumer.originalPositionFor({ line, column, }) }