這個 WebView2 範例示範如何使用 WebView2 CDP 擴充功能，在 WPF 應用程式中使用 Chrome DevTools 協定 (CDP) 。
- 範例名稱： WV2CDPExtensionWPFSample
- Repo directory： 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 - 安裝支援 .NET 的 Visual Studio
Microsoft Visual Studio (支援 .NET) 是必須的。 本範例不支援 Microsoft Visual Studio Code。
- 如果 Visual Studio (尚未安裝支援 .NET 的最低所需版本) ，請在另一個視窗或分頁中查看「 安裝 Visual Studio 」的「 設置你的開發環境」中的 WebView2 版本。 請依照該部分的步驟操作，然後返回此頁面繼續以下步驟。
步驟 2 - 複製或下載 WebView2Samples 倉庫
- 如果還沒做，請複製或下載
WebView2Samples倉庫到本地硬碟。 在另一個視窗或分頁中，請參考「為 WebView2 建立你的開發環境下載 WebView2Samples 倉庫」。 請依照該部分的步驟操作，然後返回此頁繼續下方。
步驟 3 - 在 Visual Studio 開啟解決方案
在你本機硬碟上，在 Visual Studio 的目錄中開啟這個
.sln檔案：<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。
步驟 4 - 如果有提示就安裝工作負載
如果有提示，請安裝任何 Visual Studio 的工作負載。 在另一個視窗或分頁中，請參考「 安裝 Visual Studio 工作負載 」的「 設置你的 WebView2 開發環境」。 請依照該部分的步驟操作，然後返回此頁繼續下方。
WV2CDPExtensionWPFSample 專案在 Visual Studio 中開啟：
步驟 5 - 用已安裝的 SDK 版本建置並執行專案
本專案中包含 WebView2 SDK 版本及 WebView2 DevToolsProtocolExtension 的 NuGet 套件。 在後面的步驟中，你會使用 Visual Studio 的 NuGet 套件管理器來更新這些資料。
在 Visual Studio 頂端，設定建置目標如下：
在 解決方案設定 下拉選單中，選擇 除錯 或 發布。
在解決方案 平台 下拉選單中，選擇 任意 CPU。
在方案總管中，右鍵點擊 WV2CDPExtensionWPFSample 專案，然後選擇建置。
在 Visual Studio 中，選擇 F5) (「除錯>開始除錯」。
範例應用程式視窗會開啟：
在 Visual Studio 中，選擇 除錯>停止除錯。 Visual Studio 關閉了應用程式。
步驟 6 - 更新 WebView2 SDK
在方案總管中，右鍵點擊專案 (非解決方案節點) ，然後選擇管理 NuGet 套件。 NuGet 套件管理器 會開啟。
點選「已安裝」或「匯報」標籤。
選擇或清除 「包含預發行 」勾選框。
上方截圖展示了 Visual Studio 2019，將此範例置於整體 WebView2APIsSample 解決方案的脈絡中，而非目前獨立的解決方案。 在這張截圖中，倉庫有 WebView2 SDK 的正式版本，並且有更新版和預發布版的 SDK 可用。
如果列出了較新的 Microsoft.Web.WebView2 SDK 版本，請點擊 「更新 」按鈕。 預釋版會有「-prerelease」後綴，例如 1.0.1248-prerelease。 預發布的 SDK 允許你試用最新的 WebView2 功能和 API。
如果你想了解此步驟的詳細資訊，請在另一個視窗或分頁中查看「 安裝或更新 WebView2 SDK 」中的 「設置你的 WebView2 開發環境」。 請依照該部分的步驟操作，然後返回此頁繼續下方。
步驟 7 - 更新 WebView2 CDP 擴充功能
此範例的前提條件是 WebView2 CDP 擴充功能 (Microsoft.Web.WebView2.DevToolsProtocolExtension) 的最新版本，該版本包含在本專案中。 該套件新增了對 Chrome DevTools 協定 (CDP) API 的支援。
在解決方案方案總管中，右鍵點擊專案，然後選擇「管理 NuGet 套件」。 NuGet 套件管理器 會開啟。
點選「已安裝」或「匯報」標籤。
勾選包含 預發行 的勾選框。
如果列出了 Microsoft.Web.WebView2.DevToolsProtocolExtension SDK 的更新版本，請點擊 更新 按鈕。
另請參閱:
步驟 8 - 建立並執行專案，並更新套件
在 Visual Studio 中，選擇 F5) (「除錯>開始除錯」。
範例應用程式視窗會開啟：
在 Visual Studio 中，選擇 除錯>停止除錯。 Visual Studio 關閉了應用程式。
步驟 9 - 檢查程式碼
在 Visual Studio 程式碼編輯器中檢查程式碼：
DevTools 指令選單：
DevTools 活動選單：