Visual Studio 2022 Breakpoints not hit in Blazor WebAssembly using .NET 8.0

Question

I have an ASP.NET Core project that was recently updated to .NET 8.0, and now I am attempting to add a Blazor WASM project. I followed these instructions to get the project added to my existing ASP.NET Core project (copied the WASM project from a donor project).

The project is an ASP.NET Core project (MyApp) which is hosting a Blazor WASM project (MyApp.Client). The Client project has a Page with breakpoints in it. Everything is working except debugging the Client app in Visual Studio 2022.

I also created a brand new project using the "Blazor Web App" template (setup the same as the donor project I used) and it does successfully break on breakpoints, so I know the browser/environment is correct and its some sort of project configuration issue or something I did wrong when copying the donor project.

Things I've tried/confirmed:

• Hot reloading works
• Visual Studio shows the breakpoints as bound (solid red circle)
• Multiple browsers; Chrome/Edge show no errors in the console, Visual Studio reports no errors
• I have followed the official docs on debugging:
  • launchSettings.json has the correct inspectUri
  • Microsoft.AspNetCore.Components.WebAssembly.Server is referenced by the host project
  • Added a manual delay to OnInitialized() to give the time for the debugger to attach (and also tested breakpoints inside of a button click with no success)
• Confirmed with the new working project:
  • My browser works with debugging
  • I have the same directives in Program.cs
  • I have the same .NET version, NuGet packages, and startup configuration
• Deleted the bin/obj/.vs folders and restarted VS2022
• Confirmed the project is running in debug mode (I can use breakpoints in the MyApp project)
• Confirmed the symbols for the WASM project are being loaded
• System.Diagnostics.Debugger.Break(); does not work either
• Visual Studio is on the latest version (17.8.3)
• I CAN debug the project using the Chrome debugger (shift + alt + D)

I don't know what else to try, any suggestions on what to look for next would be appreciated.

Answer 1

I came up with this minimal solution based loosely on Microsoft's documentation and other sources/experimentation/head banging. These are the essentials.

To create an ASP.NET Core Web App (MVC) with embedded Blazor WASM components:

1. Create a solution with the ASP.NET Core Web App (MVC) project template.
2. Create a "donor" solution (with the same name as the MVC solution) in a separate folder with the Blazor Web App template, as described by Microsoft's documentation. Choose Interactive render mode as "WebAssembly", and Interactivity location as "Per page/component".
3. Copy the [ProjectName].Client project folder from the donor solution to the MVC solution. The rest of the donor app can be discarded.
4. Add the [ProjectName].Client project to the solution containing the MVC project using Solution > Add > Existing Project.
5. To the MVC project, add a reference to the [ProjectName].Client project.
6. Create a Components folder in the client project.
7. Create Components/App.razor with the text @* no-op component *@.
8. Create a Pages folder in the Components folder.
9. Create Components/Pages/Counter.razor with:

@page "/counter"

<h1>Counter</h1>

<p role="status">Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

10. Now for the MVC project, add the inspectUri property to your debugging profile in Properties/launchSettings.json:

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

IMPORTANT: The inspectUri parameter does not work with IIS Express

11. Add the Microsoft.AspNetCore.Components.WebAssembly.Server Nuget package to the MVC project.

12. Add app.UseWebAssemblyDebugging(); to Program.cs this way:

if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Home/Error");
    // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
    app.UseHsts();
}
else
{
    app.UseWebAssemblyDebugging();
}

13. Add this right before builder.Build();:

builder.Services.AddRazorComponents()
       .AddInteractiveWebAssemblyComponents();

14. Add this right before app.Run(); (with the appropriate using):

using [ProjectName].Client.Components;

app.MapRazorComponents<App>()
   .AddInteractiveWebAssemblyRenderMode();

15. Add <script src="_framework/blazor.webassembly.js"></script> at the end of the _Layout.cshtml page body before the line @await RenderSectionAsync("Scripts", required: false).
16. Finally, add your Counter component (with the appropriate using) to Index.cshtml like this:

@using [ProjectName].Client.Components.Pages

<component type="typeof(Counter)" render-mode="WebAssembly"><component>

TIP: Use this in the head of your _Layout.cshtml if your app URL is different on the server:

<environment include="Production">
  <base href="/PathToYourApp" />
</environment>

NOTE: I've had a few circumstances when the debugger still did not attach until after I hit Ctrl + Shift + R. According to another answer on SO, this might be due to certain processes being too slow during startup.