Debugging Blazor WASM in VS Code fails because of Unbound breakpoint

Question

I have just created a new Blazor WASM and I have followed the below resource to enable debugging in VS Code

https://learn.microsoft.com/en-us/aspnet/core/blazor/debug?view=aspnetcore-6.0&tabs=visual-studio-code

And as per it, I put a breakpoint on the currentCount++ line, but on debugging it does not hit because the breakpoint is unbound.

The dotnet version is 6

Launch Settings:

"profiles": { "TestVSCodeDebug": { "commandName": "Project", "dotnetRunMessages": true, "launchBrowser": true, "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}", "applicationUrl": "https://localhost:7240;http://localhost:5053", "environmentVariables": { "ASPNETCORE_ENVIRONMENT": "Development" } } }

Launch.json :

"version": "0.2.0", "configurations": [ { "type": "blazorwasm", "name": "Launch and Debug BlazorWASM", "request": "launch", "url": "https://localhost:7240"

    }
]

Above is orginal.Below updated on 24th-Jan-2022:

The breakpoint hits in VS 2022 Preview

Answer 1

This workaround got VSCode breakpoints to hit for me

1. Changing my launch.json to :

   {
      "version": "0.2.0",
      "configurations": [
      {
           "name": ".NET Core Debug Blazor Web Assembly in Chrome",
           "type": "blazorwasm",
           "request": "launch",
           "timeout": 30000,
           "url": "http://localhost:5000",
           "webRoot": "${workspaceFolder}",
           "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}"
      }]
   }
   

2. Also make sure you're launching with http and not https.

3. Install and debug with chrome :( Can't get it to work on FF.

More info here : https://github.com/dotnet/aspnetcore/issues/20597