sourcemap 用于将混淆后代码的行列号映射回原始源码位置，需通过 source-map 库解析 .map 文件，将报错位置（如 app.min.js:32:145）转换为 0-based 坐标后查询 originalpositionfor，再结合 sources 路径读取原始文件还原上下文。
SourceMap 本身不加密，所谓“加密行列号”其实是混淆（如 UglifyJS、Terser、webpack 的 production 模式）后代码的行列表示被重映射了，而 SourceMap 就是用来把混淆后的行列号反查回原始源码位置的桥梁。Node.js 的 source-map 库（官方库：mozilla/source-map）可以手动解析 .map 文件，并将线上报错中的混淆后位置（如 app.min.js:32:145）映射回原始文件名、行、列和源码片段。
准备：拿到三个关键材料
要还原错误，你必须有：
-
线上报错堆栈：例如
TypeError: Cannot read property 'x' of undefined at app.min.js:32:145 -
混淆后的 JS 文件（
app.min.js）——用于确认是否含内联 SourceMap 或 sourceMappingURL -
对应的 .map 文件（如
app.min.js.map）——真正存储映射关系的数据，必须可读取（本地或远程 HTTP 可访问）
安装与加载 source-map 库
安装官方库：
npm install source-map
在 Node.js 脚本中加载并读取 .map 文件：
const fs = require('fs');
const { SourceMapConsumer } = require('source-map');
<p>// 同步读取 .map 文件内容（确保 UTF-8 编码）
const mapData = fs.readFileSync('./app.min.js.map', 'utf8');
const consumer = await new SourceMapConsumer(mapData); // 注意：SourceMapConsumer 是异步构造函数（返回 Promise）
</p>
解析混淆后位置 → 原始位置
假设报错是 app.min.js:32:145，即混淆后文件第 32 行、第 145 列（注意：SourceMap 行列号从 0 开始，但报错通常从 1 开始，需减 1）：
Wjs Uploading Video
下载
将一个或多个视频上传至YouTube。当用户想“上传到YouTube”“发YouTube”“批量上传”“upload to YouTube”“post videos to YouTube”或发布到YouTube时使用此技能。
const originalPos = consumer.originalPositionFor({
line: 32 - 1, // 转为 0-based
column: 145 - 1,
bias: SourceMapConsumer.GREATEST_LOWER_BOUND // 推荐：更稳定匹配
});
<p>console.log(originalPos);
// 输出类似：{ source: 'src/index.ts', line: 123, column: 8, name: 'handleClick' }
</p>
如果 originalPos.source 存在，说明映射成功；若为 null 或 source === null，常见原因包括：
- .map 文件未正确生成（比如 webpack 配置漏了
devtool: 'source-map'或inline-source-map） - 路径不匹配（.map 中的
sources字段记录的是构建时的相对/绝对路径，需确保能定位到原始文件） - 列映射缺失（某些压缩器默认只映射行，可配
columns: true或启用完整列映射）
进一步还原原始代码上下文
仅知道行列还不够，你还想看到报错附近几行原始代码？需要额外读取 originalPos.source 对应的源文件：
if (originalPos.source) {
const srcPath = path.resolve(__dirname, 'src', originalPos.source); // 根据 sources 路径调整
const srcCode = fs.readFileSync(srcPath, 'utf8');
const lines = srcCode.split('\n');
const startLine = Math.max(0, originalPos.line - 3);
const endLine = Math.min(lines.length, originalPos.line + 3);
<p>console.log(<code>→ ${originalPos.source}:${originalPos.line + 1}:${originalPos.column + 1}</code>);
for (let i = startLine; i ' : ' ';
console.log(<code>${marker}${i + 1}: ${lines[i]}</code>);
}
}
</p>
这样就能打印出带指针的原始上下文，辅助定位真实问题。
注意事项与常见坑
实际使用中容易忽略的关键点：
-
SourceMapConsumer 构造是异步的，必须用
await或.then()，否则后续调用会失败 - 行列号务必转 0-based，否则几乎一定查不到
-
sources 字段可能是相对路径，需结合 .map 文件所在目录拼接真实路径（可用
consumer.sourceContentFor('src/index.ts')如果内嵌了源码） -
生产环境慎用 inline SourceMap（base64 写在 JS 尾部），体积大且可能被 CDN 缓存或过滤；推荐独立 .map 文件 +
Access-Control-Allow-Origin: *（若跨域加载） - 若用 webpack/vite，确保构建时开启完整 SourceMap（如
devtool: 'source-map'），而非cheap类型（它们不包含列映射）
不复杂但容易忽略细节，核心就是：对上位置、读对文件、转对索引、查对路径。
