Depuración de aplicaciones WebView2 con Microsoft Edge DevTools
Use Microsoft Edge Developer Tools para depurar el contenido web que se muestra en los controles WebView2, de la misma manera que puede depurar otra página web que se muestra en Microsoft Edge.
Cuando se usa una aplicación WebView2, hay varias maneras de abrir DevTools:
- Presione F12.
- Presione Ctrl+Mayús+I.
- Haga clic con el botón derecho en la página y seleccione
Inspect
.
Una aplicación también puede usar la OpenDevToolsWindow
API para abrir mediante programación una ventana de DevTools. Por ejemplo, puede usar este enfoque si se han quitado las teclas de acceso rápido anteriores y los elementos del menú contextual.
Si ninguno de los enfoques anteriores está disponible, puede agregar --auto-open-devtools-for-tabs
a los argumentos del explorador a través de una variable de entorno o una clave del Registro. Este enfoque abrirá una ventana DevTools cuando se cree un WebView2.
Asignaciones de origen con la asignación de nombres de WebResourceRequested
host virtual o de eventos
Los mapas de origen son necesarios para depurar el código fuente del contenido compilado, incluidos:
- JavaScript transpilado, como TypeScript o JavaScript minificado.
- CSS compilado, como SASS o SCSS.
WebView2 no carga mapas de origen a los que hace referencia el contenido que se cargó mediante cualquiera de los enfoques:
Evento
WebResourceRequested
. Vea:-
Carga de contenido local controlando el
WebResourceRequested
evento en Uso de contenido local en aplicaciones WebView2. -
El origen se asigna con el
WebResourceRequested
evento en Uso de contenido local en aplicaciones WebView2.
-
Carga de contenido local controlando el
Asignación de nombres de host virtual. Vea:
- Carga de contenido local mediante la asignación de nombres de host virtual en Uso de contenido local en aplicaciones WebView2.
- Mapas de origen con asignación de nombres de host virtual en Uso de contenido local en aplicaciones WebView2.
Vea también
- Introducción a DevTools.
- Introducción a WebView2
- Repositorio WebView2Samples : un ejemplo completo de las funcionalidades de WebView2.
- Referencia de la API de WebView2