如何远程调试 MAUI blazor / Blazor Hybrid

我们知道浏览器模式下 Blazor 可以使用 F12 打开开发工具,调试js查看页面元素,那当 Maui Blazor 提示烦人的 an unhandled error has occurred 该怎么进行调试呢?

1. VS 运行工程于 Debug 模式下,只要 BlazorWebview 控件处于焦点,直接按F12就可以打开开发工具了. 没有焦点就鼠标单击屏幕一下, 跟以往一样

2. 还有一种方法可以使用浏览器开发人员工具 (F12) "远程检查 (remotely inspect)" 功能, 首先，检查您是否在您的文件中添加了 AddBlazorWebViewDeveloperTools

Maui工程在 MauiProgram.cs 文件
Hybird工程一般是在 Startup.cs 文件

确认有这行代码

#if DEBUG
   builder.Services.AddBlazorWebViewDeveloperTools();
#endif

运行您的应用程序并在浏览器（在模拟器外部）中打开一个新选项卡并输入：

Chrome浏览器：chrome://inspect
Edge浏览器: edge://inspect

注: Chrome调试需要FQ

稍等片刻，您将看到如下所示的“检查”按钮：

你甚至可以从那里在你的应用程序中导航：

3. macOS/iOS 应用调试

传送门 https://learn.microsoft.com/zh-cn/aspnet/core/blazor/hybrid/developer-tools?view=aspnetcore-7.0&pivots=macos

以下 macOS 应用需要操作，iOS 应用不需要

将类型为 Boolean 的 com.apple.security.get-task-allow 键添加到应用的权利文件中，以用于其调试版本。

若要使用 com.apple.security.get-task-allow 键添加权利文件，请将以下名为 Entitlements.Debug.plist 的 XML 文件添加到项目的 Platforms/MacCatalyst 文件夹中。

Platforms/MacCatalyst/Entitlements.Debug.plist:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
    <key>com.apple.security.get-task-allow</key>
    <true/>
</dict>
</plist>

若要在 Mac Catalyst 上使用调试版本的权利文件，请将以下节点作为节点的子节点添加到应用的项目文件中：

<PropertyGroup Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'maccatalyst' and '$(Configuration)' == 'Debug'">
    <CodeSignEntitlements>Platforms/MacCatalyst/Entitlements.Debug.plist</CodeSignEntitlements>
</PropertyGroup>

以下 macOS/iOS 应用通用

若要将 Safari 开发人员工具与 macOS/iOS 应用结合使用，请执行以下操作：

打开桌面 Safari。
选中“Safari”>“首选项”>“高级”>“在菜单栏中显示‘开发’菜单”复选框。
在 macOS 中运行 .NET MAUIBlazor 应用。
返回到 Safari。选择“开发”>{REMOTE INSPECTION TARGET}>“0.0.0.0”，其中 {REMOTE INSPECTION TARGET} 占位符是设备的纯文本名称（例如 MacBook Pro）或设备的序列号（例如 XMVM7VFF10）。如果存在多个“0.0.0.0”条目，请选择突出显示 BlazorWebView 的条目。选择正确的“0.0.0.0”条目后，BlazorWebView 在 macOS 中以蓝色突出显示。