Usar o protocolo CDP (Chrome DevTools) em aplicativos WebView2

O protocolo Chrome DevTools fornece APIs para instrumentar, inspecionar, depurar e criar perfis de navegadores baseados no Chromium. O protocolo Chrome DevTools é a base para o DevTools do Microsoft Edge. Use o protocolo Chrome DevTools para recursos que não estão implementados na plataforma WebView2.

Para usar a API do Chrome DevTools Protocol em um aplicativo WebView2, siga um destes procedimentos:

Usar DevToolsProtocolHelper

Inclui DevToolsProtocolExtension um DevToolsProtocolHelper objeto.

Microsoft.Web.WebView2.DevToolsProtocolExtension é um pacote NuGet criado pela equipe do WebView2 que fornece acesso fácil aos recursos do Protocolo Chrome DevTools. Os exemplos a seguir descrevem como usar a funcionalidade de geolocalização no Protocolo Chrome DevTools no controle WebView2. Para usar outros recursos do Protocolo Chrome DevTools, você pode seguir um padrão semelhante.

Passo 1: Crie uma página da web para encontrar sua geolocalização

Para criar um HTML file para encontrar sua geolocalização, conclua seguindo as ações.

  1. Abra o Visual Studio Code (ou um IDE de sua escolha).

  2. Crie um novo .html arquivo.

  3. Cole o seguinte código no novo .html arquivo:

    <!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. Salve o .html arquivo com o nome geolocation.htmlde arquivo .

  5. Abra o Microsoft Edge.

  6. Abrir geolocation.html.

  7. Para exibir suas coordenadas de latitude e longitude, clique no botão Exibir local . Para verificar e comparar sua geolocalização, copie e cole suas coordenadas no https://www.bing.com/mapsformato .

    Exibindo as coordenadas de geolocalização do usuário no Microsoft Edge

Etapa 2: Exibir geolocation.html em um WebView2

  1. Para criar um aplicativo WebView2, use um guia de Introdução ou os exemplos do WebView2:

  2. Defina a navegação inicial do controle WebView2 como geolocation.html:

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

  3. Verifique se o geolocation.html arquivo é exibido em seu aplicativo de controle WebView2:

    O arquivo geolocation.html, exibido no aplicativo de controle WebView2

Etapa 3: Instalar o pacote NuGet DevToolsProtocolHelper

Use o NuGet para baixar Microsoft.Web.WebView2.DevToolsProtocolExtensiono arquivo .

Para instalar o pacote:

  1. Selecione Projeto>Gerenciar Pacotes> NuGetProcurar.

  2. Digite Microsoft.Web.WebView2.DevToolsProtocolExtension e selecione Instalar Microsoft.Web.WebView2.DevToolsProtocolExtension>.

  3. Verifique se Microsoft.Web.WebView2.DevToolsProtocolExtension é exibido no Gerenciador de Pacotes NuGet do Visual Studio:

    Verifique se Microsoft.Web.WebView2.DevToolsProtocolExtension é exibido no Gerenciador de Pacotes NuGet do Visual Studio

Etapa 4: usar o auxiliar de protocolo do DevTools

  1. Adicione o DevToolsProtocolExtension namespace ao seu projeto:

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

  2. Instancie o DevToolsProtocolHelper objeto e navegue até geolocation.html:

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

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

  3. Execute o 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 obter mais informações, consulte setGeolocationOverride.

  4. Execute seu aplicativo.

  5. Para exibir as coordenadas de Paris, França, clique no botão Exibir Local :

    Exibir o arquivo .html em um controle WebView2 com as coordenadas para Paris

Registrar uma solicitação de bug ou recurso para o protocolo Chrome DevTools

Para solicitar um recurso da plataforma WebView2, insira um novo problema no repositório WebView2Feedback.

Para registrar um bug sobre o Protocolo Chrome DevTools, envie um relatório de bug no banco de dados de bugs do Chromium.

O protocolo Chrome DevTools é mantido pelo projeto código aberto Chromium, não pela equipe do Microsoft Edge WebView2.

Confira também

  • Last updated on