When Hosting a WASM application in ASP.Net Core Razor how to enable WASM debugging

Question

I am building a White Label .Net 8 WASM-only Blazor app that has multiple domains assigned to it. This means I want to be able to inject different themes and icons etc into the hosting file and varying menu options within the application.

Instead of index.html I am using an Index.razor page so that I have dynamic control over the HTML content. The server also hosts API endpoint for my Blazor App.

It took a while to get an independently created ASP.Net Razor App to work with the Blazor WASM app, but I cannot get any debugging to work in the WASM app code. i.e. no breakpoints are ever valid/hit. The server code breakpoints are just fine.

The server project "project-references" the WASM project, which automatically migrates the app to the hosting server on build.

When you created a .Net 7 hosted Blazor WASM app, things just worked. Server and WASM client breakpoints just work.

THE QUESTION: What is the magic that joins the client and server applications so that debugging works in both?

Answer 1

Finally figured it out, with helpful tips and explanations from CoPilot and a later comparison of working projects against my Frankenstein's monster. There are multiple settings required.

Firstly, each profile in "profiles" in launchSettings.json in the hosting server project should have the following entry added:

"inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",

The second issue was an error connecting to that debug endpoint when run. That was caused by the 'iisSettings' section of launchSettings.json having an SSL port that did not match the "https" profile applicationUrl port setting.

A complete example of a launchSettings.json is shown below:

{
  "$schema": "http://json.schemastore.org/launchsettings.json",
  "iisSettings": {
    "windowsAuthentication": false,
    "anonymousAuthentication": true,
    "iisExpress": {
      "applicationUrl": "http://localhost:5160",
      "sslPort": 7184
    }
  },
  "profiles": {
    "https": {
      "commandName": "Project",
      "dotnetRunMessages": true,
      "launchBrowser": true,
      "applicationUrl": "https://localhost:7184;http://localhost:5160",
      "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      }
    }
  }
}

The last ingredient to success is the easily overlooked addition of app.UseWebAssemblyDebugging() in program.cs in your client application:

   if (app.Environment.IsDevelopment())
   {
       app.UseWebAssemblyDebugging();
   }