Visual Studio Code – Blank Chrome screen with persistant loading spinner when launching the debugger using pwa-chrome in VS Code. How can I debug this?

SOLUTION – 3/15/23 – Update VS Code to 1.76.2. MS has fixed this bug in this release.

I’m using VS Code (v1.65.2), my Angular (15.1.2) project is client side and my .Net (6.0) app is server side and when I launch the VS Code debugger I run my launch compound like this below and have been to doing it like this for 2+ years:

"compounds": [{
  "name": "Server/ClientChrome",
  "configurations": [".NET6 Launch (no web)", "Launch Pwa-Chrome"]
}],
"configurations": [{
    "name": "Launch Pwa-Chrome",
    "type": "pwa-chrome",
    "request": "launch",
    "url": "https://localhost:4200",
    "webRoot": "${workspaceFolder}/client"
  },
  {
    "name": ".NET6 Launch (no web)",
    "type": "coreclr",
    "request": "launch",
    "preLaunchTask": "build",
    "program": "${workspaceFolder}/API/bin/Debug/net6.0/API.dll",
    "args": [],
    "cwd": "${workspaceFolder}/API",
    "stopAtEntry": false,
    "env": {
      "ASPNETCORE_ENVIRONMENT": "Development"
    },
    "sourceFileMap": {
      "/Views": "${workspaceFolder}/Views"
    }
  },
]

Everything was working fine until tonight when I made some changes to different component files, service files and some changes in a few different controllers, server side.

PROBLEM – Now when I start the debugger and Chrome launches and opens up there is nothing but a blank white screen and the spinner around the tab icon just keeps spinning. I can’t open Chrome’s debugger window/tools by right clicking and I see no errors in the debug console in VS Code.

FYI – If ng serve is running, I can hit localhost:4200 and see the site and if I run the site from the server side (>dotnet run) I can get to the site and see it at localhost:5001.

PROBLEM – BUT if I run both from my launch.json file, using the compound above, the Chrome browser just opens and the spinner around the icon just keeps spinning. I can’t even open a debug window.

I thought I might be in some weird state so I tried all these below with no success.

1. Restarted VS Code and restarted ng server
2. Restarted my computer
3. Tried launching the VS Code debugger using pwa-msedge (browser opened to same blank screen with loading but nothing displayed)
4. Cleared all items from Chrome cache
5. Uninstalled any ad blocker that might cause this
6. Ran >ng build and >dotnet build with no errors
7. let the Chrome window stay open for 1+ minute to see if it would eventually load
8. Ran >ng lint, which I never use, and received this message:

An unhandled exception occurred: Cannot find builder "@angular-devkit/build-angular:tslint".
See "/private/var/folders/l6/zz0rl4793838rf924b4y0tqc0000gn/T/ng-bVaXzT/angular-errors.log" for further details.

My issue has never happened before and I’m guessing it might be related to some Angular file I changed, but I don’t see any config or json file in the source control section that has been changed that might cause this.

QUESTION – Anyone have any ideas on how to debug this to determine why the site isn’t loading correctly when I launch the debugger?

UPDATE – 3/15/23 updating VS Code to 1.76.2 fixes this issue. MS just put this release out this morning to fix this bug.