为什么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! ✨

相关推荐
lucky九年2 分钟前
vscode翻译插件
ide·vscode·编辑器
帅得不敢出门19 分钟前
Gradle命令编译Android Studio工程项目并签名
android·ide·android studio·gradlew
ZHOUPUYU1 小时前
IntelliJ IDEA超详细下载安装教程(附安装包)
java·ide·intellij-idea
真·Wild·攻城狮1 小时前
【码农日常】Vscode Clangd初始化失败(Win10)
ide·vscode·编辑器
七灵微1 小时前
【测试】【Debug】vscode中同一个测试用例出现重复
ide·vscode·编辑器
九鼎科技-Leo9 小时前
了解 .NET 运行时与 .NET 框架:基础概念与相互关系
windows·c#·.net
躺不平的理查德11 小时前
数据结构-链表【chapter1】【c语言版】
c语言·开发语言·数据结构·链表·visual studio
九鼎科技-Leo12 小时前
什么是 ASP.NET Core?与 ASP.NET MVC 有什么区别?
windows·后端·c#·asp.net·mvc·.net
.net开发12 小时前
WPF怎么通过RestSharp向后端发请求
前端·c#·.net·wpf
weixin_5375904515 小时前
《C++ Primer Plus》中文版第二章习题
开发语言·c++·visual studio