以 Chrome 风格调试 MAUI Blazor 应用程序或看到错误

Question

我尝试将我的 Web Blazor 应用程序迁移到 MAUI。

我很好奇，在 Windows 上调试 MAUI Blazor 应用程序时是否有办法查看 Chrome“控制台”、“网络”等工具？ 问题的根源是我将 Web 应用程序 (Blazor) 迁移到桌面并计划在移动设备上这样做？ 你们社区中有人尝试这样做吗？我的第一次经历是收到即时错误和“正在加载...”消息，并要求重新加载页面 - 这信息量不大。

如果可能的话，查看错误详细信息或访问浏览器等工具会更有帮助。

提前谢谢您。

编辑

这是MainPage.xaml（已修改）：

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:CBT.MAUI.Blazor"
             xmlns:web="clr-namespace:CBT.Web.Blazor;assembly=CBT.Web.Blazor;"
             x:Class="CBT.MAUI.Blazor.MainPage"
             BackgroundColor="{DynamicResource PageBackgroundColor}">

    <BlazorWebView x:Name="blazorWebView" HostPage="wwwroot/index.html">
        <BlazorWebView.RootComponents>
            <RootComponent Selector="#app" ComponentType="{x:Type web:App}" />
        </BlazorWebView.RootComponents>
    </BlazorWebView>
</ContentPage>

我也尝试启用 Serilog，但没有创建有错误的文件。

var logger = new LoggerConfiguration()
    .ReadFrom.Configuration(builder.Configuration)
    .Enrich.FromLogContext()
    .CreateLogger();
builder.Logging.ClearProviders();
builder.Logging.AddSerilog(logger);

记录调试的原始行不会产生任何有错误的输出：

builder.Logging.AddDebug();

我还复制了一个服务。

Answer 1

首先，您需要在

builder.Services.AddBlazorWebViewDeveloperTools();

文件中添加

MauiProgram.cs

。

对于Windows平台，运行项目后，使用键盘快捷键

Ctrl+Shift+I

打开浏览器开发者工具。

对于 Android 平台，在浏览器中打开一个新选项卡（在模拟器之外）并输入：

For Chrome: chrome://inspect
For Edge: edge://inspect
For Firefox: about:debugging

然后单击浏览器中的检查按钮。

更多详细信息，您可以参考将浏览器开发者工具与 ASP.NET Core Blazor Hybrid 结合使用