Remote debugging Xbox 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 an Xbox WebView2 WinUI 2 (UWP) app

Attach Microsoft Edge DevTools remotely to an Xbox 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 on Xbox. See Xbox One Developer Mode activation.

3. In Microsoft Edge, go to https://<System IP>:11443, where <System IP> is replaced by your Xbox System OS IP. The Confirm security settings page is displayed, in the Windows Device Portal tab:

   

4. Click the Continue with an unsecured connection button. An SSL cert error appears, NET::ERR__CERT_AUTHORITY_INVALID:

   

5. Click the Advanced button. A message is displayed, "The server couldn't prove ...":

   

6. Click the Continue to <System IP> (unsafe) link, where <System IP> is replaced by your Xbox System OS IP. Xbox Device Portal opens:

   

7. Go to https://<System IP>:11443/config/rootcertificate, where <System IP> is replaced by your Xbox System OS IP. This downloads a rootcertificate.cer file:

   

8. Open the downloaded rootcertificate.cer file. A security warning dialog box opens:

   

9. Click the Open button. A Certificate dialog opens:

   

10. Click the Install Certificate button. A Welcome to the Certificate Import Wizard dialog opens:

    

11. Select the Current User option button, and then click the Next button. The Certificate Import Wizard opens:

    

12. Select the option Place all certificates in the following store, click the Browse button, and then select Trusted Root Certification Authorities.

13. Click the Next button. A Security Warning dialog opens:

    

14. Click the Yes button.

15. Restart Microsoft Edge.

16. Go to https://<System IP>:11443, where <System IP> is replaced by your Xbox System OS IP, and verify that the connection is indicated as secure (that is, an HTTPS URL):

    

17. In your app project, set the following variable, to 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.

    "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:

    

18. Deploy your app to your Xbox using Xbox Device Portal and launch your app.

19. Go to edge://inspect.

20. In the Connect to a remote Windows device text box, enter https://<System IP>:11443, where <System IP> is replaced by your Xbox System OS IP, and then click the Connect to Device button.

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

    

22. 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 in your Xbox WebView2 WinUI 2 (UWP) app.

See also

• Remote debugging WebView2 WinUI 2 (UWP) apps