VS Code中TypeScript Cloud Functions调试问题求助

我在终端运行命令：

firebase emulators:start --only functions,firestore --inspect-functions

当前使用的VS Code launch.json配置如下：

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "attach",
            "name": "Typescript Functions",
            "port": 9229,
            "restart": true,
            "skipFiles": ["<node_internals>/**"],
            "outFiles": ["${workspaceFolder}/typescript-functions/lib/*.js.map"]
        }
    ]
}

需求是调试服务端端点，通过POSTMAN调用。但发现JavaScript编写的函数调试正常，TypeScript代码的断点无法对应到源位置，推测是TypeScript源映射配置有问题，想知道遗漏了什么。

项目目录结构：

• 根目录下的.vscode文件夹存放launch.json
• typescript-functions文件夹内有：
  • src：存放TypeScript代码
  • lib：存放转译后的JavaScript代码和对应源映射文件

1. 修正outFiles配置路径 #

outFiles应指向编译后的JS文件而非源映射文件，调试器会自动从JS文件关联对应的.map文件。修改为：

"outFiles": ["${workspaceFolder}/typescript-functions/lib/**/*.js"]

2. 确保TypeScript编译配置生成正确的源映射 #

检查typescript-functions目录下的tsconfig.json，确认以下配置项：

{
  "compilerOptions": {
    "sourceMap": true, // 必须开启，生成源映射文件
    "outDir": "./lib", // 输出目录对应lib文件夹
    "rootDir": "./src", // 源文件根目录对应src文件夹
    "inlineSources": true // 可选，将TS源码嵌入源映射，提升映射可靠性
  }
}

修改后重新编译TypeScript代码：

cd typescript-functions && tsc

3. 完善VS Code调试配置的源文件关联 #

在launch.json中显式声明sourceMaps: true，并通过resolveSourceMapLocations限定源映射查找范围：

{
    "type": "node",
    "request": "attach",
    "name": "Typescript Functions",
    "port": 9229,
    "restart": true,
    "skipFiles": ["<node_internals>/**"],
    "outFiles": ["${workspaceFolder}/typescript-functions/lib/**/*.js"],
    "sourceMaps": true,
    "resolveSourceMapLocations": [
        "${workspaceFolder}/typescript-functions/lib/**",
        "!**/node_modules/**"
    ]
}

4. 确保模拟器加载最新编译代码 #

启动模拟器前先执行TypeScript编译，或在package.json中添加脚本自动编译：

{
  "scripts": {
    "build": "cd typescript-functions && tsc",
    "emulate": "npm run build && firebase emulators:start --only functions,firestore --inspect-functions"
  }
}

之后通过npm run emulate启动模拟器，确保加载最新的带源映射JS文件。

5. 验证断点映射 #

• 在VS Code的TS源码文件中设置断点
• 启动调试器（选择Typescript Functions配置并点击启动）
• 用POSTMAN调用对应端点，检查断点是否命中TS源码的正确位置

内容的提问来源于stack exchange，提问作者Raúl