Xbox WebView2 WinUI 2 (UWP) アプリのリモート デバッグ

  • [アーティクル]

Microsoft Edge DevTools を使用して WebView2 WinUI 2 (UWP) アプリをデバッグするには、リモート デバッグを使用します。 WebView2 WinUI 2 (UWP) アプリではリモート デバッグが必要です。現時点では、ストア署名された WebView2 WinUI 2 (UWP) アプリ内で組み込みの DevTools を起動できないためです。

DevTools を Xbox WebView2 WinUI 2 (UWP) アプリにリモートでアタッチする

次のように、Microsoft Edge DevTools を Xbox WebView2 WinUI 2 (UWP) アプリにリモートでアタッチします。

  1. Microsoft Edge で、[ edge://inspect] に移動します。 [ Edge Developer Tools を使用した検査] ページが開きます。

    DevTools Inspect ユーティリティ ページ

  2. Xbox で開発者モードを有効にします。 「Xbox One 開発者モードのアクティブ化」を参照してください。

  3. Microsoft Edge で、[ https://<System IP>:11443] に移動します。ここで、 <System IP> は Xbox System OS IP に置き換えられます。 [ セキュリティ設定の確認 ] ページが [ Windows デバイス ポータル ] タブに表示されます。

    [Windows デバイス ポータル] タブの [セキュリティ設定の確認] ページ

  4. [ セキュリティで保護されていない接続を続行する] ボタンを クリックします。 SSL 証明書エラーが表示されます。 NET::ERR__CERT_AUTHORITY_INVALID:

    SSL エラー

  5. [詳細設定] ボタンをクリックします。 "サーバーが ... を証明できませんでした" というメッセージが表示されます。

    詳細オプション

  6. [ 続行<System IP>(unsafe) リンクをクリックします。ここで、 <System IP> は Xbox System OS IP に置き換えられます。 Xbox Device Portal が開きます。

    Xbox Device Portal

  7. [ https://<System IP>:11443/config/rootcertificate] に移動します。ここで、 <System IP> は Xbox System OS IP に置き換えられます。 これにより、 rootcertificate.cer ファイルがダウンロードされます。

    Microsoft Edge の [ダウンロード] ダイアログに一覧表示されているルート証明書ファイル

  8. ダウンロードした rootcertificate.cer ファイルを開きます。 [セキュリティ警告] ダイアログ ボックスが開きます。

    [セキュリティ警告] ダイアログ ボックス

  9. [ 開く ] ボタンをクリックします。 [証明書] ダイアログが開きます。

    [証明書] ダイアログ

  10. [ 証明書のインストール ] ボタンをクリックします。 [証明書のインポート ウィザードへようこそ] ダイアログが開きます。

    [証明書のインポート ウィザードへようこそ] ダイアログ

  11. [ 現在のユーザー ] オプション ボタンを選択し、[ 次へ ] ボタンをクリックします。 証明書のインポート ウィザードが開きます。

    証明書のインポート ウィザード

  12. [次の ストアにすべての証明書を配置する] オプションを選択し、[ 参照 ] ボタンをクリックし、[ 信頼されたルート証明機関] を選択します。

  13. [ 次へ ] ボタンをクリックします。 [セキュリティ警告] ダイアログが開きます。

    [セキュリティの警告] ダイアログ

  14. [はい] ボタンをクリックします。

  15. Microsoft Edge を再起動します。

  16. <System IP>が Xbox システム OS IP に置き換えられるhttps://<System IP>:11443に移動し、接続がセキュリティで保護されていることを確認します (つまり、HTTPS URL)。

    セキュリティで保護された XDP

  17. アプリ プロジェクトで次の変数を設定して、リモート デバッグ用に WebView2 WinUI 2 (UWP) アプリを構成します。

    リモート デバッグを有効にするには、プロジェクトで環境変数を設定する必要があります。 この変数は、 CoreWebView2 インスタンスを作成する前、および WebView2.Source プロパティを設定するか、 WebView2.EnsureCoreWebView2Async メソッドを呼び出す前に設定する必要があります。

    "WEBVIEW2_ADDITIONAL_BROWSER_ARGUMENTS", "--enable-features=msEdgeDevToolsWdpRemoteDebugging"

    たとえば、 WebView2 サンプル UWP アプリを使用している場合は、 Browser.xaml.cs ファイルに次の行を追加して環境変数を設定できます。

    Environment.SetEnvironmentVariable("WEBVIEW2_ADDITIONAL_BROWSER_ARGUMENTS", "--enable-features=msEdgeDevToolsWdpRemoteDebugging");

    このスクリーンショットの行には、Browser() コンストラクターで、既存の SetEnvironmentVariable ステートメントをラップする#endifの下に 33 という番号が付けられます。

    ブラウザー引数リモート デバッグ

  18. Xbox Device Portalを使用して Xbox にアプリをデプロイし、アプリを起動します。

  19. edge://inspectに移動します。

  20. [ リモート Windows デバイスに接続 する] テキスト ボックスに「 https://<System IP>:11443」と入力します。ここで、 <System IP> は Xbox System OS IP に置き換えられ、[ デバイスに接続 ] ボタンをクリックします。

  21. Edge という名前のデバッグ可能な WebView2 コントロールがコンピューター名の下に一覧表示されるように、正常に接続できることを確認します。

    Edge Inspect Xbox

  22. Edge WebView2 コントロール エントリの下部にある [検査] リンクをクリックします。 WebView2 コントロールの Microsoft Edge DevTools が開きます。

    DevTools Inspect Xbox

これで、Microsoft Edge DevTools を使用して、Xbox WebView2 WinUI 2 (UWP) アプリの WebView2 コントロールを検査およびデバッグできます。

関連項目