具有 CDP 扩展的 WPF 示例应用

此 WebView2 示例演示如何使用 WebView2 CDP 扩展在 WPF 应用中使用 Chrome DevTools 协议 (CDP) 。

• 示例名称： WV2CDPExtensionWPFSample
• 存储库目录： WV2CDPExtensionWPFSample
• 解决方案文件： WV2CDPExtensionWPFSample.sln

此示例 WV2CDPExtensionWPFSample 使用 WebView2 CDP 扩展 (Microsoft.Web.WebView2.DevToolsProtocolExtension NuGet 包) 生成。 此示例对 WebView2 中的对象调用 Chrome DevTools 协议方法 DevToolsProtocolHelper 。

此示例生成为 WPF Visual Studio 2019 项目。 它在 WebView2 环境中使用 C#。

DevTools 命令菜单：

“DevTools 事件”菜单：

如果这是你第一次使用 WebView2，我们建议先按照 WPF 应用中的 WebView2 入门 教程操作。 本教程将指导你创建 WebView2 并添加一些基本的 WebView2 功能。

步骤 1 - 安装 Microsoft Edge 的预览频道

建议使用最新版本的 Canary 频道。

1. 如果尚未安装 Microsoft Edge (Beta、Dev 或 Canary) 的预览频道，请参阅在为 WebView2 设置开发环境中安装 Microsoft Edge 的预览频道。 按照该部分中的步骤进行操作，然后返回到此页并继续执行以下步骤。

步骤 2 - 安装具有 .NET 支持的 Visual Studio

需要具有 .NET 支持) 的 Microsoft Visual Studio (。 此示例不支持 Microsoft Visual Studio Code。

1. 如果尚未安装 Visual Studio (支持 .NET 支持的最低版本) ，请参阅在为 WebView2 设置开发环境中安装 Visual Studio。 按照该部分中的步骤进行操作，然后返回到此页并继续执行以下步骤。

步骤 3 - 克隆或下载 WebView2Samples 存储库

1. 如果尚未执行此操作，请将 WebView2Sample 存储库克隆或下载到本地驱动器。 在单独的窗口或选项卡中，请参阅为 WebView2设置开发环境中的下载 WebView2 示例存储库。 按照该部分中的步骤操作，然后返回到此页面，然后继续以下操作。

步骤 4 - 在 Visual Studio 中打开解决方案

1. 在本地驱动器上 .sln ，在 Visual Studio 的目录中打开文件：

   • <your-repos-directory>/WebView2Samples/SampleApps/WV2CDPExtensionWPFSample/WV2CDPExtensionWPFSample.sln

   或者：

   • <your-repos-directory>/WebView2Samples-main/SampleApps/WV2CDPExtensionWPFSample/WV2CDPExtensionWPFSample.sln

若要使用 Visual Studio 2017，请在 Visual Studio 中更改项目 “属性配置”属性 > 中的“平台工具集”属性 > “”常规 > 平台工具集”。 若要使用 Visual Studio 2017，可能还需要安装最新的 Windows SDK。

步骤 5 - 在出现提示时安装工作负载

1. 如果出现提示，请安装请求的任何 Visual Studio 工作负载。 在单独的窗口或选项卡中，请参阅为 WebView2 设置开发环境中的安装 Visual Studio 工作负载。 按照该部分中的步骤操作，然后返回到此页面，然后继续以下操作。

   将在 Visual Studio 中打开 WV2CDPExtensionWPFSample 项目：

   

步骤 6 - 使用已安装的 SDK 版本生成并运行项目

WebView2 SDK 和 WebView2 DevToolsProtocolExtension 版本作为 NuGet 包包含在此项目中。 在后面的步骤中，你将使用 Visual Studio 的 NuGet 包管理器更新它们。

在 Visual Studio 的顶部，设置生成目标，如下所示：

1. 在 “解决方案配置” 下拉列表中，选择“ 调试” 或“ 发布”。

2. 在 “解决方案平台 ”下拉列表中，选择“ 任何 CPU”。

3. 在 解决方案资源管理器中，右键单击 WV2CDPExtensionWPFSample 项目，然后选择“生成”。

1. 在 Visual Studio 中，选择“ 调试>开始调试 ” (F5) 。

   示例应用窗口随即打开：

   

2. 在 Visual Studio 中，选择“ 调试>停止调试”。 Visual Studio 关闭应用。

步骤 7 - 更新 WebView2 SDK

1. 在“解决方案资源管理器”中，右键单击项目 (而不是解决方案节点) ，然后选择“管理 NuGet 包”。 NuGet 包管理器 随即打开。

2. 单击“已安装”或“汇报”选项卡。

3. 选中或清除 “包括预发行版 ”复选框。

   

   上面的屏幕截图显示了 Visual Studio 2019，在总体 WebView2APIsSample 解决方案的上下文中显示了此示例，而不是当前的独立解决方案。 在此屏幕截图中，存储库具有 WebView2 SDK 的发布版本，并且提供了较新版本的 SDK 和预发行版。

4. 如果列出了 Microsoft.Web.WebView2 SDK 的较新版本，请单击“ 更新 ”按钮。 预发行版具有“-prerelease”后缀，例如 1.0.1248-prerelease。 预发布 SDK 允许试用最新的 WebView2 功能和 API。

若要查看此步骤的详细信息，请在单独的窗口或选项卡中，请参阅为 WebView2 设置开发环境中的安装或更新 WebView2 SDK。 按照该部分中的步骤操作，然后返回到此页面，然后继续以下操作。

步骤 8 - 更新 WebView2 CDP 扩展

此示例的先决条件是最新版本的 WebView2 CDP 扩展 (Microsoft.Web.WebView2.DevToolsProtocolExtension) ，此版本包含在此项目中。 该包添加了对 Chrome DevTools 协议 (CDP) API 的支持。

1. 在解决方案资源管理器中，右键单击项目，然后选择“管理 NuGet 包”。 NuGet 包管理器 随即打开。

2. 单击“已安装”或“汇报”选项卡。

3. 清除 “包括预发行版 ”复选框。

   

4. 如果列出了 Microsoft.Web.WebView2.DevToolsProtocolExtension SDK 的较新版本，请单击“ 更新 ”按钮。

另请参阅：

• 在 WebView2 应用中使用 Chrome DevTools 协议 (CDP)

步骤 9 - 使用更新的包生成并运行项目

1. 在 Visual Studio 中，选择“ 调试>开始调试 ” (F5) 。

   示例应用窗口随即打开：

   

2. 在 Visual Studio 中，选择“ 调试>停止调试”。 Visual Studio 关闭应用。

步骤 10 - 检查代码

1. 在 Visual Studio 代码编辑器中，检查代码：

   

   DevTools 命令菜单：

   

   “DevTools 事件”菜单：

   

另请参阅

• WebView2 API 参考
• WinUI 2 (UWP) 应用中的 WebView2 入门
• NuGet 上的 Microsoft.Web.WebView2.DevToolsProtocolExtension 。