Partager via

Déboguer des applications WebView2 avec Visual Studio

  • Article

Microsoft Visual Studio fournit différents outils de débogage pour le code web et natif dans les applications WebView2, afin de déboguer du code web et natif dans des applications Win32 ou des compléments Office. Cet article se concentre sur le débogage des contrôles WebView2. Les autres méthodes de débogage dans Visual Studio sont également disponibles.

Ouvrir DevTools à l’aide d’une approche autre que F12

Lorsque vous déboguez votre application dans Visual Studio avec le débogueur natif attaché, appuyer sur F12 peut déclencher le débogueur natif au lieu des Outils de développement. Pour éviter cette situation, appuyez sur Ctrl+Maj+I. Vous pouvez également cliquer avec le bouton droit sur la page, puis sélectionner Inspect.

Configuration requise

  • Pour déboguer des scripts, l’application doit être lancée à partir de Visual Studio.

  • Vous ne pouvez pas attacher un débogueur à un processus WebView2 en cours d’exécution.

  • Installez Visual Studio 2019 version 16.4 Preview 2 ou ultérieure.

Pour déboguer votre code, commencez par installer et configurer les outils de débogueur de script dans Visual Studio, conformément aux deux sections suivantes.

Installer le composant diagnostics JavaScript

Tout d’abord, installez le composant JavaScript diagnostics dans développement Desktop avec C++, comme suit.

  1. Dans la barre de Explorer Windows, tapez Visual Studio Installer.

  2. Sélectionnez Visual Studio Installer pour l’ouvrir.

  3. Dans le Visual Studio Installer, sur la version installée, cliquez sur le bouton Plus, puis sélectionnez Modifier.

  4. Dans Visual Studio, sous Charges de travail, sélectionnez le paramètre Desktop Development with C++ :

    Écran Modification des charges de travail visual Studio

  5. Sélectionnez Composants individuels, en haut.

  6. Dans la zone de recherche, entrez JavaScript diagnostics.

  7. Sélectionnez le paramètre diagnostics JavaScript.

  8. Cliquez sur Modifier.

    Visual Studio : Modification des valeurs sous l’onglet « Composants individuels »

Activer le débogage de script pour les applications WebView2

Ensuite, activez le débogage de script pour les applications WebView2, comme suit.

  1. Cliquez avec le bouton droit sur votre projet WebView2, puis sélectionnez Propriétés.

  2. Sous Propriétés de configuration, sélectionnez Débogage.

  3. Sous Type de débogueur, sélectionnez JavaScript (WebView2).

    Propriété de configuration « Débogage » dans Visual Studio

Déboguer votre application WebView2

Après avoir effectué la configuration ci-dessus, déboguez votre application WebView2, comme suit.

  1. Pour définir un point d’arrêt dans votre code source, pointez à gauche du numéro de ligne, puis cliquez pour définir un point d’arrêt. L’adaptateur de débogage JS/TS n’effectue pas le mappage du chemin source. Vous devez ouvrir exactement le même chemin associé à votre WebView2.

    Ajout d’un point d’arrêt dans Visual Studio

  2. Pour exécuter le débogueur, sélectionnez la taille de bits de la plateforme, puis cliquez sur le bouton vert Lecture en regard de Débogueur Windows local. L’application s’exécute et le débogueur se connecte au premier processus WebView2 créé.

    Débogueur Windows local dans Visual Studio

  3. Dans la console de débogage, recherchez la sortie du débogueur.

    Console de débogage dans Visual Studio

Résolution des problèmes

Le mappage de chemin de source virtuelle n’est pas pris en charge dans Visual Studio 2019

Si vous utilisez la méthode WebView2 SetVirtualHostNameToFolderMapping , le débogueur dans Visual Studio 2019 ne comprend pas le mappage du chemin de la source virtuelle, de sorte que les points d’arrêt ne fonctionnent pas correctement.

Le mappage de chemin de source virtuelle fonctionne lorsque vous utilisez le débogueur dans Visual Studio Code.

Voir aussi