Déboguer des applications WebView2 avec Microsoft Edge DevTools

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.

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 :

• Événement WebResourceRequested . Voir :

  • Chargement du contenu local en gérant l’événement WebResourceRequested dans Utilisation du contenu local dans les applications WebView2.
  • La source est mappée à l’événement WebResourceRequested dans Utilisation du contenu local dans les applications WebView2.

• Mappage du nom d’hôte virtuel. Voir :

  • Chargement de contenu local à l’aide du mappage de nom d’hôte virtuel dans Utilisation du contenu local dans les applications WebView2.
  • La source est mappée avec le mappage de nom d’hôte virtuel dans Utilisation du contenu local dans les applications WebView2.

Voir aussi

• Vue d’ensemble de DevTools.
• Prise en main de WebView2
• Référentiel WebView2Samples : un exemple complet de fonctionnalités WebView2.
• Informations de référence sur l’API WebView2