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

[アーティクル]
12/21/2023

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) アプリにリモートでアタッチします。

Microsoft Edge で、に移動します edge://inspect。 [ Edge Developer Tools を使用した検査] ページが開きます。
デバイスポータルを有効にする: Windows 設定を開き、[Update & Securityfor developers]\(開発者向けセキュリティ>の更新\) を選択し、[デバイスポータル] トグルをオンにします。

[イーサネットを使用した>接続] で、リモートデバッグ接続に使用される URL をメモします。
HoloLens 2 デバイスの Microsoft Store から Microsoft Edge 用のリモートツールをインストールします。
Microsoft Edge で、前にメモしたデバイスポータル URL に移動します。 [ セキュリティ設定の確認 ] ページが読み込まれたことを確認します ( [Windows デバイスポータル ] タブ)。
ローカルで実行されているアプリのみをデバッグしている場合は、[ セキュリティで保護されていない接続を続行 する] ボタンを選択できます。

または、アプリをローカルで実行していない場合、または HTTPS 経由で接続する必要がある場合は、[ セキュリティで保護された接続の構成] リンクを選択し、リダイレクト先のページの手順に従います。
[アプリマネージャー: Windows デバイスポータル] ページにリダイレクトされていることを確認します。
に http://<Device Portal URL>/msedge 移動し、Microsoft Edge 用のリモートツールが機能していることを確認します。リモートツールでデバッグ可能なアプリケーションが実行されていない限り、ページは空のリスト []を読み込みます。
リモートデバッグ用に 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 という番号が付けられます。
HoloLens 2 デバイスでアプリを起動します。
http://<Device Portal URL>/msedgeなどにhttp://localhost:50080/msedge移動し、WebView2 インスタンスが一覧に表示されていることを確認します。
edge://inspectに移動します。 [リモート Windows デバイスに接続する] テキストボックスに、「」などhttp://localhost:50080と入力http://<Device Portal URL>し、[デバイスに接続] をクリックします。
Edge という名前のデバッグ可能な WebView2 コントロールがコンピューター名の下に一覧表示されるように、正常に接続できることを確認します。
Edge WebView2 コントロールエントリの下部にある [検査] リンクをクリックします。 WebView2 コントロールの Microsoft Edge DevTools が開きます。