10

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.

7
  • All I can suggest is to check both the server and client launchsettings;json in the demo solution against the settings in your project very, very carefully. Make sure the ports are correct. Commented Dec 27, 2023 at 0:14
  • @MrCakaShaunCurtis Do they have to be a specific port? Our application does overwrite this when building the application (builder.WebHost.UseUrls("https://*:1234");. But the launchsettings.json port matches ("applicationUrl": "https://localhost:1234",) Commented Dec 27, 2023 at 0:47
  • Do you want to debug C# part? If so, please check whether the symbol files(pdb file) has been loaded successfully(You can check this in the logs). Commented Dec 27, 2023 at 3:17
  • @BowmanZhu-MSFT VS shows the breakpoint as bound, so I would assume its locating the symbols. Which logs should I be looking at to confirm this? Commented Dec 27, 2023 at 17:41
  • 'MyApp.exe' (CoreCLR: clrhost): Loaded 'C:\repos\MyProject\MyApp\bin\Debug\net8.0\MyApp.Client.dll'. Symbols loaded. Found what you were referencing, yes the symbols are loaded. Commented Dec 27, 2023 at 17:45

1 Answer 1

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++;
    }
}
  1. 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

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

  2. 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();
}
  1. Add this right before builder.Build();:
builder.Services.AddRazorComponents()
       .AddInteractiveWebAssemblyComponents();
  1. Add this right before app.Run(); (with the appropriate using):
using [ProjectName].Client.Components;

app.MapRazorComponents<App>()
   .AddInteractiveWebAssemblyRenderMode();
  1. 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).
  2. 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.

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.