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) アプリにリモートでアタッチします。
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 が開きます。
Microsoft Edge DevTools を使用して、HoloLens 2 WebView2 WinUI 2 (UWP) アプリで WebView2 コントロールを検査およびデバッグできるようになりました。