VSCode自动更新后调试Angular应用卡顿问题求助

问题背景 #

VSCode自动更新后，启动Angular调试时出现以下异常：

• 应用构建正常，Chrome浏览器能打开http://localhost:4200
• 调试连接停滞，Chrome网络面板返回304（Not Modified）状态码
• 命令行执行ng serve可正常运行应用，仅调试器功能受影响
• 已尝试清理缓存、重装应用、确认Chrome网络面板处于「No throttling」模式

可能原因 #

• VSCode更新后，Chrome调试插件（Debugger for Chrome/Edge）与新版本VSCode存在兼容性冲突
• launch.json中预启动任务与调试器的启动时序不匹配，调试器在应用完全就绪前发起连接
• VSCode残留的旧调试会话缓存干扰了新连接

解决办法 #

1. 重置Chrome调试插件 #

• 打开VSCode扩展面板，找到Debugger for Chrome（或Debugger for Microsoft Edge）
• 点击插件右侧齿轮图标，选择「卸载」，重启VSCode后重新安装该插件

2. 修改launch.json强制禁用缓存并延长超时 #

在调试配置中添加Chrome禁用缓存参数，同时延长连接超时时间：

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "ng serve",
      "type": "chrome",
      "request": "launch",
      "preLaunchTask": "npm: start",
      "url": "http://localhost:4200",
      "webRoot": "${workspaceFolder}",
      "runtimeArgs": [
        "--disable-http-cache"
      ],
      "timeout": 10000
    }
  ]
}

3. 清理VSCode调试缓存 #

• 关闭所有VSCode窗口
• 找到VSCode用户数据目录：
  • Windows：%APPDATA%\Code
  • macOS：~/Library/Application Support/Code
  • Linux：~/.config/Code
• 删除Cache、CachedData目录，以及workspaceStorage下对应项目的缓存文件夹
• 重启VSCode后重新尝试调试

4. 确保预启动任务的完成检测逻辑正确 #

检查.vscode/tasks.json中的npm: start任务，确保调试器仅在应用完全启动后发起连接：

{
  "version": "2.0.0",
  "tasks": [
    {
      "type": "npm",
      "script": "start",
      "isBackground": true,
      "problemMatcher": {
        "owner": "typescript",
        "fileLocation": "absolute",
        "pattern": "$tsc",
        "background": {
          "activeOnStart": true,
          "beginsPattern": ".*Angular Live Development Server is listening on.*",
          "endsPattern": ".*Compiled successfully.*"
        }
      }
    }
  ]
}

确认endsPattern能准确匹配Angular编译成功的日志，避免调试器提前发起连接。

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