将浏览器开发人员工具与 ASP.NET Core Blazor Hybrid 结合使用

项目
04/11/2024

注意

此版本不是本文的最新版本。对于当前版本，请参阅此文的 .NET 8 版本。

重要

此信息与预发布产品相关，相应产品在商业发布之前可能会进行重大修改。 Microsoft 对此处提供的信息不提供任何明示或暗示的保证。

对于当前版本，请参阅此文的 .NET 8 版本。

本文介绍如何将浏览器开发人员工具与 Blazor Hybrid 应用结合使用。

使用 .NET MAUIBlazor 的浏览器开发人员工具

确保将 Blazor Hybrid 项目配置为支持浏览器开发人员工具。可以通过在应用中搜索 AddBlazorWebViewDeveloperTools 来确认开发人员工具支持。

如果尚未为浏览器开发人员工具配置项目，请通过以下方式添加支持：

找到调用 AddMauiBlazorWebView 的位置，可能在应用的 MauiProgram.cs 文件中。
在 MauiProgram.cs 文件的顶部，确认存在 Microsoft.Extensions.Logging 的 using 语句。如果 using 语句不存在，请将其添加到文件顶部：
```
using Microsoft.Extensions.Logging;
```

调用 AddMauiBlazorWebView 后，添加以下代码：

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

若要将浏览器开发人员工具与 Windows 应用结合使用，请执行以下操作：

运行适用于 Windows 的 .NET MAUIBlazor Hybrid 应用并导航到使用 BlazorWebView 的应用页。如果没有 BlazorWeb View，开发人员工具控制台在 ContentPage 中不可用。
使用键盘快捷方式 Ctrl+Shift+I 打开浏览器开发人员工具。
开发人员工具提供了各种用于使用应用的功能，包括页面请求了哪些资产、加载资产需要多长时间以及已加载资产的内容。以下示例显示了用于查看控制台消息的“控制台”选项卡，其中包括由框架或开发人员代码生成的任何异常消息：

若要将浏览器开发人员工具与 Android 应用结合使用，请执行以下操作：

启动 Android 仿真器并导航到使用 BlazorWebView 的应用页。如果没有 BlazorWeb View，开发人员工具控制台在 ContentPage 中不可用。
打开 Google Chrome 或 Microsoft Edge。
导航到 chrome://inspect/#devices (Google Chrome) 或 edge://inspect/#devices (Microsoft Edge)。
选择 inspect 链接按钮以打开开发人员工具。以下示例显示了 Microsoft Edge 中的“开发人员工具”页面：
开发人员工具提供了各种用于使用应用的功能，包括页面请求了哪些资产、加载资产需要多长时间以及已加载资产的内容。以下示例显示了用于查看控制台消息的“控制台”选项卡，其中包括由框架或开发人员代码生成的任何异常消息：

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

打开桌面 Safari。
选中“Safari”>“首选项”>“高级”>“在菜单栏中显示‘开发’菜单”复选框。
在 iOS 模拟器中运行 .NET MAUIBlazor Hybrid 应用并导航到使用 BlazorWebView 的应用页。如果没有 BlazorWeb View，开发人员工具控制台在 ContentPage 中不可用。
返回到 Safari。选择“开发”>{REMOTE INSPECTION TARGET}>“0.0.0.0”，其中 {REMOTE INSPECTION TARGET} 占位符是设备的纯文本名称（例如 MacBook Pro）或设备的序列号（例如 XMVM7VFF10）。如果存在多个“0.0.0.0”条目，请选择突出显示 BlazorWebView 的条目。选择正确的“0.0.0.0”条目后，BlazorWebView 在 iOS 模拟器中以蓝色突出显示。
为 BlazorWebView 显示“Web 检查器”窗口。
开发人员工具提供了各种用于使用应用的功能，包括页面请求了哪些资产、加载资产需要多长时间以及已加载资产的内容。以下示例显示了“控制台”选项卡，其中包括由框架或开发人员代码生成的任何异常消息：

将类型为 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> 节点作为 <Project> 节点的子节点添加到应用的项目文件中：

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

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

打开桌面 Safari。
选中“Safari”>“首选项”>“高级”>“在菜单栏中显示‘开发’菜单”复选框。
在 macOS 中运行 .NET MAUIBlazor Hybrid 应用。
返回到 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 中以蓝色突出显示。
为 BlazorWebView 显示“Web 检查器”窗口。
开发人员工具提供了各种用于使用应用的功能，包括页面请求了哪些资产、加载资产需要多长时间以及已加载资产的内容。以下示例显示了“控制台”选项卡，其中包括由框架或开发人员代码生成的任何异常消息：

通过

将浏览器开发人员工具与 ASP.NET Core Blazor Hybrid 结合使用

使用 .NET MAUIBlazor 的浏览器开发人员工具

其他资源

反馈

其他资源