如何借助Source Map根据压缩JS文件位置定位原JS文件位置？

假设你有三个文件：script.js（原文件）、script.minified.js（压缩文件）、script.minified.js.map（Source Map文件），需要根据压缩文件中的任意位置（比如script.minified.js:100:30，即第100行第30列），找到原文件script.js中对应的位置（比如script.js:200:30）。

方法一：浏览器开发者工具（最便捷） #

• 打开浏览器控制台（快捷键F12），切换到Sources面板
• 将三个文件导入到开发者工具工作区，或者直接在页面中引入压缩文件（浏览器会自动加载同目录下的Source Map文件）
• 在script.minified.js中定位到目标行（第100行），将光标移到第30列位置，或在行号左侧打一个断点
• 浏览器会自动通过Source Map映射到原文件，你可以在Sources面板中直接看到script.js的对应行号和列号

方法二：命令行工具（批量/自动化场景） #

用source-map-cli工具快速解析：

• 先全局安装工具：

  npm install -g source-map-cli
  

• 执行解析命令，传入Source Map路径、压缩文件的行号和列号：

  source-map resolve script.minified.js.map 100 30
  

• 命令会直接输出原文件的位置，格式类似：script.js:200:30

方法三：自定义代码实现（对应伪函数需求） #

借助官方source-map库编写逻辑：

• 先安装依赖：

  npm install source-map
  

• 编写实现代码：

  const fs = require('fs');
  const sourceMap = require('source-map');
  
  async function getOriginalPositionFromMinifiedPosition(sourceMapPath, row, column) {
    // 读取并解析Source Map文件
    const rawMap = JSON.parse(fs.readFileSync(sourceMapPath, 'utf8'));
    // 创建映射解析实例
    const consumer = await new sourceMap.SourceMapConsumer(rawMap);
    // 获取原文件位置
    const originalPos = consumer.originalPositionFor({
      line: row,
      column: column
    });
    consumer.destroy();
    return [originalPos.source, originalPos.line, originalPos.column];
  }
  
  // 调用示例
  getOriginalPositionFromMinifiedPosition('./script.minified.js.map', 100, 30)
    .then(([source, line, column]) => {
      console.log(`${source}:${line}:${column}`);
    });
  

• 运行代码后，会直接输出原文件的对应位置信息

相似问题翻译 #

Google Chrome：如何利用Source Map从压缩文件的行号找到原文件的行号？

内容的提问来源于stack exchange，提问作者Blogger 2015