WebView2 アプリで Chrome DevTools Protocol (CDP) を使用する

  • [アーティクル]

Chrome DevTools プロトコルは、Chromium ベースのブラウザーをインストルメント化、検査、デバッグ、プロファイルするための API を提供します。 Chrome DevTools プロトコルは、Microsoft Edge DevTools の基盤です。 WebView2 プラットフォームに実装されていない機能には、Chrome DevTools プロトコルを使用します。

WebView2 アプリで Chrome DevTools Protocol API を使用するには、次のいずれかの操作を行います。

DevToolsProtocolHelper を使用する

には DevToolsProtocolExtension オブジェクトが DevToolsProtocolHelper 含まれます。

Microsoft.Web.WebView2.DevToolsProtocolExtension は、Chrome DevTools Protocol 機能に簡単にアクセスできる WebView2 チームによって作成された NuGet パッケージです。 次の例では、WebView2 コントロールで Chrome DevTools Protocol で位置情報機能を使用する方法について説明します。 他の Chrome DevTools プロトコル機能を使用するには、同様のパターンに従います。

手順 1: 位置情報を検索する Web ページを作成する

を作成 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. ファイル名 geolocation.htmlを.html使用してファイルを保存します。

  5. Microsoft Edge を開きます。

  6. を開きます geolocation.html。

  7. 緯度と経度の座標を表示するには、[場所の 表示 ] ボタンをクリックします。 位置情報を確認して比較するには、座標を コピーして に https://www.bing.com/maps貼り付けます。

    Microsoft Edge でのユーザーの位置情報座標の表示

手順 2: WebView2 に geolocation.html を表示する

  1. WebView2 アプリを作成するには、Get Started ガイドまたは WebView2 サンプルを使用します。

  2. WebView2 コントロールの初期ナビゲーションを に設定します geolocation.html。

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

  3. ファイルが geolocation.html WebView2 コントロール アプリに表示されていることを確認します。

    WebView2 コントロール アプリに表示される geolocation.html ファイル

手順 3: DevToolsProtocolHelper NuGet パッケージをインストールする

NuGet を使用して をダウンロード Microsoft.Web.WebView2.DevToolsProtocolExtensionします。

パッケージをインストールするには:

  1. [プロジェクト>管理] [NuGet パッケージの参照] の順に>選択します。

  2. 「Microsoft.Web.WebView2.DevToolsProtocolExtension> Install」と入力Microsoft.Web.WebView2.DevToolsProtocolExtensionして選択します。

  3. Visual Studio NuGet パッケージ マネージャーに Microsoft.Web.WebView2.DevToolsProtocolExtension が表示されていることを確認します。

    Visual Studio NuGet パッケージ マネージャーに Microsoft.Web.WebView2.DevToolsProtocolExtension が表示されていることを確認する

手順 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 bugs データベースにバグ レポートを提出します。

Chrome DevTools プロトコルは、Microsoft Edge WebView2 チームではなく、オープンソース Chromium プロジェクトによって管理されます。

関連項目