VSCode调试Angular应用设置断点时Firebase登录弹窗挂起问题

这是VSCode Chrome调试器的默认附加逻辑，和Firebase弹窗登录的通信机制存在冲突导致的：

• VSCode调试Chrome时默认会自动挂载到所有从主调试页面打开的新窗口、弹窗，包括Firebase拉起的Google第三方登录弹窗——这个弹窗加载的是Google域名下的认证页，根本不属于你本地Angular应用的代码范围。
• Firebase弹窗登录的核心逻辑，是靠主应用页面和登录弹窗之间的实时postMessage通信完成身份校验，整个流程有严格的超时限制，任意一端的JS线程被暂停都会直接导致握手失败。
• 只要你在调试会话里设了任意断点，Chrome调试器就会给所有关联的JS上下文（包括那个第三方登录弹窗）注入调试桩代码，哪怕断点设在永远不会执行的代码路径上，调试器的线程同步检查逻辑也会打乱跨窗口通信的时序，直接导致弹窗挂起、超时无响应。首次登录偶尔能成功，是因为第一次开弹窗的时候调试器还没完成对新窗口的挂钩，第二次触发登录时调试器已经提前监听了窗口创建事件，一打开弹窗就会挂载上去，必然复现故障。

修改.vscode/launch.json里的Chrome调试配置，让调试器只挂载本地的Angular应用页面，跳过所有第三方登录弹窗：

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:4200",
      "webRoot": "${workspaceFolder}",
      "port": 9222,
      // 新增以下配置
      "targetFilter": "(target) => {
        // 仅调试本地4200端口的页面，过滤所有第三方域名弹窗
        return target.type === 'page' && target.url.startsWith('http://localhost:4200');
      }",
      "skipFiles": [
        // 跳过Firebase相关第三方库的断点命中
        "**/node_modules/@angular/fire/**",
        "**/node_modules/firebaseui-angular/**",
        "**/node_modules/firebase/**"
      ]
    }
  ]
}

如果改完配置还是存在异常，可以调试业务逻辑时临时把signInFlow改成redirect模式，只有需要验证弹窗交互逻辑时再切回popup模式；切回弹窗模式调试时，等登录完成回到主应用页面后再设置断点，不要在登录流程触发前提前打点。

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