Exemple d’application WPF avec l’extension CDP

Cet exemple WebView2 montre comment utiliser l’extension CDP WebView2 pour utiliser le protocole CDP (Chrome DevTools Protocol) dans une application WPF.

• Exemple de nom : WV2CDPExtensionWPFSample
• Répertoire du référentiel : WV2CDPExtensionWPFSample
• Fichier de solution : WV2CDPExtensionWPFSample.sln

Cet exemple, WV2CDPExtensionWPFSample, est généré avec l’extension CDP WebView2 (package NuGet Microsoft.Web.WebView2.DevToolsProtocolExtension ). Cet exemple appelle des méthodes Chrome DevTools Protocol sur un DevToolsProtocolHelper objet dans WebView2.

Cet exemple est généré en tant que projet WPF Visual Studio 2019. Il utilise C# dans l’environnement WebView2.

Menu Commandes DevTools :

Le menu Événements DevTools :

S’il s’agit de votre première utilisation de WebView2, nous vous recommandons de suivre d’abord le didacticiel Prise en main de WebView2 dans les applications WPF . Ce tutoriel vous guide tout au long de la création d’un WebView2 et de l’ajout de fonctionnalités WebView2 de base.

Étape 1 : Installer Visual Studio avec la prise en charge de .NET

Microsoft Visual Studio (avec prise en charge de .NET) est requis. Microsoft Visual Studio Code n’est pas pris en charge pour cet exemple.

1. Si Visual Studio (version minimale requise) avec prise en charge de .NET n’est pas déjà installé, dans une fenêtre ou un onglet distinct, consultez Installer Visual Studio dans Configurer votre environnement de développement pour WebView2. Suivez les étapes décrites dans cette section, puis revenez à cette page et poursuivez les étapes ci-dessous.

Étape 2 : cloner ou télécharger le référentiel WebView2Samples

1. Si ce n’est pas déjà fait, clonez ou téléchargez le WebView2Sample référentiel sur votre lecteur local. Dans une fenêtre ou un onglet distinct, consultez Télécharger le référentiel WebView2Samples dans Configurer votre environnement de développement pour WebView2. Suivez les étapes décrites dans cette section, revenez à cette page et continuez ci-dessous.

Étape 3 : Ouvrir la solution dans Visual Studio

1. Sur votre lecteur local, ouvrez le .sln fichier dans Visual Studio, dans le répertoire :

   • <your-repos-directory>/WebView2Samples/SampleApps/WV2CDPExtensionWPFSample/WV2CDPExtensionWPFSample.sln

   ou :

   • <your-repos-directory>/WebView2Samples-main/SampleApps/WV2CDPExtensionWPFSample/WV2CDPExtensionWPFSample.sln

Si vous souhaitez utiliser Visual Studio 2017, dans Visual Studio, modifiez l’ensemble d’outils de plateforme du projet dans Propriétés du projet Propriétés > de configuration Ensemble > d’outils de plateforme générale>. Pour utiliser Visual Studio 2017, vous devrez peut-être également installer un sdk Windows récent.

Étape 4 : Installer les charges de travail si vous y êtes invité

1. Si vous y êtes invité, installez toutes les charges de travail Visual Studio demandées. Dans une fenêtre ou un onglet distinct, consultez Installer des charges de travail Visual Studio dans Configurer votre environnement de développement pour WebView2. Suivez les étapes décrites dans cette section, revenez à cette page et continuez ci-dessous.

   Le projet WV2CDPExtensionWPFSample s’ouvre dans Visual Studio :

   

Étape 5 : Générer et exécuter le projet avec la version installée des KITS de développement logiciel (SDK)

Une version du Kit de développement logiciel (SDK) WebView2 et du WebView2 DevToolsProtocolExtension sont inclus en tant que packages NuGet dans ce projet. Dans une étape ultérieure, vous les mettrez à jour à l’aide du Gestionnaire de package NuGet de Visual Studio.

