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).