How to debug Blazor WASM client side from within a Dev Container?

Question

This came up as a result of Question 77483656

I have a .NET Blazor WebAssembly Web App that is hosted (debugged) within a dev container.

I can debug the server side easily within the dev container. I'm trying to figure out how to debug the client side as well in this specific setup.

---

Note: Here, my definition of debug means setting breakpoints in the IDE (VS Code) and having the IDE stop at that breakpoint to inspect variables, step through the code, etc. Yes, it is possible to do console logging on the WASM client side, which is how I've been debugging so far, but this is becoming very tedious and not sustainable.

Note: To reproduce this setup, follow these steps:

1. Ensure that VS Code has dev containers extension installed

2. Create a new blazor wasm project using:

   # Mandatory setup of project
   dotnet new blazorwasm --hosted --name=my-pwa --output=my-pwa
   
   # Optional setup of git
   cd my-pwa
   dotnet new gitignore
   git init
   git commit -m "Initial Commit"
   

3. Open in VS Code

4. In VS Code, add dev container config file using command pallette Dev Containers: Add Dev Container Configuration Files...

5. Select C# (.NET) template and choose default values if asked

6. Select "Reopen in container" on the notification in VS Code on bottom right corner of the window

I tried to run the dotnet application in the background manually using the command:

dotnet watch run --project=Server --non-interactive --no-hot-reload

This allows me to open the Blazor WASM web app in my local browser outside the dev container.

And then using the below "launch.json" config to debug the client side as a standalone Blazor WASM app:

{
    "name": "Launch and Debug Standalone Blazor WebAssembly App",
    "type": "blazorwasm",
    "request": "launch",
    "preLaunchTask": "dotnet: build",
    "browser": "edge",
    "hosted": false,
    "url": "http://localhost:5678"
},

But this shows an error from within VS Code saying unable to connect. And when it does not show error, it does not show the web side client-side source to allow to debug.