Uso del protocolo Chrome DevTools (CDP) en aplicaciones WebView2

  • Artículo

El protocolo Chrome DevTools proporciona API para instrumentar, inspeccionar, depurar y generar perfiles de exploradores basados en Chromium. El protocolo Chrome DevTools es la base de Microsoft Edge DevTools. Use el protocolo Chrome DevTools para las características que no se implementan en la plataforma WebView2.

Para usar la API de protocolo Chrome DevTools en una aplicación WebView2, realice una de las siguientes acciones:

Uso de DevToolsProtocolHelper

DevToolsProtocolExtension incluye un DevToolsProtocolHelper objeto .

Microsoft.Web.WebView2.DevToolsProtocolExtension es un paquete NuGet creado por el equipo de WebView2 que proporciona fácil acceso a las características del protocolo Chrome DevTools. En los ejemplos siguientes se describe cómo usar la funcionalidad de geolocalización en el protocolo Chrome DevTools en el control WebView2. Para usar otras características del protocolo Chrome DevTools, puede seguir un patrón similar.

Paso 1: Crear una página web para buscar la geolocalización

Para crear un HTML file objeto para buscar la geolocalización, complete las siguientes acciones.

  1. Abra Visual Studio Code (o un IDE que prefiera).

  2. Cree un nuevo .html archivo.

  3. Pegue el código siguiente en el nuevo .html archivo:

    <!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. Guarde el .html archivo con el nombre geolocation.htmlde archivo .

  5. Abra Microsoft Edge.

  6. Abra geolocation.html.

  7. Para mostrar las coordenadas de latitud y longitud, haga clic en el botón Mostrar ubicación . Para comprobar y comparar la geolocalización, copie y pegue las coordenadas en https://www.bing.com/maps.

    Mostrar las coordenadas de geolocalización del usuario en Microsoft Edge

Paso 2: Mostrar geolocation.html en webView2

  1. Para crear una aplicación WebView2, use una guía de introducción o los ejemplos de WebView2:

  2. Establezca la navegación inicial del control WebView2 en geolocation.html:

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

  3. Asegúrese de que el geolocation.html archivo se muestra en la aplicación de control WebView2:

    El archivo geolocation.html, que se muestra en la aplicación de control WebView2

Paso 3: Instalar el paquete NuGet DevToolsProtocolHelper

Use NuGet para descargar Microsoft.Web.WebView2.DevToolsProtocolExtension.

Para instalar el paquete:

  1. SeleccioneProject Manage NuGet PackagesBrowse (Examinar paquetes > NuGet de administración de proyectos>).

  2. Escriba Microsoft.Web.WebView2.DevToolsProtocolExtension y, a continuación, seleccione Microsoft.Web.WebView2.DevToolsProtocolExtension>Install.

  3. Asegúrese de que Microsoft.Web.WebView2.DevToolsProtocolExtension se muestra en el Administrador de paquetes NuGet de Visual Studio:

    Asegurarse de que Microsoft.Web.WebView2.DevToolsProtocolExtension se muestra en el Administrador de paquetes NuGet de Visual Studio

Paso 4: Uso del asistente de protocolo de DevTools

  1. Agregue el espacio de DevToolsProtocolExtension nombres al proyecto:

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

  2. Cree una instancia del DevToolsProtocolHelper objeto y vaya a geolocation.html:

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

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

  3. Ejecute el método 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);
}

    Para obtener más información, vea setGeolocationOverride.

  4. Ejecute la aplicación.

  5. Para mostrar las coordenadas de París, Francia, haga clic en el botón Mostrar ubicación :

    Mostrar el archivo .html en un control WebView2 con las coordenadas de París

Archivo de una solicitud de error o característica para el protocolo Chrome DevTools

Para solicitar una característica de plataforma WebView2, escriba un nuevo problema en el repositorio WebView2Feedback.

Para archivar un error sobre el protocolo Chrome DevTools, escriba un informe de errores en la base de datos de errores de Chromium.

El protocolo Chrome DevTools lo mantiene el proyecto código abierto Chromium, no el equipo de Microsoft Edge WebView2.

Vea también