在 WebView2 應用程式中使用 Chrome DevTools 通訊協定 (CDP)

發行項
03/16/2024

Chrome DevTools 通訊協定提供 API 來檢測、檢查、偵錯和配置檔 Chromium 型瀏覽器。 Chrome DevTools 通訊協定是 Microsoft Edge DevTools 的基礎。針對 WebView2 平臺中未實作的功能，請使用 Chrome DevTools 通訊協定。

若要在 WebView2 應用程式中使用 Chrome DevTools 通訊協定 API，請執行下列其中一項：

安裝並使用 Microsoft.Web.WebView2.DevToolsProtocolExtension NuGet 套件 (.NET) 。
或者，執行下列其中一種方法：
- .NET： CallDevToolsProtocolAsync、 GetDevToolsProtocolEventReceiver
- Win32 C/C++： CallDevToolsProtocolMethod、 ICoreWebView2DevToolsProtocolEventReceiver

使用 DevToolsProtocolHelper

包含 DevToolsProtocolExtensionDevToolsProtocolHelper 物件。

Microsoft.Web.WebView2.DevToolsProtocolExtension 是由 WebView2 小組建立的 NuGet 套件，可讓您輕鬆存取 Chrome DevTools 通訊協定功能。下列範例說明如何在 WebView2 控制件的 Chrome DevTools 通訊協定中使用地理位置功能。若要使用其他 Chrome DevTools 通訊協定功能，您可以遵循類似的模式。

步驟 1：建立網頁以尋找您的地理位置

若要建立 HTML file 來尋找您的地理位置，請完成下列動作。

開啟 Visual Studio Code (或您選擇的 IDE) 。
建立新的 .html 檔案。

在新的檔案中 .html 貼上下列程式代碼：

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Geolocation Finder</title>
</head>
<body>
   <button id="display">Display Location</button>
   <div id="message"></div>
</body>

<script>
   const btn = document.getElementById('display');
   // Find the user location.
   btn.addEventListener('click', function () {
      navigator.geolocation.getCurrentPosition(onSuccess, onError);
   });

   // Update message to display the latitude and longitude coordinates.
   function onSuccess(position) {
      const {latitude, longitude} = position.coords;
      message.textContent = `Your location: (${latitude},${longitude})`;
   }

   function onError() {
      message.textContent = `Operation Failed`;
   }
</script>
</html>

.html使用檔案名 geolocation.html儲存盤案。
開啟 Microsoft Edge。
開啟 geolocation.html。
若要顯示緯度和經度座標，請按兩下 [ 顯示位置 ] 按鈕。若要確認並比較您的地理位置，請在中 https://www.bing.com/maps複製並貼上您的座標。

步驟 2：在 WebView2 中顯示 geolocation.html

若要建立 WebView2 應用程式，請使用開始使用指南或 WebView2 範例：
- 開始使用 WebView2
- WebView2Samples 存放庫

將 WebView2 控制件的初始導覽設定為 geolocation.html：

webView.CoreWebView2.Navigate(@"C:\{path\to\file}\geolocation.html");

請確定 geolocation.html 檔案顯示在您的 WebView2 控制程式應用程式中：

步驟 3：安裝 DevToolsProtocolHelper NuGet 套件

使用 NuGet 下載 Microsoft.Web.WebView2.DevToolsProtocolExtension。

若要安裝套件：

選 取 [專案>管理 NuGet 套件>流覽]。
輸入 Microsoft.Web.WebView2.DevToolsProtocolExtension ，然後選取 [Microsoft.Web.WebView2.DevToolsProtocolExtension>Install]。
確定 Microsoft.Web.WebView2.DevToolsProtocolExtension 顯示在 Visual Studio NuGet 套件管理員中：

步驟 4：使用 DevTools 通訊協定協助程式

DevToolsProtocolExtension將命名空間新增至您的專案：

using Microsoft.Web.WebView2.Core;
using Microsoft.Web.WebView2.Core.DevToolsProtocolExtension;

具現化物件並 DevToolsProtocolHelper 巡覽至 geolocation.html：

async void InitializeAsync()
{
   await webView.EnsureCoreWebView2Async(null);
   DevToolsProtocolHelper helper = webView.CoreWebView2.GetDevToolsProtocolHelper();

   webView.CoreWebView2.Navigate(@"C:\{path\to\file}\geolocation.html");
}

執行 setGeoLocationOverrideAsync 方法：

async void InitializeAsync()
{
   await webView.EnsureCoreWebView2Async(null);
   DevToolsProtocolHelper helper = webview.CoreWebView2.GetDevToolsProtocolHelper();

   // Latitude and longitude for Paris, France.
   double latitude = 48.857024082572565;
   double longitude = 2.3161581601457386;
   double accuracy = 1;
   await helper.Emulation.setGeolocationOverrideAsync(latitude, longitude, accuracy);
}

如需詳細資訊，請參閱 setGeolocationOverride。

執行您的應用程式。
若要顯示法國巴黎的座標，請按兩下 [ 顯示位置 ] 按鈕：

提出 Chrome DevTools 通訊協定的 Bug 或功能要求

若要要求 WebView2 平臺功能，請在 WebView2Feedback 存放庫中輸入新問題。

若要提出有關 Chrome DevTools 通訊協定的錯誤，請在 Chromium Bug 資料庫中提出 Bug 報告。

Chrome DevTools 通訊協定是由開放原始碼 Chromium 項目維護，而不是由 Microsoft Edge WebView2 小組維護。

另請參閱

Microsoft Edge DevTools 通訊協定概觀
WebView2Samples 存放庫
WebView2 功能和 API 概觀中的 Chrome DevTools 通訊協定 (CDP)

共用方式為