为什么Visual Studio 2022中的断点在升级到.NET 8.0后未命中

最近我把一个ASP.NET Core 项目升级到了 .NET 8.0,并尝试添加一个Blazor WASM(WebAssembly)项目。按照指示将Blazor WASM项目从一个捐赠项目复制到现有的ASP.NET Core项目中。

项目结构如下:ASP.NET Core项目(MyApp)托管 Blazor WASM项目(MyApp.Client)。Client项目包含用于断点调试的页面。所有功能正常,除了在Visual Studio 2022中调试Client应用程序。

我创建了一个新的Blazor WebApp模板项目,类似于捐赠项目,并且能够在断点处停在新项目中。所以我确定浏览器/环境是正确的,问题应该在项目配置或复制项目过程中的某些设置。

我尝试并确认了以下几项措施:

  1. 热重载正常工作
  2. Visual Studio显示断点已绑定(实心红点)
  3. 多个浏览器;Chrome和Edge控制台无错误,Visual Studio也无错误报告
  4. 根据官方文档进行调试:launchSettings.json含有正确的inspectUri,host项目引用了Microsoft.AspNetCore.Components.WebAssembly.Server
  5. 在OnInitialized()中手动添加延时以便调试器附加(同样测试了按钮点击内的断点,仍无成功)
  6. 使用新项目确认浏览器调试工作正常,程序.cs中有相同指令,使用相同的.NET版本,NuGet包和启动配置
  7. 删除bin/obj/.vs文件夹并重启VS2022
  8. 确认项目在调试模式下运行(可以在MyApp项目中使用断点)
  9. 确认WASM项目符号被加载,System.Diagnostics.Debugger.Break()也不起作用

Visual Studio已经是最新版本(17.8.3),我可以使用Chrome调试项目(Shift + Alt + D)。不知道还能尝试什么,有什么建议吗?

问题解决方案

经过广泛的文档查阅、实验和多次尝试,我总结出了一个最简方案可以成功调试嵌入Blazor WASM组件的ASP.NET Core Web App(MVC)项目。

创建ASP.NET Core Web 应用程序(MVC)并嵌入Blazor WASM组件:

  1. 使用ASP.NET Core Web App (MVC)项目模板创建一个解决方案。
  2. 创建一个"donor"解决方案(与MVC解决方案同名)并使用Blazor Web App模板。在模板选择中,选择Interactive render mode为"WebAssembly",Interactivity location为"Per page/component".
  3. 将[ProjectName].Client项目文件夹从donor解决方案复制到MVC解决方案中,其他部分可以丢弃。
  4. 通过解决方案 > 添加 > 现有项目,将[ProjectName].Client项目添加到包含MVC项目的解决方案中。
  5. 在MVC项目中,添加对[ProjectName].Client项目的引用。
  6. 在Client项目中创建一个Components文件夹。
  7. 创建Components/App.razor文件,内容为"@* no-op component *@"。
  8. 在Components文件夹中创建Pages子文件夹。
  9. 创建Components/Pages/Counter.razor文件,内容如下:
razor 复制代码
@page "/counter"

<h1>Counter</h1>

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

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

@code {
    private int currentCount = 0;

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

配置调试参数:

在MVC项目的Properties/launchSettings.json添加inspectUri属性到调试配置文件中:

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"
  }
}

重要提示:inspectUri参数不适用于IIS Express

其他必要配置:

  1. 向MVC项目添加NuGet包:Microsoft.AspNetCore.Components.WebAssembly.Server。
  2. 在Program.cs中添加app.UseWebAssemblyDebugging():
csharp 复制代码
if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Home/Error");
    app.UseHsts();
}
else
{
    app.UseWebAssemblyDebugging();
}
  1. 在builder.Build()之前添加:
csharp 复制代码
builder.Services.AddRazorComponents()
       .AddInteractiveWebAssemblyComponents();
  1. 在app.Run()之前添加以下代码,并用适当的using:
csharp 复制代码
using [ProjectName].Client.Components;

app.MapRazorComponents<App>()
   .AddInteractiveWebAssemblyRenderMode();
  1. 在_Layout.cshtml页面体尾部(在@await RenderSectionAsync("Scripts", required: false)之前)添加:
html 复制代码
<script src="_framework/blazor.webassembly.js"></script>
  1. 最后,向Index.cshtml添加你的Counter组件:
html 复制代码
@using [ProjectName].Client.Components.Pages

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

提示:如果应用程序URL在服务器上有所不同,请在_Layout.cshtml页面头部使用以下代码:

html 复制代码
<environment include="Production">
  <base href="/PathToYourApp" />
</environment>

注意:在某些情况下,调试器仍然无法附加,直到按下Ctrl + Shift + R。据另外一个SO回答,可能是某些进程在启动期间过慢导致。

希望这篇博客能帮助你解决Blazor WASM项目在Visual Studio 2022中调试的问题!Happy coding! ✨

相关推荐
何为xl10 小时前
【VSCode】使用VSCode打开md文件以及转化为PDF
ide·vscode·pdf
追逐时光者10 小时前
一款基于 .NET 开源、功能全面的微信小程序商城系统
后端·.net
salestina18 小时前
vsCode如何自定义编辑器背景色
ide·vscode·编辑器
sun00770018 小时前
vscode 调试 指定 python文件 运行路径
ide·vscode·编辑器
xiaobobo333018 小时前
关于vscode的右键常用操作以及自定义快捷键
ide·vscode·编辑器
小码编匠20 小时前
WinForm 中集成 NLog 实现全局异常处理
后端·c#·.net
zeeq_1 天前
vscode使用cmake tool进行项目管理安装
ide·vscode·编辑器
追逐时光者1 天前
一个 .NET 开源、功能强大的在线文档编辑器,类似于 Microsoft Word,支持信创!
后端·.net
techdashen1 天前
性能比拼: .NET (C#) vs. Fiber (Go)
golang·c#·.net