最近我把一个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模板项目,类似于捐赠项目,并且能够在断点处停在新项目中。所以我确定浏览器/环境是正确的,问题应该在项目配置或复制项目过程中的某些设置。
我尝试并确认了以下几项措施:
- 热重载正常工作
- Visual Studio显示断点已绑定(实心红点)
- 多个浏览器;Chrome和Edge控制台无错误,Visual Studio也无错误报告
- 根据官方文档进行调试:launchSettings.json含有正确的inspectUri,host项目引用了Microsoft.AspNetCore.Components.WebAssembly.Server
- 在OnInitialized()中手动添加延时以便调试器附加(同样测试了按钮点击内的断点,仍无成功)
- 使用新项目确认浏览器调试工作正常,程序.cs中有相同指令,使用相同的.NET版本,NuGet包和启动配置
- 删除bin/obj/.vs文件夹并重启VS2022
- 确认项目在调试模式下运行(可以在MyApp项目中使用断点)
- 确认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组件:
- 使用ASP.NET Core Web App (MVC)项目模板创建一个解决方案。
- 创建一个"donor"解决方案(与MVC解决方案同名)并使用Blazor Web App模板。在模板选择中,选择Interactive render mode为"WebAssembly",Interactivity location为"Per page/component".
- 将[ProjectName].Client项目文件夹从donor解决方案复制到MVC解决方案中,其他部分可以丢弃。
- 通过解决方案 > 添加 > 现有项目,将[ProjectName].Client项目添加到包含MVC项目的解决方案中。
- 在MVC项目中,添加对[ProjectName].Client项目的引用。
- 在Client项目中创建一个Components文件夹。
- 创建Components/App.razor文件,内容为"@* no-op component *@"。
- 在Components文件夹中创建Pages子文件夹。
- 创建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
其他必要配置:
- 向MVC项目添加NuGet包:Microsoft.AspNetCore.Components.WebAssembly.Server。
- 在Program.cs中添加app.UseWebAssemblyDebugging():
csharp
if (!app.Environment.IsDevelopment())
{
app.UseExceptionHandler("/Home/Error");
app.UseHsts();
}
else
{
app.UseWebAssemblyDebugging();
}
- 在builder.Build()之前添加:
csharp
builder.Services.AddRazorComponents()
.AddInteractiveWebAssemblyComponents();
- 在app.Run()之前添加以下代码,并用适当的using:
csharp
using [ProjectName].Client.Components;
app.MapRazorComponents<App>()
.AddInteractiveWebAssemblyRenderMode();
- 在_Layout.cshtml页面体尾部(在
@await RenderSectionAsync("Scripts", required: false)
之前)添加:
html
<script src="_framework/blazor.webassembly.js"></script>
- 最后,向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! ✨