Depuración remota de aplicaciones de Xbox WebView2 WinUI 2 (UWP)

Artículo
12/21/2023

Para usar Microsoft Edge DevTools para depurar una aplicación WebView2 WinUI 2 (UWP), usa la depuración remota. La depuración remota es necesaria para las aplicaciones WebView2 WinUI 2 (UWP) porque, actualmente, las DevTools integradas no se pueden iniciar dentro de una aplicación WebView2 WinUI 2 (UWP) firmada por la tienda.

Adjuntar DevTools de forma remota a una aplicación Xbox WebView2 WinUI 2 (UWP)

Adjunte Microsoft Edge DevTools de forma remota a una aplicación Xbox WebView2 WinUI 2 (UWP) de la siguiente manera:

En Microsoft Edge, vaya a edge://inspect. Se abre la página Inspeccionar con las herramientas de desarrollo de Edge :
Habilita el modo de desarrollador en Xbox. Consulta Activación del modo de desarrollador de Xbox One.
En Microsoft Edge, vaya a https://<System IP>:11443, donde <System IP> se reemplaza por la dirección IP del sistema operativo xbox. Se muestra la página Confirmar configuración de seguridad , en la pestaña Portal de dispositivos Windows :
Haga clic en el botón Continuar con una conexión no segura . Aparece un error de certificado SSL, NET::ERR__CERT_AUTHORITY_INVALID:
Haga clic en el botón Opciones avanzadas. Se muestra un mensaje, "El servidor no pudo probar...":
Haz clic en el vínculo Continuar a<System IP>(no seguro), donde <System IP> se reemplaza por la dirección IP del sistema operativo xbox. Se abre el Portal de dispositivos Xbox:
Vaya a https://<System IP>:11443/config/rootcertificate, donde <System IP> se reemplaza por la dirección IP del sistema operativo xbox. Esto descarga un rootcertificate.cer archivo:
Abra el archivo descargado rootcertificate.cer . Se abre un cuadro de diálogo de advertencia de seguridad:
Haga clic en el botón Abrir . Se abre un cuadro de diálogo Certificado :
Haga clic en el botón Instalar certificado . Se abre un cuadro de diálogo Bienvenido al Asistente para importación de certificados:
Seleccione el botón de opción Usuario actual y, a continuación, haga clic en el botón Siguiente . Se abre el Asistente para importación de certificados:
Seleccione la opción Colocar todos los certificados en el siguiente almacén, haga clic en el botón Examinar y, a continuación, seleccione Entidades de certificación raíz de confianza.
Haga clic en el botón Siguiente . Se abre un cuadro de diálogo Advertencia de seguridad :
Haga clic en el botón Sí .
Reinicie Microsoft Edge.
Vaya a https://<System IP>:11443, donde <System IP> se reemplaza por la dirección IP del sistema operativo del sistema xbox y compruebe que la conexión se indica como segura (es decir, una dirección URL HTTPS):
En el proyecto de aplicación, establece la siguiente variable para configurar la aplicación WebView2 WinUI 2 (UWP) para la depuración remota.

Para habilitar la depuración remota, se debe establecer una variable de entorno en el proyecto. Esta variable debe establecerse antes de crear la CoreWebView2 instancia y antes de establecer la WebView2.Source propiedad o llamar al WebView2.EnsureCoreWebView2Async método .
```
"WEBVIEW2_ADDITIONAL_BROWSER_ARGUMENTS", "--enable-features=msEdgeDevToolsWdpRemoteDebugging"
```
Por ejemplo, si usas la aplicación para UWP de ejemplo WebView2, puedes establecer la variable de entorno agregando la siguiente línea en el Browser.xaml.cs archivo:
```
Environment.SetEnvironmentVariable("WEBVIEW2_ADDITIONAL_BROWSER_ARGUMENTS", "--enable-features=msEdgeDevToolsWdpRemoteDebugging");
```
La línea se numera en 33 en esta captura de pantalla, en el Browser() constructor, debajo de una #endif que encapsula una instrucción existente SetEnvironmentVariable :
Implemente la aplicación en xbox mediante Xbox Device Portal e inicie la aplicación.
Ve a edge://inspect.
En el cuadro de texto Conectar a un dispositivo Windows remoto , escriba https://<System IP>:11443, donde <System IP> se reemplaza por la dirección IP del sistema operativo Xbox y, a continuación, haga clic en el botón Conectar al dispositivo .
Compruebe que puede conectarse correctamente para que el control WebView2 depurable, denominado Edge, aparezca en el nombre de la máquina:
En la parte inferior de la entrada de control Edge WebView2, haga clic en el vínculo inspeccionar . Microsoft Edge DevTools se abre para el control WebView2: