Remote debugging desktop WebView2 WinUI 2 (UWP) apps

To use Microsoft Edge DevTools to debug a WebView2 WinUI 2 (UWP) app, use remote debugging. Remote debugging is necessary for WebView2 WinUI 2 (UWP) apps because currently, the built-in DevTools can't be launched inside a store-signed WebView2 WinUI 2 (UWP) app.

Attach DevTools remotely to a desktop WebView2 WinUI 2 (UWP) app

Attach Microsoft Edge DevTools remotely to a desktop WebView2 WinUI 2 (UWP) app as follows:

1. In Microsoft Edge, go to edge://inspect. The Inspect with Edge Developer Tools page opens:

   

2. Enable Developer Mode: Open Windows Settings, select Privacy & security > For developers, and then turn on the Developer Mode toggle.

3. In the same Settings page, turn on the Device Portal toggle:

   

   If your operating system isn't up-to-date, you might get a message in the Settings window: "The Windows Developer Mode package couldn't be found in Windows Update, so remote deployment and Windows Device Portal are unavailable. Learn more."

4. If you get such a message, update your operating system (OS) to the latest version, and then turn on the Device Portal toggle.

5. When prompted to Install Windows Developer Mode package, click Yes:

   

   After the installation is complete, note the URL that will be used for the remote debugging connection. To find this URL, expand the Device Portal dropdown list. In this case, the Device Portal URL that will be used is http://localhost:50080:

   

6. Install Remote Tools for Microsoft Edge from the Microsoft Store.

7. In Microsoft Edge, go to the Device Portal URL that you previously noted. Verify that the Confirm security settings page is loaded (in the Windows Device Portal tab):

   

8. If you are only debugging apps that are running locally, you can select the Continue with an unsecured connection button.

   Or, if you aren't running the app locally, or if you need to connect over HTTPS, select the Configure a secure connection link, and then follow the steps in the page that you're redirected to.

9. Verify that you're redirected to the Apps manager: Windows Device Portal page:

   

10. Go to http://<Device Portal URL>/msedge and verify Remote Tools for Microsoft Edge are functioning. The page loads an empty list: [], unless there's an application running that is debuggable by remote tools.

11. Configure your WebView2 WinUI 2 (UWP) app for remote debugging:

    To enable remote debugging, an environment variable must be set in your project. This variable must be set before creating the CoreWebView2 instance, and before either setting the WebView2.Source property or calling the WebView2.EnsureCoreWebView2Async method.

    Set the following variable:

    "WEBVIEW2_ADDITIONAL_BROWSER_ARGUMENTS", "--enable-features=msEdgeDevToolsWdpRemoteDebugging"
    

    For example, if you're using the WebView2 Sample UWP app, you can set the environment variable by adding the following line in the Browser.xaml.cs file:

    Environment.SetEnvironmentVariable("WEBVIEW2_ADDITIONAL_BROWSER_ARGUMENTS", "--enable-features=msEdgeDevToolsWdpRemoteDebugging");
    

    The line is numbered 33 in this screenshot, in the Browser() constructor, below an #endif that wraps an existing SetEnvironmentVariable statement:

    

12. Launch your app.

13. Go to http://<Device Portal URL>/msedge, such as http://localhost:50080/msedge, and make sure your WebView2 instance appears in the list:

    

14. Go to edge://inspect. In the Connect to a remote Windows device text box, enter http://<Device Portal URL>, such as http://localhost:50080, and then click Connect to Device.

15. Verify that you can successfully connect, so that your debuggable WebView2 control, named Edge, is listed under your machine name:

    

16. At the bottom of the Edge WebView2 control entry, click the inspect link. Microsoft Edge DevTools opens for the WebView2 control:

    

Now you can use Microsoft Edge DevTools to inspect and debug the WebView2 control.

See also

• Remote debugging WebView2 WinUI 2 (UWP) apps