具有 CDP 延伸模組的 WPF 範例應用程式

此 WebView2 範例示範如何使用 WebView2 CDP 擴充功能，在 WPF 應用程式中使用 Chrome DevTools 通訊協定 (CDP) 。

• 範例名稱： WV2CDPExtensionWPFSample
• 存放庫目錄： WV2CDPExtensionWPFSample
• 方案檔： WV2CDPExtensionWPFSample.sln

這個範例 WV2CDPExtensionWPFSample 是使用 WebView2 CDP 延伸模組建置， (Microsoft.Web.WebView2.DevToolsProtocolExtension NuGet 套件) 。 此範例會在 WebView2 中的 物件上 DevToolsProtocolHelper 呼叫 Chrome DevTools 通訊協定方法。

此範例是建置為 WPF Visual Studio 2019 專案。 它會在 WebView2 環境中使用 C#。

DevTools 命令功能表：

[DevTools 事件] 功能表：

如果這是您第一次使用 WebView2，建議您先遵循 開始使用 WPF 應用程式中的 WebView2 教學課程。 本教學課程會逐步引導您建立 WebView2，並新增一些基本的 WebView2 功能。

步驟 1 - 安裝具有 .NET 支援的 Visual Studio

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

1. 如果尚未安裝具有 .NET 支援的 Visual Studio (最低必要版本) ，請在個別的視窗或索引卷標中，參閱在設定 WebView2 的開發環境中安裝 Visual Studio。 遵循該節中的步驟，然後返回此頁面並繼續執行下列步驟。

步驟 2 - 複製或下載 WebView2Samples 存放庫

1. 如果尚未完成，請將存放庫複製或下載 WebView2Samples 到本機磁碟驅動器。 在個別的視窗或索引標籤中，請參閱為 WebView2 設定開發環境中的下載 WebView2Samples 存放庫。 請遵循該區段中的步驟，然後返回此頁面，然後繼續進行下列步驟。

步驟 3 - 在 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 中使用 Visual Studio 2017，請在 [ 專案屬性 > 設定] 屬性 > 的 [一般 > 平臺工具組] 中變更專案的 [平臺工具組]。 若要使用 Visual Studio 2017，您可能也需要安裝最近的 Windows SDK。

步驟 4 - 出現提示時安裝工作負載

1. 如果出現提示，請安裝任何要求的Visual Studio工作負載。 在個別的視窗或索引標籤中，請參閱為 WebView2 設定開發環境中的安裝 Visual Studio 工作負載。 請遵循該區段中的步驟，然後返回此頁面，然後繼續進行下列步驟。

   WV2CDPExtensionWPFSample 專案會在 Visual Studio 中開啟：

   

步驟 5 - 使用已安裝的 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 會關閉應用程式。

步驟 6 - 更新 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。 請遵循該區段中的步驟，然後返回此頁面，然後繼續進行下列步驟。

步驟 7 - 更新 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)

步驟 8 - 使用更新的套件建置和執行專案

1. 在 Visual Studio 中，選取 [ 偵錯>開始偵 錯] (F5) 。

   範例應用程式視窗隨即開啟：

   

2. 在 Visual Studio 中，選取 [ 偵錯>停止偵錯]。 Visual Studio 會關閉應用程式。

步驟 9 - 檢查程序代碼

1. 在 Visual Studio 程式代碼編輯器中，檢查程式代碼：

   

   DevTools 命令功能表：

   

   [DevTools 事件] 功能表：

   

另請參閱

• WebView2 API 參考
• 在 WinUI 2 (UWP) 應用程式中開始使用 WebView2
• Microsoft.Web.WebView2.DevToolsProtocolExtension ，位於 NuGet。