次の方法で共有


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

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

HoloLens 2の WebView2 と Unity 用 WebView プラグインはどちらもプレビュー段階であり、一般公開前に変更される場合があります。

WebView2 および WebView2 プラグインは、Windows 11更新プログラムを実行しているHoloLens 2デバイスでのみサポートされます。 詳細については、「Update HoloLens 2」を参照してください。

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

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

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

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

  2. デバイス ポータルを有効にする: Windows 設定を開き、[Update & Securityfor developers]\(開発者向けセキュリティ>の更新\) を選択し、[デバイス ポータル] トグルをオンにします。

    デバイス ポータルを有効にする

    [イーサネットを使用した>接続] で、リモート デバッグ接続に使用される URL をメモします。

  3. HoloLens 2 デバイスの Microsoft Store から Microsoft Edge 用のリモート ツールをインストールします。

  4. Microsoft Edge で、前にメモしたデバイス ポータル URL に移動します。 [ セキュリティ設定の確認 ] ページが読み込まれたことを確認します ( [Windows デバイス ポータル ] タブ)。

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

  5. ローカルで実行されているアプリのみをデバッグしている場合は、[ セキュリティで保護されていない接続を続行 する] ボタンを選択できます。

    または、アプリをローカルで実行していない場合、または HTTPS 経由で接続する必要がある場合は、[ セキュリティで保護された接続の構成] リンクを選択し、リダイレクト先のページの手順に従います。

  6. [アプリ マネージャー: Windows デバイス ポータル] ページにリダイレクトされていることを確認します。

    デバイス ポータル

  7. http://<Device Portal URL>/msedge 移動し、Microsoft Edge 用のリモート ツールが機能していることを確認します。 リモート ツールでデバッグ可能なアプリケーションが実行されていない限り、ページは空のリスト []を読み込みます。

  8. リモート デバッグ用に 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");
    

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

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

  9. HoloLens 2 デバイスでアプリを起動します。

  10. http://<Device Portal URL>/msedgeなどにhttp://localhost:50080/msedge移動し、WebView2 インスタンスが一覧に表示されていることを確認します。

    デバッグ可能な WebView2 インスタンス

  11. edge://inspectに移動します。 [リモート Windows デバイスに接続する] テキスト ボックスに、「」などhttp://localhost:50080と入力http://<Device Portal URL>し、[デバイスに接続] をクリックします。

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

    HoloLens 2で WebView2 に接続する

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

    DevTools の検査ウィンドウ

Microsoft Edge DevTools を使用して、HoloLens 2 WebView2 WinUI 2 (UWP) アプリで WebView2 コントロールを検査およびデバッグできるようになりました。

関連項目