如何事后将JavaScript压缩代码栈追踪解析为原始栈追踪？

针对压缩代码生成的栈追踪，以下是几款实用的Node.js工具和方案：

source-map-cli #

这是轻量的命令行工具，可快速解析单条或批量栈追踪信息。

• 安装：npm install -g source-map-cli
• 单条解析示例：

  source-map resolve main.f2912b75.chunk.js main.f2912b75.chunk.js.map 1 126651
  

  参数依次为：压缩后的JS文件、对应的map文件、栈追踪里的行号、列号。
• 批量处理：可编写简单脚本循环遍历栈追踪的每一行，自动完成解析。

自定义Node.js脚本（基于source-map库） #

如果需要更灵活的处理逻辑，可直接使用source-map库编写脚本：

1. 安装依赖：npm install source-map
2. 示例脚本：

const { SourceMapConsumer } = require('source-map');
const fs = require('fs').promises;

async function parseStackTrace() {
  // 读取对应版本的map文件
  const sourceMapContent = await fs.readFile('main.f2912b75.chunk.js.map', 'utf8');
  const consumer = await new SourceMapConsumer(sourceMapContent);

  // 待解析的栈追踪行列表
  const stackLines = [
    'mn@https://www.my-site.com/static/js/main.f2912b75.chunk.js:1:126651',
    '1249/Ru/i<@https://www.my-site.com/static/js/main.f2912b75.chunk.js:1:463723',
    // 其他栈追踪行...
  ];

  for (const line of stackLines) {
    // 匹配文件名、行号、列号
    const matchResult = line.match(/@.*\/(.*\.js):(\d+):(\d+)/);
    if (!matchResult) continue;
    
    const [, fileName, lineStr, colStr] = matchResult;
    const originalPos = consumer.originalPositionFor({
      line: parseInt(lineStr),
      column: parseInt(colStr)
    });

    console.log(`${originalPos.source || fileName}:${originalPos.line || lineStr}:${originalPos.column || colStr} (函数名: ${originalPos.name || '未知'})`);
  }

  consumer.destroy();
}

parseStackTrace().catch(err => console.error(err));

注意事项 #

• 必须保留对应构建版本的.map文件：每个生产构建生成的map文件与压缩代码一一对应，版本不匹配会导致解析结果错误。
• 不要将.map文件部署到生产环境：避免泄露原始源码，只需在内部存档即可。

内容的提问来源于stack exchange，提问作者Eric Liprandi