Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Skip to content
Permalink
main
Switch branches/tags
Go to file
 
 
Cannot retrieve contributors at this time
title description author ms.author ms.topic ms.prod ms.technology ms.date
Use the Chrome DevTools Protocol in WebView2 apps
How to use the Chrome DevTools Protocol in your WebView2 app by using the Microsoft Edge WebView2 Chrome DevTools Protocol NuGet package.
MSEdgeTeam
msedgedevrel
conceptual
microsoft-edge
webview
05/06/2021

Use the Chrome DevTools Protocol in WebView2 apps

The Chrome DevTools Protocol provides APIs to instrument, inspect, debug, and profile Chromium-based browsers. The Chrome DevTools Protocol is the foundation for the Microsoft Edge DevTools. Use the Chrome DevTools Protocol for features that aren't implemented in the WebView2 platform.

To use the Chrome DevTools Protocol API in a WebView2 app, do either of the following:

Use DevToolsProtocolHelper

Microsoft.Web.WebView2.DevToolsProtocolExtension (Preview) is a NuGet package created by the WebView2 team that provides easy access to Chrome DevTools Protocol features. The following examples describe how to use the geolocation functionality in Chrome DevTools Protocol in your WebView2 control. To use other Chrome DevTools Protocol features, you can follow a similar pattern.

Don't use the preview package in production apps

The Microsoft.Web.WebView2.DevToolsProtocolExtension NuGet package is currently in technical preview. While in preview, refrain from using this NuGet package in production apps.

Step 1: Create a webpage to find your geolocation

To create an HTML file to find your geolocation, complete following the actions.

  1. Open Visual Studio Code (or an IDE of your choice).

  2. Create a new .html file.

  3. Paste the following code in your new .html file:

    <!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. Save the .html file with the filename geolocation.html.

  5. Open Microsoft Edge.

  6. Open geolocation.html.

  7. To display your latitude and longitude coordinates, click the Display Location button. To verify and compare your geolocation, copy and paste your coordinates in https://www.bing.com/maps.

    Displaying the user's geolocation coordinates in Microsoft Edge

Step 2: Display geolocation.html in a WebView2

  1. To create a WebView2 app, use a Get Started guide or the WebView2 samples:

  2. Set the initial navigation of the WebView2 control to geolocation.html:

    webView.CoreWebView2.Navigate(@"C:\{path\to\file}\geolocation.html");
  3. Make sure the geolocation.html file is displayed in your WebView2 control app:

    The geolocation.html file, displayed in your WebView2 control app

Step 3: Install the DevToolsProtocolHelper NuGet package

Use NuGet to download Microsoft.Web.WebView2.DevToolsProtocolExtension.

To install the package:

  1. Select Project > Manage NuGet Packages > Browse.

  2. Type Microsoft.Web.WebView2.DevToolsProtocolExtension and then select Microsoft.Web.WebView2.DevToolsProtocolExtension > Install.

  3. Make sure Microsoft.Web.WebView2.DevToolsProtocolExtension is displayed in the Visual Studio NuGet Package Manager:

    Making sure Microsoft.Web.WebView2.DevToolsProtocolExtension is displayed in the Visual Studio NuGet Package Manager

Step 4: Use DevTools Protocol Helper

  1. Add the DevToolsProtocolExtension namespace to your project:

    using Microsoft.Web.WebView2.Core;
    using Microsoft.Web.WebView2.Core.DevToolsProtocolExtension;
  2. Instantiate the DevToolsProtocolHelper object and navigate to geolocation.html:

    async void InitializeAsync()
    {
       await webView.EnsureCoreWebView2Async(null);
       DevToolsProtocolHelper helper = webView.CoreWebView2.GetDevToolsProtocolHelper();
    
       webView.CoreWebView2.Navigate(@"C:\{path\to\file}\geolocation.html");
    }
  3. Run the setGeoLocationOverrideAsync method:

    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);
    }

    For more information, see setGeolocationOverride.

  4. Run your app.

  5. To display the coordinates of Paris, France, click the Display Location button:

    Display the .html file in a WebView2 control with the coordinates for Paris

File a bug or feature request for the Chrome DevTools Protocol

To request a WebView2 platform feature, enter a new issue in the WebView2Feedback repo.

To file a bug about the Chrome DevTools Protocol, file a bug report in the Chromium bugs database.

The Chrome DevTools Protocol is maintained by the open source Chromium project, not by the Microsoft Edge WebView2 team.

See also