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

Article
06/20/2023

Le protocole Chrome DevTools fournit des API pour instrumenter, inspecter, déboguer et profiler des navigateurs basés sur des Chromium. Le protocole Chrome DevTools est la base de Microsoft Edge DevTools. Utilisez le protocole Chrome DevTools pour les fonctionnalités qui ne sont pas implémentées dans la plateforme WebView2.

Pour utiliser l’API du protocole Chrome DevTools dans une application WebView2, effectuez l’une des opérations suivantes :

Installez et utilisez le package NuGet Microsoft.Web.WebView2.DevToolsProtocolExtension (.NET).
Vous pouvez également exécuter l’une des méthodes suivantes :
- .NET : CallDevToolsProtocolAsync, GetDevToolsProtocolEventReceiver
- Win32 C/C++ : CallDevToolsProtocolMethod, ICoreWebView2DevToolsProtocolEventReceiver

Utiliser DevToolsProtocolHelper

le DevToolsProtocolExtension inclut un DevToolsProtocolHelper objet .

Microsoft.Web.WebView2.DevToolsProtocolExtension est un package NuGet créé par l’équipe WebView2 qui fournit un accès facile aux fonctionnalités du protocole Chrome DevTools. Les exemples suivants décrivent comment utiliser la fonctionnalité de géolocalisation dans le protocole Chrome DevTools dans votre contrôle WebView2. Pour utiliser d’autres fonctionnalités du protocole Chrome DevTools, vous pouvez suivre un modèle similaire.

Étape 1 : Créer une page web pour rechercher votre géolocalisation

Pour créer un HTML file pour rechercher votre géolocalisation, effectuez les actions suivantes.

Ouvrez Visual Studio Code (ou un IDE de votre choix).
Créez un .html fichier.

Collez le code suivant dans votre nouveau .html fichier :

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Geolocation Finder</title>
</head>
<body>
   <button id="display">Display Location</button>
   <div id="message"></div>
</body>

<script>
   const btn = document.getElementById('display');
   // Find the user location.
   btn.addEventListener('click', function () {
      navigator.geolocation.getCurrentPosition(onSuccess, onError);
   });

   // Update message to display the latitude and longitude coordinates.
   function onSuccess(position) {
      const {latitude, longitude} = position.coords;
      message.textContent = `Your location: (${latitude},${longitude})`;
   }

   function onError() {
      message.textContent = `Operation Failed`;
   }
</script>
</html>

Enregistrez le .html fichier avec le nom geolocation.htmlde fichier .
Ouvrez Microsoft Edge.
Ouvrez geolocation.html.
Pour afficher vos coordonnées de latitude et de longitude, cliquez sur le bouton Emplacement d’affichage . Pour vérifier et comparer votre géolocalisation, copiez et collez vos coordonnées dans https://www.bing.com/maps.

Étape 2 : Afficher geolocation.html dans un WebView2

Pour créer une application WebView2, utilisez un guide de prise en main ou les exemples WebView2 :
- Prise en main de WebView2
- Référentiel WebView2Samples
Définissez la navigation initiale du contrôle WebView2 sur geolocation.html:
```
webView.CoreWebView2.Navigate(@"C:\{path\to\file}\geolocation.html");
```
Vérifiez que le geolocation.html fichier est affiché dans votre application de contrôle WebView2 :

Étape 3 : Installer le package NuGet DevToolsProtocolHelper

Utilisez NuGet pour télécharger Microsoft.Web.WebView2.DevToolsProtocolExtension.

Pour installer le package :

Sélectionnez Projet>Gérer les packages> NuGetParcourir.
Tapez Microsoft.Web.WebView2.DevToolsProtocolExtension , puis sélectionnez Microsoft.Web.WebView2.DevToolsProtocolExtension>Installer.
Vérifiez que Microsoft.Web.WebView2.DevToolsProtocolExtension s’affiche dans le Gestionnaire de package NuGet visual Studio :

Étape 4 : Utiliser devTools Protocol Helper

Ajoutez l’espace DevToolsProtocolExtension de noms à votre projet :

using Microsoft.Web.WebView2.Core;
using Microsoft.Web.WebView2.Core.DevToolsProtocolExtension;

Instanciez l’objet DevToolsProtocolHelper et accédez à geolocation.html:

async void InitializeAsync()
{
   await webView.EnsureCoreWebView2Async(null);
   DevToolsProtocolHelper helper = webView.CoreWebView2.GetDevToolsProtocolHelper();

   webView.CoreWebView2.Navigate(@"C:\{path\to\file}\geolocation.html");
}

Exécutez la méthode setGeoLocationOverrideAsync :

async void InitializeAsync()
{
   await webView.EnsureCoreWebView2Async(null);
   DevToolsProtocolHelper helper = webview.CoreWebView2.GetDevToolsProtocolHelper();

   // Latitude and longitude for Paris, France.
   double latitude = 48.857024082572565;
   double longitude = 2.3161581601457386;
   double accuracy = 1;
   await helper.Emulation.setGeolocationOverrideAsync(latitude, longitude, accuracy);
}

Pour plus d’informations, consultez setGeolocationOverride.

Exécutez votre application.
Pour afficher les coordonnées de Paris, France, cliquez sur le bouton Afficher l’emplacement :

Créer une demande de bogue ou de fonctionnalité pour le protocole Chrome DevTools

Pour demander une fonctionnalité de plateforme WebView2, entrez un nouveau problème dans le dépôt WebView2Feedback.

Pour signaler un bogue concernant le protocole Chrome DevTools, créez un rapport de bogues dans la base de données des bogues Chromium.

Le protocole Chrome DevTools est géré par le projet open source Chromium, et non par l’équipe Microsoft Edge WebView2.

Voir aussi

Vue d’ensemble du protocole Microsoft Edge DevTools
Référentiel WebView2Samples
Chrome DevTools Protocol (CDP) dans Vue d’ensemble des fonctionnalités et API WebView2

Partager via