Cannot Debug Blazor Wasm

Cannot debug Blazor wasm

I managed to get it working with Microsoft's Edge browser.

Although I'm using VSCode on linux, it should be similar for Visual Studio on Windows / Mac, because I believe the underlying Roslyn-based tooling is the same.

Update dependencies

Ensure you're using the latest SDK version: 6.0.202. Check using dotnet --version.

Install Edge

• Get the binary from here (linux, mac, windows)
• If you're using linux, you can 1) use the deb / rpm binaries, or 2) the package manager option (for debian / ubuntu):
  

  curl https://packages.microsoft.com/keys/microsoft.asc | gpg --dearmor > microsoft.gpg
  sudo install -o root -g root -m 644 microsoft.gpg /etc/apt/trusted.gpg.d/
  sudo sh -c 'echo "deb [arch=amd64] https://packages.microsoft.com/repos/edge stable main" > /etc/apt/sources.list.d/microsoft-edge-stable.list'
  sudo rm microsoft.gpg
  sudo apt update && sudo apt install microsoft-edge-stable
  

Update config for "standalone" project

MyProject/Properties/launchSettings.json:

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

MyProject/.vscode/launch.json:

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Launch and Debug Standalone Blazor WebAssembly App",
      "type": "blazorwasm",
      "request": "launch",
      "browser": "edge",                 // <------
      "url": "http://localhost:6001"     // <------
    }
  ]
}

Enable CORS in server project

When configuring services:

if(_environment.IsDevelopment()) {
  // allow all localhost ports
  services.AddCors(o => o.AddPolicy("BlazorCorsPolicy", b => b.SetIsOriginAllowed(s => new Uri(s).IsLoopback)));
  // or, explicitly allow client's address only
  //services.AddCors(o => o.AddPolicy("BlazorCorsPolicy", b => b.WithOrigins("http://localhost:6001")));
}
else {
  //...
}

When configuring middleware pipeline:

app.UseRouting();
app.UseCors("BlazorCorsPolicy");            // <------
app.UseAuthentication();
app.UseAuthorization();

Set server's address in blazor project

Update the code generated by the blazor template (just an example, use your server address):

//builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
  builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri("https://localhost:5001/api/v1/") });

Test

Set some breakpoints in the blazor project, then press F5.

Notes

I used ports 6000 and 6001 for the client, as the server is probably already using 5000 and 5001.

I've discovered Edge is a decent browser. Also it's a good option because the debugging tooling closes the browser after each session, so if I were using my preferred browser it would be closed every time. Even if these bugs are fixed, I think I'll keep Edge as my "debugging browser" for blazor.

The debugging experience is not perfect: sometimes when starting debugging it says "It looks like a browser is already running from an old debug session. Please close it before trying to debug, otherwise VS Code may not be able to connect to it." - just click on "Debug Anyway".

I failed to get debugging and hot reload to work simultaneously. I read somewhere on the repo or docs site that this scenario is not yet supported (but will be in a future patch release or .NET 7).

Cannot debug client side blazor

Looks like a repair install of visual studio solved the problem.
I noticed that Visaul Studio code had no issues and, when debugging, it always launched a new browser window.

Visaul Studio was always launching a new tab on my existing browser windows.

After repair, visual studio started launching a new browser window. Not sure if that means anything to anyone.

Debugging Blazor WASM in VS Code fails because of Unbound breakpoint

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

Unable to hit breakpoints in Blazor WASM

The reason for the error was that my solution path had a "#' in a folder name. This error was discussed https://github.com/dotnet/aspnetcore/issues/22036 which apparently was never resolved if you follow the thread.

Cannot debug blazor client side

This question was answered in this Github Issue:

Looks like BlazingPizza.Server lacks a call to app.UseBlazorDebugging(); inside the if (env.IsDevelopment()) block in Startup.cs.

---

Related Topics