Compartir a través de

Depuración de aplicaciones WebView2 con Microsoft Edge DevTools

  • Artículo

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.

Depuración de DevTools en un control WebView2

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:

Vea también