VSCode调试webpack+TypeScript项目时如何断点进入被引用TS项目代码

完全可以实现该需求，核心是让VS Code调试器正确识别被引用项目的源码映射、路径别名，且不将目标依赖项目判定为需跳过的外部代码，具体配置步骤如下：

1. 调整两个项目的TypeScript编译配置 #

两个项目的tsconfig.json都需要开启源码映射，同时父项目的路径别名要和webpack配置对齐：

• 被引用项目debug-jest-lib的tsconfig.json的compilerOptions新增/修改以下配置：

{
  "compilerOptions": {
    // 开启源码映射
    "sourceMap": true,
    // 生成类型声明文件（可选，用于类型提示）
    "declaration": true,
    // 确保sourcemap中记录的源码路径正确
    "sourceRoot": "./src"
  }
}

• 父项目debug-jest-ref的tsconfig.json的compilerOptions新增/修改以下配置：

{
  "compilerOptions": {
    "sourceMap": true,
    "baseUrl": "./",
    // 和webpack的@mathlib别名配置对齐，让TS和调试器能找到对应源码路径
    "paths": {
      "@mathlib": ["../debug-jest-lib/src/index.ts"],
      "@mathlib/*": ["../debug-jest-lib/src/*"]
    }
  }
}

2. 调整webpack打包配置（仅针对webpack构建场景） #

父项目的webpack配置中，将devtool修改为支持源码映射到原始TS文件的模式，不要使用eval类的低精度sourcemap：

module.exports = {
  // 可选值：source-map / inline-source-map / cheap-module-source-map
  devtool: 'source-map'
}

3. 配置VS Code调试规则 #

打开父项目的.vscode/launch.json文件，新增/修改以下配置项：

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "program": "${workspaceFolder}/src/index.ts",
      "preLaunchTask": "tsc: build - tsconfig.json",
      // 包含父项目和被引用项目的编译产物，让调试器能找到对应的js文件
      "outFiles": [
        "${workspaceFolder}/dist/**/*.js",
        "${workspaceFolder}/../debug-jest-lib/dist/**/*.js"
      ],
      // 允许调试器解析两个项目的sourcemap，排除无关的node_modules文件
      "resolveSourceMapLocations": [
        "${workspaceFolder}/**",
        "${workspaceFolder}/../debug-jest-lib/**",
        "!**/node_modules/**"
      ],
      // 配置跳过的文件，不要跳过被引用的lib项目代码
      "skipFiles": [
        "<node_internals>/**",
        "${workspaceFolder}/node_modules/**",
        "!${workspaceFolder}/../debug-jest-lib/**"
      ]
    }
  ]
}

4. 验证效果 #

• 先重新编译debug-jest-lib项目，确保生成了最新的编译产物和sourcemap
• 重启VS Code，打开父项目后按F5启动调试，断点命中math.add(1,1)行时按F11即可步入该方法内部查看执行逻辑

内容的提问来源于stack exchange，提问作者Code Of Light