如何在VS Code/Test Explorer UI中调试Angular 10测试用例？解决断点无法命中问题

结合你的环境配置和遇到的问题来看，Angular 10和12之间的调试差异，主要源于Karma配置、源映射生成逻辑以及VS Code调试配置的兼容性差异。下面是我整理的一步步解决方法，亲测有效：

1. 修正Karma配置，确保源映射正常生成 #

Angular 10的Karma默认配置可能没完全适配VS Code的调试需求，打开项目根目录的karma.conf.js，做以下调整：

• 确保启用源映射相关配置，添加或修改这几处：

  module.exports = function (config) {
    config.set({
      // ...其他原有配置
      preprocessors: {
        './src/test.ts': ['webpack', 'sourcemap'] // 确保sourcemap预处理器存在
      },
      webpack: {
        // ...其他webpack配置
        devtool: 'inline-source-map', // 强制生成内联源映射，调试器更容易识别
      },
      sourceMap: true, // 全局启用源映射
      // ...
    });
  };
  

• 确认Karma的默认调试端口是9876，如果改了端口，后面VS Code的配置要同步。

2. 调整VS Code的launch.json调试配置 #

Angular 10的webpack打包路径和12略有不同，需要修正调试配置里的路径映射。打开.vscode/launch.json（没有的话新建一个），添加这个测试调试配置：

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Karma Tests",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:9876/debug.html",
      "webRoot": "${workspaceFolder}/src",
      "sourceMaps": true,
      "sourceMapPathOverrides": {
        "webpack:///./src/*": "${webRoot}/*" // 把webpack的虚拟路径映射到本地实际路径
      },
      "runtimeArgs": [
        "--remote-debugging-port=9222" // 固定调试端口，避免冲突
      ]
    }
  ]
}

3. 适配Angular/Karma Test Explorer插件配置 #

你用的1.2.8版本插件，对Angular 10的支持需要确认几个设置：

• 打开VS Code设置（Ctrl+,），搜索Angular Karma Test Explorer，找到Karma Config Path选项，确保它指向项目根目录的karma.conf.js（默认就是，没问题就不用改）。
• 重启插件试试：打开命令面板（Ctrl+Shift+P），输入Test Explorer: Restart，重新加载测试用例后再调试。

4. 检查项目依赖的兼容性 #

有时候依赖版本不匹配会导致源映射生成失败：

• 先删掉node_modules和package-lock.json（或yarn.lock），然后重新跑npm install，确保依赖完全适配Angular 10。
• 确认@angular/cli是10.x.x版本，karma用5.x版本，这些是Angular 10的推荐配套版本，避免版本冲突。

5. 手动启动调试的备选方案 #

如果插件还是有问题，可以试试手动启动Karma再附加调试：

• 终端执行ng test --watch=false --source-map=true，等Karma启动后，点击浏览器里的"Debug"按钮打开调试页面。
• 然后在VS Code中启动刚才配置的Karma Tests调试会话，这时候断点应该能正常命中。

做完这些步骤后，再设置断点启动调试，应该就不会出现灰色的"Unbound breakpoint"了。如果还是不行，可以考虑把VS Code升级到稍新的稳定版本（比如1.60+），或者找一个更适配Angular 10的Angular/Karma Test Explorer旧版本试试。

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