CDP 拡張機能を使用した WPF サンプル アプリ

この WebView2 サンプルでは、WebView2 CDP 拡張機能を使用して WPF アプリで Chrome DevTools Protocol (CDP) を使用する方法を示します。

• サンプル名: WV2CDPExtensionWPFSample
• リポジトリ ディレクトリ: WV2CDPExtensionWPFSample
• ソリューション ファイル: WV2CDPExtensionWPFSample.sln

このサンプル WV2CDPExtensionWPFSample は、WebView2 CDP 拡張機能 ( Microsoft.Web.WebView2.DevToolsProtocolExtension NuGet パッケージ) を使用して構築されています。 このサンプルでは、WebView2 のオブジェクトで Chrome DevTools Protocol メソッドを DevToolsProtocolHelper 呼び出します。

このサンプルは、WPF Visual Studio 2019 プロジェクトとして構築されています。 WebView2 環境では C# が使用されます。

[DevTools コマンド] メニュー:

[DevTools イベント] メニュー:

WebView2 を初めて使用する場合は、最初に 「WPF アプリでの WebView2 の概要 」チュートリアルに従うことをお勧めします。 このチュートリアルでは、WebView2 を作成し、いくつかの基本的な WebView2 機能を追加する方法について説明します。

手順 1 - Microsoft Edge のプレビュー チャネルをインストールする

最新バージョンの Canary チャネルをお勧めします。

1. Microsoft Edge (Beta、Dev、または Canary) のプレビュー チャネルがまだインストールされていない場合は、別のウィンドウまたはタブで、「WebView2 用の開発環境を設定する」の「Microsoft Edge のプレビュー チャネルをインストールする」を参照してください。 そのセクションの手順に従って、このページに戻り、以下の手順を続行します。

手順 2 - .NET サポートを使用して Visual Studio をインストールする

Microsoft Visual Studio (.NET サポートあり) が必要です。 このサンプルでは、Microsoft Visual Studio Code はサポートされていません。

1. .NET をサポートする Visual Studio (最小必須バージョン) がまだインストールされていない場合は、別のウィンドウまたはタブで、「WebView2 用の開発環境を設定する」の「Visual Studio のインストール」を参照してください。 そのセクションの手順に従って、このページに戻り、以下の手順を続行します。

手順 3 - WebView2Samples リポジトリを複製またはダウンロードする

1. まだ完了していない場合は、リポジトリを WebView2Sample 複製するか、ローカル ドライブにダウンロードします。 別のウィンドウまたはタブで、「 WebView2 の開発環境をセットアップする」の「WebView2Samples リポジトリをダウンロード する」を参照 してください。 そのセクションの手順に従って、このページに戻り、以下に進みます。

手順 4 - 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 2017 を使用する場合は、Visual Studio で、プロジェクトの [プロパティ>] [構成] プロパティ > [全般>プラットフォーム ツールセット] でプロジェクトのプラットフォーム ツールセットを変更します。 Visual Studio 2017 を使用するには、最新の Windows SDK をインストールする必要がある場合もあります。

手順 5 - プロンプトが表示されたらワークロードをインストールする

1. メッセージが表示されたら、要求された Visual Studio ワークロードをインストールします。 別のウィンドウまたはタブで、「WebView2 用の開発環境を設定する」の「Visual Studio ワークロードをインストールする」を参照してください。 そのセクションの手順に従って、このページに戻り、以下に進みます。

   Visual Studio で WV2CDPExtensionWPFSample プロジェクトが開きます。

   

手順 6 - インストールされているバージョンの 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 はアプリを閉じます。

手順 7 - WebView2 SDK を更新する

1. ソリューション エクスプローラーで、(ソリューション ノードではなく) プロジェクトを右クリックし、[NuGet パッケージの管理] を選択します。 NuGet パッケージ マネージャー が開きます。

2. [インストール済み] タブまたは [更新] タブをクリックします。

3. [ プレリリースを含める ] チェック ボックスをオンまたはオフにします。

   

   上のスクリーンショットは、Visual Studio 2019 を示しています。このサンプルは、現在のスタンドアロン ソリューションではなく、包括的な WebView2APIsSample ソリューションのコンテキストで示されています。 このスクリーンショットでは、リポジトリに WebView2 SDK のリリース バージョンがあり、SDK の新しいリリース バージョンとプレリリース バージョンを使用できます。

4. Microsoft.Web.WebView2 SDK の新しいリリースが一覧表示されている場合は、[更新] ボタンをクリックします。 プレリリースには、 1.0.1248-prerelease などの "プレリリース" サフィックスがあります。 プレリリース SDK を使用すると、最新の WebView2 機能と API を試すことができます。

この手順の詳細を別のウィンドウまたはタブで確認する場合は、「WebView2 用の開発環境を設定する」の「WebView2 SDK のインストールまたは更新」を参照してください。 そのセクションの手順に従って、このページに戻り、以下に進みます。

手順 8 - WebView2 CDP 拡張機能を更新する

このサンプルの前提条件は、このプロジェクトに含まれる WebView2 CDP 拡張機能 (Microsoft.Web.WebView2.DevToolsProtocolExtension) の最新リリース バージョンです。 このパッケージにより、Chrome DevTools Protocol (CDP) API のサポートが追加されます。

1. ソリューション エクスプローラーで、プロジェクトを右クリックし、[NuGet パッケージの管理] を選択します。 NuGet パッケージ マネージャー が開きます。

2. [インストール済み] タブまたは [更新] タブをクリックします。

3. [ プレリリースを含める ] チェック ボックスをオフにします。

   

4. Microsoft.Web.WebView2.DevToolsProtocolExtension SDK の新しいリリース バージョンが一覧表示されている場合は、[更新] ボタンをクリックします。

関連項目:

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

手順 9 - 更新されたパッケージを使用してプロジェクトをビルドして実行する

1. Visual Studio で、[ デバッグ>の開始] [デバッグの開始] (F5) を選択します。

   サンプル アプリ ウィンドウが開きます。

   

2. Visual Studio で、[デバッグ] [ デバッグ>の停止] の順に選択します。 Visual Studio はアプリを閉じます。

手順 10 - コードを検査する

1. Visual Studio コード エディターで、コードを検査します。

   

   [DevTools コマンド] メニュー:

   

   [DevTools イベント] メニュー:

   

関連項目

• WebView2 API リファレンス
• WinUI 2 (UWP) アプリでの WebView2 の概要
• Microsoft.Web.WebView2.DevToolsProtocolExtension at NuGet。