Aplicaciones WebView2 WinUI 2 (UWP) de escritorio de depuración remota

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 de escritorio webView2 WinUI 2 (UWP)

Adjunte Microsoft Edge DevTools de forma remota a una aplicación de escritorio WebView2 WinUI 2 (UWP) como se indica a continuación:

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

   

2. Habilitar Developer Mode: abra Configuración de Windows, seleccione Privacidad & seguridad>para desarrolladores y, a continuación, active el botón de alternancia Modo de desarrollador .

3. En la misma página Configuración , active el botón de alternancia de Device Portal :

   

   Si el sistema operativo no está actualizado, es posible que recibas un mensaje en la ventana Configuración: "El paquete del modo de desarrollador de Windows no se encontró en Windows Update, por lo que la implementación remota y el Portal de dispositivos Windows no están disponibles. Más información."

4. Si recibe este mensaje, actualice el sistema operativo (SO) a la versión más reciente y, a continuación, active el botón de alternancia del Portal de dispositivos.

5. Cuando se le pida que instale el paquete del modo de desarrollador de Windows, haga clic en Sí:

   

   Una vez completada la instalación, tenga en cuenta la dirección URL que se usará para la conexión de depuración remota. Para buscar esta dirección URL, expanda la lista desplegable Portal de dispositivos . En este caso, la dirección URL del portal de dispositivos que se usará es http://localhost:50080:

   

6. Instale Herramientas remotas para Microsoft Edge desde Microsoft Store.

7. En Microsoft Edge, vaya a la dirección URL del Portal de dispositivos que anotó anteriormente. Compruebe que la página Confirmar configuración de seguridad está cargada (en la pestaña Portal de dispositivos Windows ):

   

8. Si solo está depurando aplicaciones que se ejecutan localmente, puede seleccionar el botón Continuar con una conexión no segura .

   O bien, si no está ejecutando la aplicación localmente o si necesita conectarse a través de HTTPS, seleccione el vínculo Configurar una conexión segura y, a continuación, siga los pasos de la página a la que se le redirige.

9. Compruebe que se le redirige a la página Administrador de aplicaciones: Portal de dispositivos Windows :

   

10. Vaya a http://<Device Portal URL>/msedge y compruebe que Las herramientas remotas para Microsoft Edge funcionan. La página carga una lista vacía: [], a menos que haya una aplicación en ejecución que se pueda depurar mediante herramientas remotas.

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

    Establezca la siguiente variable:

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

    

12. Inicie la aplicación.

13. Vaya a http://<Device Portal URL>/msedge, como http://localhost:50080/msedge, y asegúrese de que la instancia de WebView2 aparece en la lista:

    

14. Ve a edge://inspect. En el cuadro de texto Conectar a un dispositivo Windows remoto , escriba http://<Device Portal URL>, como http://localhost:50080y, a continuación, haga clic en Conectar al dispositivo.

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

    

16. 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 puede usar Microsoft Edge DevTools para inspeccionar y depurar el control WebView2.

Consulte también

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