Débogage à distance des applications Xbox WebView2 WinUI 2 (UWP)

Pour utiliser Microsoft Edge DevTools pour déboguer une application WebView2 WinUI 2 (UWP), utilisez le débogage à distance. Le débogage à distance est nécessaire pour les applications WebView2 WinUI 2 (UWP), car actuellement, les devTools intégrés ne peuvent pas être lancés dans une application WebView2 WinUI 2 (UWP) signée par le Store.

Attacher DevTools à distance à une application Xbox WebView2 WinUI 2 (UWP)

Attachez Microsoft Edge DevTools à distance à une application Xbox WebView2 WinUI 2 (UWP) comme suit :

1. Dans Microsoft Edge, accédez à edge://inspect. La page Inspecter avec les outils de développement Edge s’ouvre :

   

2. Activez le mode développeur sur Xbox. Consultez Activation du mode développeur Xbox One.

3. Dans Microsoft Edge, accédez à https://<System IP>:11443, où <System IP> est remplacé par l’adresse IP de votre système d’exploitation système Xbox. La page Confirmer les paramètres de sécurité s’affiche sous l’onglet Portail d’appareil Windows :

   

4. Cliquez sur le bouton Continuer avec une connexion non sécurisée . Une erreur de certificat SSL s’affiche, NET ::ERR__CERT_AUTHORITY_INVALID :

   

5. Cliquez sur le bouton Avancé. Un message s’affiche : « Le serveur n’a pas pu prouver... » :

   

6. Cliquez sur le lien Continuer vers<System IP>(non sécurisé), où <System IP> est remplacé par l’adresse IP de votre système d’exploitation Xbox. Le portail d’appareil Xbox s’ouvre :

   

7. Accédez à https://<System IP>:11443/config/rootcertificate, où <System IP> est remplacé par l’adresse IP de votre système d’exploitation Xbox. Cette opération télécharge un rootcertificate.cer fichier :

   

8. Ouvrez le fichier téléchargé rootcertificate.cer . Une boîte de dialogue d’avertissement de sécurité s’ouvre :

   

9. Cliquez sur le bouton Ouvrir . Une boîte de dialogue Certificat s’ouvre :

   

10. Cliquez sur le bouton Installer le certificat . Une boîte de dialogue Bienvenue dans l’Assistant Importation de certificat s’ouvre :

    

11. Sélectionnez le bouton d’option Utilisateur actuel , puis cliquez sur le bouton Suivant . L’Assistant Importation de certificat s’ouvre :

    

12. Sélectionnez l’option Placer tous les certificats dans le magasin suivant, cliquez sur le bouton Parcourir , puis sélectionnez Autorités de certification racines de confiance.

13. Cliquez sur le bouton Suivant . Une boîte de dialogue Avertissement de sécurité s’ouvre :

    

14. Cliquez sur le bouton Oui .

15. Redémarrez Microsoft Edge.

16. Accédez à https://<System IP>:11443, où <System IP> est remplacé par l’adresse IP de votre système d’exploitation Xbox, puis vérifiez que la connexion est indiquée comme sécurisée (autrement dit, une URL HTTPS) :

    

17. Dans votre projet d’application, définissez la variable suivante pour configurer votre application WebView2 WinUI 2 (UWP) pour le débogage à distance.

    Pour activer le débogage à distance, une variable d’environnement doit être définie dans votre projet. Cette variable doit être définie avant de créer l’instance CoreWebView2 et avant de définir la WebView2.Source propriété ou d’appeler la WebView2.EnsureCoreWebView2Async méthode .

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

    Par exemple, si vous utilisez l’application WebView2 Sample UWP, vous pouvez définir la variable d’environnement en ajoutant la ligne suivante dans le Browser.xaml.cs fichier :

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

    La ligne est numérotée 33 dans cette capture d’écran, dans le Browser() constructeur, sous un #endif qui encapsule une instruction existante SetEnvironmentVariable :

    

18. Déployez votre application sur votre Xbox à l’aide Xbox Device Portal de et lancez votre application.

19. Accédez à edge://inspect.

20. Dans la zone de texte Se connecter à un appareil Windows distant , entrez https://<System IP>:11443, où <System IP> est remplacé par l’adresse IP de votre système d’exploitation système Xbox, puis cliquez sur le bouton Se connecter à l’appareil .

21. Vérifiez que vous pouvez vous connecter correctement, afin que votre contrôle WebView2 débogué, nommé Edge, soit répertorié sous le nom de votre ordinateur :

    

22. En bas de l’entrée de contrôle Edge WebView2, cliquez sur le lien Inspecter . Microsoft Edge DevTools s’ouvre pour le contrôle WebView2 :

    

Vous pouvez maintenant utiliser Microsoft Edge DevTools pour inspecter et déboguer le contrôle WebView2 dans votre application Xbox WebView2 WinUI 2 (UWP).

Voir aussi

• Débogage à distance des applications WebView2 WinUI 2 (UWP)