Partager via

Déboguer des applications WebView2 avec Microsoft Edge DevTools

  • Article

Utilisez les outils de développement Microsoft Edge pour déboguer le contenu web affiché dans les contrôles WebView2, de la même façon que vous pouvez déboguer une autre page web affichée dans Microsoft Edge.

Débogage DevTools dans un contrôle WebView2

Lorsque vous utilisez une application WebView2, il existe plusieurs façons d’ouvrir DevTools :

  • Appuyez sur F12.
  • Appuyez sur Ctrl+Maj+I.
  • Cliquez avec le bouton droit sur la page, puis sélectionnez Inspect.

Une application peut également utiliser l’API OpenDevToolsWindow pour ouvrir par programmation une fenêtre DevTools. Par exemple, vous pouvez utiliser cette approche si les touches d’accès rapide ci-dessus et les éléments de menu contextuel ont été supprimés.

Si aucune des approches ci-dessus n’est disponible, vous pouvez ajouter --auto-open-devtools-for-tabs aux arguments du navigateur via une variable d’environnement ou une clé de Registre. Cette approche ouvre une fenêtre DevTools lorsqu’un WebView2 est créé.

Mappage de la source avec le mappage de l’événement WebResourceRequested ou du nom d’hôte virtuel

Les mappages sources sont nécessaires pour déboguer le code source du contenu compilé, notamment :

  • JavaScript transpilé, tel que TypeScript ou JavaScript minifié.
  • CSS compilé, comme SASS ou SCSS.

WebView2 ne charge pas les mappages sources référencés par le contenu qui a été chargé à l’aide de l’une ou l’autre approche :

Voir aussi