Use the Chrome DevTools Protocol in WebView2

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

Note

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

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. You may follow a similar pattern to use other Chrome DevTools Protocol features.

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. Copy and paste the following code snippet 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 the geolocation.html file.

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

    Display the geolocation coordinates of the user 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. Ensure the geolocation.html file displays in your WebView2 control app.

    Display the geolocater.html file in your WebView2 control app

Step 3: Install the DevToolsProtocolHelper NuGet package

Use NuGet to download Microsoft.Web.WebView2.DevToolsProtocolExtension. To install the package, complete the following actions.

  1. Choose Project > Manage NuGet Packages > Browse.
  2. Type Microsoft.Web.WebView2.DevToolsProtocolExtension and choose Microsoft.Web.WebView2.DevToolsProtocolExtension > Install.

Ensure Microsoft.Web.WebView2.DevToolsProtocolExtension displays 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. For more information, navigate to 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);
    
    }
    
  4. Run your app.

  5. To display the coordinates of Paris, France, choose 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