VS Code调试Angular Karma测试时断点仅生效1-2次，需重启恢复

针对你遇到的「调试一次后断点失效、断点显示已附着但无法触发、伴随‘测试操作仍在进行中’错误」问题，以下是具体解决步骤：

1. 清理残留进程，避免会话占用 #

每次调试结束后，手动杀掉残留的ChromeHeadless和Karma进程，防止端口或会话被占用：

# 杀掉ChromeHeadless进程
pkill -f ChromeHeadless
# 杀掉Karma进程
pkill -f karma

2. 修改Karma配置，避免缓存和端口冲突 #

调整karma.conf.js中的ChromeHeadless启动配置，使用临时用户目录和无痕模式，彻底避免缓存残留：

customLaunchers: {
  ChromeHeadlessNoSandbox: {
    base: "ChromeHeadless",
    flags: [
      "--no-sandbox",
      "--user-data-dir=/tmp/chrome-test-profile-$(date +%s)", // 每次生成唯一临时目录
      "--disable-web-security",
      "--remote-debugging-address=0.0.0.0",
      "--remote-debugging-port=9222",
      "--disable-dev-shm-usage", // 解决共享内存不足问题
      "--incognito" // 启用无痕模式，隔离缓存
    ],
    debug: true,
  },
},

3. 改用手动调试配置（替代Test Explorer自动附加） #

创建.vscode/launch.json，手动配置Chrome调试附加，比插件自动附加更稳定：

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "attach",
      "name": "Attach to Karma Chrome",
      "port": 9222,
      "webRoot": "${workspaceFolder}/src",
      "sourceMaps": true,
      "skipFiles": ["node_modules/**"]
    }
  ]
}

使用时先启动Karma测试，再点击VS Code调试面板的「Attach to Karma Chrome」按钮完成附加。

4. 重置Test Explorer插件状态 #

遇到「测试操作仍在进行中」错误时，不用重启VS Code，直接打开命令面板（Ctrl+Shift+P）执行：

Test Explorer: Reset Test Explorer

即可重置插件运行状态，解决会话阻塞问题。

5. 确保Source Map配置正确 #

检查angular.json中test构建的sourceMap设置为true，保证断点能正确映射到源码：

"test": {
  "builder": "@angular-devkit/build-angular:karma",
  "options": {
    "sourceMap": true,
    // 其他原有配置...
  }
}

6. 更新依赖与插件 #

• 将Karma、Angular CLI、karma-chrome-launcher等依赖更新到最新版本
• 更新VS Code中的Karma Test Explorer插件到最新版，修复已知的调试会话bug

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