如何在VS Code中调试Angular v10应用引用的自定义npm库

1. 确认依赖库构建时输出完整SourceMap #

你自行维护的@abc/library默认会在构建时关闭SourceMap输出，需要先调整库项目的angular.json配置：

// 库项目的angular.json，对应@abc/library的build配置节点
"build": {
  "options": {
    "sourceMap": true,
    "optimization": false // 调试阶段关闭代码压缩，避免断点偏移
  }
}

配置完成后重新构建库，开发阶段建议开启watch模式实时更新构建产物：
ng build @abc/library --watch

2. 调整Angular应用的额外配置 #

在应用根目录的tsconfig.json中新增软链接解析配置，避免npm link生成的软链接被编译逻辑忽略：

// 应用的tsconfig.json > compilerOptions节点
"compilerOptions": {
  "preserveSymlinks": true,
  // 其余原有配置保持不变
}

同时在应用的angular.json的build配置中新增同参数：

// 应用的angular.json > build > options节点
"options": {
  "preserveSymlinks": true,
  "sourceMap": {
    "scripts": true,
    "styles": true,
    "vendor": true
  }
  // 其余原有配置保持不变
}

3. 配置VS Code调试映射规则 #

打开应用项目的.vscode/launch.json，调整Chrome调试配置，新增SourceMap路径映射，匹配你在Chrome开发者工具中看到的webpack路径：

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "ng serve调试",
      "url": "http://localhost:4200",
      "webRoot": "${workspaceFolder}",
      "resolveSourceMapLocations": [
        "${workspaceFolder}/**",
        // 替换为你本地@abc/library库源码的实际根目录
        "/Users/xxx/workspace/abc-library-project/**",
        "!**/node_modules/!(@abc/library)/**"
      ],
      "sourceMapPathOverrides": {
        // 匹配Chrome中看到的webpack路径，映射到本地库的实际源码路径
        "webpack://./node_modules/@abc/projects/library/src/lib/*": "/Users/xxx/workspace/abc-library-project/projects/library/src/lib/*"
      }
    }
  ]
}

如果配置后断点显示为灰色未绑定，可以在VS Code调试控制台执行.scripts命令，查看实际加载的SourceMap路径，调整sourceMapPathOverrides的匹配规则即可。

4. 启动调试流程 #

• 保持库的ng build --watch进程正常运行
• 应用端执行ng serve启动开发服务
• VS Code切换到调试面板，启动刚才配置的ng serve调试任务，直接在库的本地源码文件中打断点即可命中

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