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

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:

1. En Microsoft Edge, vaya a edge://inspect. Se abre la página Inspeccionar con las herramientas de desarrollo de Edge :

   

2. Habilita el modo de desarrollador en Xbox. Consulta Activación del modo de desarrollador de Xbox One.

3. 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 :

   

4. Haga clic en el botón Continuar con una conexión no segura . Aparece un error de certificado SSL, NET::ERR__CERT_AUTHORITY_INVALID:

   

5. Haga clic en el botón Opciones avanzadas. Se muestra un mensaje, "El servidor no pudo probar...":

   

6. 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:

   

7. 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:

   

8. Abra el archivo descargado rootcertificate.cer . Se abre un cuadro de diálogo de advertencia de seguridad:

   

9. Haga clic en el botón Abrir . Se abre un cuadro de diálogo Certificado :

   

10. Haga clic en el botón Instalar certificado . Se abre un cuadro de diálogo Bienvenido al Asistente para importación de certificados:

    

11. 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:

    

12. 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.

13. Haga clic en el botón Siguiente . Se abre un cuadro de diálogo Advertencia de seguridad :

    

14. Haga clic en el botón Sí .

15. Reinicie Microsoft Edge.

16. 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):

    

17. 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 :

    

18. Implemente la aplicación en xbox mediante Xbox Device Portal e inicie la aplicación.

19. Ve a edge://inspect.

20. 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 .

21. Compruebe que puede conectarse correctamente para que el control WebView2 depurable, denominado Edge, aparezca en el nombre de la máquina:

    

22. 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:

    

Ahora puedes usar Microsoft Edge DevTools para inspeccionar y depurar el control WebView2 en la aplicación Xbox WebView2 WinUI 2 (UWP).

Vea también

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