共用方式為

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

Chrome DevTools 協定提供 API，用於偵測、檢查、除錯及設定 Chromium 瀏覽器。 Chrome DevTools 協定是 Microsoft Edge DevTools 的基礎。 對於 WebView2 平台未實作的功能，請使用 Chrome DevTools 協定。

要在 WebView2 應用程式中使用 Chrome DevTools 協定 API，請執行以下任一步驟：

使用 DevToolsProtocolHelper

其中包含 DevToolsProtocolExtension 一個 DevToolsProtocolHelper 物件。

Microsoft.Web.WebView2.DevToolsProtocolExtension 是由 WebView2 團隊開發的 NuGet 套件，提供輕鬆存取 Chrome DevTools 協定功能。 以下範例說明如何在 WebView2 控制項中使用 Chrome DevTools 協定中的地理位置功能。 要使用其他 Chrome DevTools 協定功能，也可以遵循類似的模式。

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

要建立一個 HTML file 尋找你的地理位置，請執行以下操作。

  1. 開啟Visual Studio Code (或你選擇的 IDE) 。

  2. 建立一個新 .html 檔案。

  3. 將以下程式碼貼到你的新 .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>

  4. 將檔案存 .html 為 geolocation.html。

  5. 開啟 Microsoft Edge。

  6. 打開 geolocation.html。

  7. 要顯示您的緯度與經度座標，請點擊 「顯示位置 」按鈕。 要驗證並比較你的地理位置，請複製並貼上你的座標。https://www.bing.com/maps

    在 Microsoft Edge 中顯示使用者的地理定位座標

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

  1. 要建立 WebView2 應用程式，請使用入門指南或 WebView2 範例：

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

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

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

    geolocation.html 檔案會顯示在你的 WebView2 控制應用程式中

步驟 3：安裝 DevToolsProtocolHelper NuGet 套件

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

安裝套件：

  1. 選擇 專案>、管理 NuGet 套件、>瀏覽。

  2. 輸入 Microsoft.Web.WebView2.DevToolsProtocolExtension 並選擇 Microsoft.Web.WebView2.DevToolsProtocolExtension>安裝。

  3. 請確保 Microsoft.Web.WebView2.DevToolsProtocolExtension 顯示在 Visual Studio 的 NuGet 套件管理器中：

    確保 Microsoft.Web.WebView2.DevToolsProtocolExtension 在 Visual Studio NuGet 套件管理器中顯示

步驟 4：使用 DevTools 協議助手

  1. 將命名空間加入 DevToolsProtocolExtension 你的專案：

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

  2. 實例化物件 DevToolsProtocolHelper 並導引至 geolocation.html：

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

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

  3. 執行 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。

  4. 執行你的應用程式。

  5. 要顯示法國巴黎的座標，請點擊 「顯示位置 」按鈕：

    在 WebView2 控制項中顯示 .html 檔案，並標示巴黎的座標

針對 Chrome DevTools 協定提出錯誤或功能請求

若要申請 WebView2 平台功能，請在 WebView2Feedback 倉庫中輸入新議題。

若要對 Chrome DevTools 協定提出錯誤，請在 Chromium 錯誤資料庫中提交錯誤回報。

Chrome DevTools 協定是由 開放原始碼 Chromium 專案維護，而非 Microsoft Edge WebView2 團隊。

另請參閱

  • Last updated on