借助JavaScript调用栈与.map文件能否定位TypeScript应用的代码位置？

VS Code 原生支持离线通过 Source Map 完成 JavaScript 调用栈到原始 TypeScript 代码的映射，无需使用在线工具，操作前需先确认 TypeScript 编译配置已开启 Source Map 生成：

tsconfig.json 中需配置 "sourceMap": true，推荐同时开启 "inlineSources": true 让 Source Map 嵌入原始 TS 源码，避免路径匹配问题。

方案1：完整调用栈批量解析（推荐） #

无需附加到正在运行的 Node 进程，通过调试配置即可直接解析异常栈：

1. 打开项目根目录下的 .vscode/launch.json 文件，不存在则新建
2. 添加如下调试配置：

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Source Map 调用栈解析",
      "runtimeArgs": [
        "--eval",
        "throw new Error('请替换为你实际获取到的完整JavaScript异常调用栈内容')"
      ],
      "sourceMaps": true,
      "resolveSourceMapLocations": [
        "${workspaceFolder}/**",
        "!**/node_modules/**"
      ],
      // 若调用栈中文件路径和本地路径不匹配，可通过以下参数调整映射规则
      // "sourceMapPathOverrides": {
      //   "/*": "${workspaceFolder}/*"
      // }
    }
  ]
}

3. 替换 runtimeArgs 中 --eval 后的异常内容为你实际拿到的完整 JS 调用栈
4. 按F5启动调试，调试控制台会自动完成 Source Map 解析，输出的调用栈会直接展示对应的 TS 源码位置，点击栈帧即可跳转到对应 TS 代码行。

方案2：单条栈帧快速查询 #

如果只需要解析某一行JS栈帧对应的TS位置，可以使用以下方法：

• 在项目中本地安装 source-map 工具包：npm install source-map -D
• 新建临时脚本parse-stack.ts，填入以下内容：

import { SourceMapConsumer } from 'source-map';
import * as fs from 'fs';

// 替换为你的.map文件路径、JS文件行列号
const MAP_FILE_PATH = './dist/index.js.map';
const JS_LINE = 123;
const JS_COLUMN = 45;

async function parse() {
  const rawMap = JSON.parse(fs.readFileSync(MAP_FILE_PATH, 'utf8'));
  const consumer = await new SourceMapConsumer(rawMap);
  const original = consumer.originalPositionFor({
    line: JS_LINE,
    column: JS_COLUMN
  });
  console.log('对应TS位置：', original);
  consumer.destroy();
}

parse();

• 运行脚本npx ts-node parse-stack.ts即可直接得到对应TS文件路径、行列号信息，全程离线无需上传数据。

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