Afficher en anglais

Partage via

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

  • Article

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 :

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.

  1. Ouvrez Visual Studio Code (ou un IDE de votre choix).

  2. Créez un .html fichier.

  3. Collez le code suivant dans votre nouveau .html fichier :

    HTML 
    <!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>

  4. Enregistrez le .html fichier avec le nom geolocation.htmlde fichier .

  5. Ouvrez Microsoft Edge.

  6. Ouvrez geolocation.html.

  7. 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.

    Affichage des coordonnées de géolocalisation de l’utilisateur dans Microsoft Edge

Étape 2 : Afficher geolocation.html dans un WebView2

  1. Pour créer une application WebView2, utilisez un guide de prise en main ou les exemples WebView2 :

  2. Définissez la navigation initiale du contrôle WebView2 sur geolocation.html:

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

  3. Vérifiez que le geolocation.html fichier est affiché dans votre application de contrôle WebView2 :

    Fichier geolocation.html 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 :

  1. Sélectionnez Projet>Gérer les packages> NuGetParcourir.

  2. Tapez Microsoft.Web.WebView2.DevToolsProtocolExtension , puis sélectionnez Microsoft.Web.WebView2.DevToolsProtocolExtension>Installer.

  3. Vérifiez que Microsoft.Web.WebView2.DevToolsProtocolExtension s’affiche dans le Gestionnaire de package NuGet visual Studio :

    Vérifier que Microsoft.Web.WebView2.DevToolsProtocolExtension est affiché dans le Gestionnaire de package NuGet Visual Studio

Étape 4 : Utiliser devTools Protocol Helper

  1. Ajoutez l’espace DevToolsProtocolExtension de noms à votre projet :

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

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

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

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

  3. Exécutez la méthode setGeoLocationOverrideAsync :

    C# 
    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.

  4. Exécutez votre application.

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

    Afficher le fichier .html dans un contrôle WebView2 avec les coordonnées de Paris

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