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

相关推荐
老程序员刘飞12 小时前
vscode 连接 wsl
ide·vscode·编辑器
喵叔哟15 小时前
4. 从0到上线:.NET 8 + ML.NET LTR 智能类目匹配实战--从业务到方案:数据与特征工程:从 CSV 到可训练的 LTR 样本
.net
马儿能够一直跑19 小时前
基于vscode在WSL中配置PlatformIO开发环境
ide·vscode·编辑器
@LetsTGBot搜索引擎机器人19 小时前
用 Python 打造一个 Telegram 二手交易商城机器人
开发语言·python·搜索引擎·机器人·.net·facebook·twitter
Dontla19 小时前
VSCode括号高亮插件(vscode插件)bracket pair、活动括号对、括号线(未完全检查)
ide·vscode·编辑器
追逐时光者20 小时前
Everything替代工具,一款基于 .NET 开源免费、高效且用户友好文件搜索工具!
后端·.net
abcd_zjq1 天前
【2025最新】【win10】vs2026+qt6.9+opencv(cmake编译opencv_contrib拓展模
人工智能·qt·opencv·计算机视觉·visual studio
abcd_zjq1 天前
VS2026+QT6.9+opencv图像增强(多帧平均降噪)(CLAHE对比度增强)(边缘增强)(图像超分辨率)
c++·图像处理·qt·opencv·visual studio
追逐时光者1 天前
推荐 12 款开源美观、简单易用的 WPF UI 控件库,让 WPF 应用界面焕然一新!
后端·.net
小蕾Java1 天前
PyCharm 软件使用各种问题 ,解决教程
ide·python·pycharm