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

相关推荐
jinhuazhe20134 小时前
如何解决vscode powershell乱码
ide·vscode·编辑器
数据的世界016 小时前
.NET开发人员学习书籍推荐
学习·.net
这是我586 小时前
C++打小怪游戏
c++·其他·游戏·visual studio·小怪·大型·怪物
paintstar7 小时前
vscode 快速切换cangjie版本
ide·vscode·编辑器·仓颉·cangjie
科协软件20187 小时前
vscode+latex快捷键
ide·vscode·编辑器
cnnews8 小时前
在vscode中的ESP-IDF插件中使用Arduino框架作为组件
ide·vscode·编辑器
paixiaoxin8 小时前
CV-OCR经典论文解读|An Empirical Study of Scaling Law for OCR/OCR 缩放定律的实证研究
人工智能·深度学习·机器学习·生成对抗网络·计算机视觉·ocr·.net
乐闻x9 小时前
VSCode 插件开发实战(三):插件配置项自定义设置
ide·vscode·编辑器
qq_3975623113 小时前
android studio更改应用图片,和应用名字。
android·ide·android studio
峥嵘life13 小时前
Android Studio版本升级那些事
android·ide·android studio