Cannot debug Blazor wasm

Question

I'm using vscode. I cannot debug "standalone" (or "hosted") blazor wasm.

There are many questions like this, but they are for RCs, bugs apparently fixed for .NET 6, or tooling bugs apparently fixed in SDK 6.0.102.

I read all the docs. I suspect the problem is compounded by known hot reload compatibility bugs.

I am on the latest bits of everything. I'm using chromium on linux (ubuntu 20).

When I try debug, I get this error in a popup:

Unable to launch browser: "Failed to launch browser!
ERROR:sandbox_linux.cc(377)] InitializeSandbox() called with multiple threads in process gpu-process.
WARNING: Kernel has no file descriptor comparison support: Operation not permitted
ERROR:process_singleton_posix.cc(341)] Failed to create /home/username/.config/Code/User/workspaceStorage/4208cd9cd69c4fe2a941aed538319caa/ms-vscode.js-debug/.profile/SingletonLock: Permission denied (13)
ERROR:chrome_browser_main.cc(1432)] Failed to create a ProcessSingleton for your profile directory. This means that running multiple instances would start multiple browser processes rather than opening a new window in the existing process. Aborting now to avoid profile corruption.
TROUBLESHOOTING: https://github.com/GoogleChrome/puppeteer/blob/master/docs/troubleshooting.md

The error is not helpful, as I did chmod 777 for that directory, and yet it still complains about permissions. I also get other errors, also cryptic.

I'm wondering whether this is even possible, because after trawling dozens of SO questions and repo issues, I can't find anyone who claims to have a working setup and can show working config.

So: has anyone actually managed to get this working: blazor (standalone, but hosted is fine too), vscode, hot reload, linux? If you have, please post your working config?

Answer 1

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