En haut de Visual Studio, définissez la cible de build comme suit :

1. Dans la liste déroulante Configurations de solution, sélectionnez Déboguer ou Mettre en production.

2. Dans la liste déroulante Plateformes de solutions, sélectionnez N’importe quel processeur.

3. Dans l’Explorateur de solutions, cliquez avec le bouton droit sur le projet WV2CDPExtensionWPFSample , puis sélectionnez Générer.

1. Dans Visual Studio, sélectionnez Déboguer>Démarrer le débogage (F5).

   La fenêtre exemple d’application s’ouvre :

   

2. Dans Visual Studio, sélectionnez Déboguer>Arrêter le débogage. Visual Studio ferme l’application.

Étape 6 : Mettre à jour le Kit de développement logiciel (SDK) WebView2

1. Dans l’Explorateur de solutions, cliquez avec le bouton droit sur le projet (et non sur le nœud de la solution), puis sélectionnez Gérer les packages NuGet. Le Gestionnaire de package NuGet s’ouvre.

2. Cliquez sur l’onglet Installé ou Mises à jour .

3. Activez ou désactivez la case à cocher Inclure la préversion .

   

   La capture d’écran ci-dessus montre Visual Studio 2019, montrant cet exemple dans le contexte de la solution WebView2APIsSample globale, plutôt que dans la solution autonome actuelle. Dans cette capture d’écran, le dépôt dispose d’une version de mise en production du Kit de développement logiciel (SDK) WebView2, et des versions préliminaires et plus récentes du KIT de développement logiciel (SDK) sont disponibles.

4. Si une version plus récente du Kit de développement logiciel (SDK) Microsoft.Web.WebView2 est répertoriée, cliquez sur le bouton Mettre à jour . Une préversion a un suffixe « -prerelease », tel que 1.0.1248-prerelease. Les kits SDK préversion vous permettent d’essayer les dernières fonctionnalités et API WebView2.

Si vous souhaitez afficher des détails sur cette étape, dans une fenêtre ou un onglet distinct, consultez Installer ou mettre à jour le Kit de développement logiciel (SDK) WebView2 dans Configurer votre environnement de développement pour WebView2. Suivez les étapes décrites dans cette section, revenez à cette page et continuez ci-dessous.

Étape 7 : Mettre à jour l’extension CDP WebView2

Un prérequis pour cet exemple est la dernière version de l’extension CDP WebView2 (Microsoft.Web.WebView2.DevToolsProtocolExtension), qui est incluse dans ce projet. Ce package ajoute la prise en charge de l’API CDP (Chrome DevTools Protocol).

1. Dans l’Explorateur de solutions, cliquez avec le bouton droit sur le projet, puis sélectionnez Gérer les packages NuGet. Le Gestionnaire de package NuGet s’ouvre.

2. Cliquez sur l’onglet Installé ou Mises à jour .

3. Décochez la case Inclure la préversion .

   

4. Si une version plus récente du Kit de développement logiciel (SDK) Microsoft.Web.WebView2.DevToolsProtocolExtension est répertoriée, cliquez sur le bouton Mettre à jour .

Voir aussi :

• Utiliser le protocole CDP (Chrome DevTools Protocol) dans les applications WebView2

Étape 8 : Générer et exécuter le projet avec des packages mis à jour

1. Dans Visual Studio, sélectionnez Déboguer>Démarrer le débogage (F5).

   La fenêtre exemple d’application s’ouvre :

   

2. Dans Visual Studio, sélectionnez Déboguer>Arrêter le débogage. Visual Studio ferme l’application.

Étape 9 : Inspecter le code

1. Dans l’éditeur de code Visual Studio, inspectez le code :

   

   Menu Commandes DevTools :

   

   Le menu Événements DevTools :

   

Voir aussi

• Informations de référence sur l’API WebView2
• Prise en main de WebView2 dans les applications WinUI 2 (UWP)
• Microsoft.Web.WebView2.DevToolsProtocolExtension sur NuGet.