SourceMap文件内部的mappings属性怎么利用VLQ编码将编译后坐标映射回原文件-js教程-PHP中文网

mappings 是 sourcemap 最核心字段，采用 base64-vlq 编码的增量坐标流：以分号分隔行、逗号分隔段，每段最多 5 个 vlq 值，依次表示生成列偏移、源文件索引、源行偏移、源列偏移、名称索引（可选），所有坐标均从 0 开始，通过累加差值精准还原原始位置。

sourcemap文件内部的mappings属性怎么利用vlq编码将编译后坐标映射回原文件

mappings 是 SourceMap 文件中最核心的字段，它用一串紧凑的 Base64-VLQ 编码字符串，把编译后（生成）代码中的每个可调试位置，精确映射回原始源码的行列和变量名。这个过程不是靠“猜”，而是靠差值编码 + 逐段解码 + 累加还原。

下面直接讲清楚它是怎么利用 VLQ 实现映射的：

mappings 的结构本质是“增量坐标流”

mappings 不是直接存绝对位置，而是按生成代码的行 → 列顺序，记录每一段映射关系的相对变化量（delta）。每一行以 ; 分隔，每行内用 , 分隔多个 mapping 段；每个段对应生成代码中一个 token（如变量、关键字、操作符）在源码中的归属。

例如：
"mappings":"AAAA,IACE,MAAMA,EAAMC,MAAQ,EACtB,CAAE,MAAOC,GACPC,QAAQC,IAAIF"
→ 第 0 行有 1 段 AAAA，第 1 行有 11 段，以此类推。

每段最多含 5 个 VLQ 编码数，依次表示：

生成列偏移（相对于上一个 mapping 的列号，首段从 0 开始）
源文件索引（在 sources 数组中的下标，如 sources: ["a.js", "b.ts"]，则 0 指 a.js）
源行号偏移（相对于上一个 mapping 所在源行，首段从 0 开始）
源列偏移（相对于上一个 mapping 所在源列，首段从 0 开始）
名称索引（在 names 数组中的下标，如 names: ["sum", "count"]，0 对应 "sum"；可省略）

注意：所有行列号在 SourceMap 规范中均从 0 开始计数（尽管浏览器控制台显示为 1-based，那是 UI 层转换）。

VLQ 编码如何压缩这些整数？

VLQ（Variable Length Quantity）是一种变长整数编码，专为小差值优化设计。它把一个有符号整数拆成若干 6-bit 组（Base64 字符），每组最高位（bit 5）作 continuation flag：

若该字节的最高位为 1，说明还有下一个字节参与编码；
最低位 bit 0 用于符号位（1 表示负数，0 表示正数）；
其余 5 位（bit 1–5）是有效数据位。

Base64 字符表（64 个）：
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/

例如 VLQ 字符 'A' → ASCII 65 → 二进制 1000001 → 取低 6 位 000001 = 1，且 continuation 位为 0 → 解码为 1
字符 'I' → ASCII 73 → 1001001 → 低 6 位 001001 = 9，continuation 位 0 → 9
字符 'S' → ASCII 83 → 1010011 → 低 6 位 100011 = 35？不对——实际查表得 'S' 是第 18 个（0-indexed），即 18，再按 VLQ 规则反推其代表的数值。

关键点在于：VLQ 解码必须按字节顺序读取，每次取 6 位，忽略 continuation 位，最后拼接并恢复符号。

ApiPost接口调试与文档生成工具

ApiPost是一个支持团队协作，支持模拟POST、GET、PUT等常见请求，并可直接生成文档的API调试、管理工具，ApiPost是后台接口开发者或前端、接口测试人员的工作必备工具。快速生成、一键导出API文档。感兴趣的朋友快来下载吧。软件说明ApiPost官方版是一款十分出色的接口调试与文档生成工具，ApiPost官方版界面美观大方，功能强劲实用，支持团队协作，支持模拟POST、GET、PUT等常见请求，是后台接口开发者或前端、接口测试人员的工作必备工具。软件特色更方便支持接口调试的同时快速生成、一键

下载

举个真实片段还原例子

取 mappings 中一段："IACE"
→ 拆成 4 个 VLQ：I, A, C, E

查 Base64 索引（A=0, B=1, ..., I=8, A=0, C=2, E=4）：
[8, 0, 2, 4]

按 VLQ 解码规则（已知均为单字节、无 continuation）：

8 → 正数（最低位为 0），值 = 8 >> 1 = 4
0 → 0 >> 1 = 0
2 → 2 >> 1 = 1
4 → 4 >> 1 = 2

所以 IACE 对应 [4, 0, 1, 2]，含义是：

生成代码当前 token 距上一个 mapping 的列偏移：+4
属于 sources[0]（第一个源文件）
源码行号比上一个 mapping 多 +1 行
源码列号比上一个 mapping 多 +2 列

如果这是该行第一个 mapping，且前面没有其他段，则默认生成位置为第 0 行第 0 列，那么它映射到：

生成位置：第 0 行，第 4 列
源位置：sources[0] 的第 1 行（0+1）、第 2 列（0+2）

浏览器或调试器怎么用它？

当 Chrome 在压缩代码第 0 行第 4 列抛出错误时：

它定位到 mappings 第 0 行（AAAA,IACE,... 这部分）；
逐个解码 mapping 段，累加列偏移直到覆盖目标列（这里是第 2 段 IACE，累计列达 4）；
根据 sources[0] 和解出的源行列（1,2），从 sourcesContent[0] 或网络加载的 sources[0] 中取出对应位置的原始代码；
把那一片源码高亮展示在 DevTools 的 Sources 面板里，完成“所见即所写”。

整个过程不依赖源码内容比对，纯靠坐标映射，因此即使变量名被混淆（如 sum → o），只要 names 字段存在且 mapping 包含第 5 项，也能还原变量语义。

不复杂但容易忽略的是：所有 delta 都是累积式相对值，不是独立坐标。解码必须严格按顺序、维护上下文状态（上一个生成列、上一个源行列），跳段或乱序就会完全错位。