Usar el protocolo DevTools de Chrome en WebView2

Artículo
11/04/2021
Tiempo de lectura: 3 minutos

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

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

Instale y use el paquete de NuGet Microsoft.Web.WebView2.DevToolsProtocolExtension (.NET).
Ejecute uno de los métodos siguientes.
- .NET: CallDevToolsProtocolAsync, GetDevToolsProtocolEventReceiver
- Win32 C/C++: CallDevToolsProtocolMethod, ICoreWebView2DevToolsProtocolEventReceiver

Usar DevToolsProtocolHelper

Nota

El paquete DevToolsProtocolExtension de Microsoft.Web.WebView2.DevToolsProtocolExtension NuGet se encuentra actualmente en versión preliminar técnica. Mientras esté en versión preliminar, no use el paquete en aplicaciones de producción.

Microsoft.Web.WebView2.DevToolsProtocolExtension (versión preliminar) es un paquete de NuGet creado por el equipo de WebView2 que proporciona un 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 DevTools de Chrome en el control WebView2. Puedes seguir un patrón similar para usar otras características del Protocolo DevTools de Chrome.

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

Para crear una HTML file para buscar la geolocalización, complete siguiendo las acciones.

Abra Visual Studio Code (o un IDE de su elección).
Cree un archivo .html nuevo.

Copie y pegue el siguiente fragmento de código 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>

Guarde el .html archivo con el nombre de archivo geolocation.html .
Abra Microsoft Edge.
Abre el archivo geolocation.html.
Para mostrar las coordenadas de latitud y longitud, elija 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 un WebView2

Para crear una aplicación WebView2, usa una guía de introducción o los ejemplos de WebView2.
- Comenzar
- Ejemplos de WebView2
Establezca la navegación inicial del control WebView2 en geolocation.html .
```
webView.CoreWebView2.Navigate(@"C:\{path\to\file}\geolocation.html");
```
Asegúrate de geolocation.html que el archivo se muestre en la aplicación de control WebView2.

Mostrar el geolocation.html archivo en la aplicación de control WebView2

Paso 3: Instalar el paquete de NuGet DevToolsProtocolHelper

Use NuGet para descargar Microsoft.Web.WebView2.DevToolsProtocolExtension . Para instalar el paquete, complete las siguientes acciones.

Elija Project > Manage NuGet Packages > Browse.
Escriba Microsoft.Web.WebView2.DevToolsProtocolExtension y elija Microsoft.Web.WebView2.DevToolsProtocolExtension > Install.

Paso 4: Usar devTools Protocol Helper

Agregue el DevToolsProtocolExtension espacio de nombres al proyecto.

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

Cree una instancia del DevToolsProtocolHelper objeto y navegue a geolocation.html .

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

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

Ejecute el método setGeoLocationOverrideAsync. Para obtener más información, vaya a setGeolocationOverride.

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

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

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

}

Ejecuta la aplicación.
Para mostrar las coordenadas de París, Francia, elija el botón Mostrar ubicación.

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

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

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

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

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