Débogage à distance des applications Bureau 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 WebView2 WinUI 2 (UWP) de bureau

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

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

   

2. Activer Developer Mode: ouvrez Paramètres Windows, sélectionnez Confidentialité & sécurité>Pour les développeurs, puis activez le bouton bascule Mode développeur .

3. Dans la même page Paramètres , activez le bouton bascule Portail d’appareil :

   

   Si votre système d’exploitation n’est pas à jour, vous pouvez recevoir un message dans la fenêtre Paramètres : « Le package windows mode développeur est introuvable dans Windows Update, donc le déploiement à distance et le portail d’appareil Windows ne sont pas disponibles. En savoir plus. »

4. Si vous recevez un tel message, mettez à jour votre système d’exploitation vers la dernière version, puis activez le bouton bascule Portail d’appareil.

5. Lorsque vous êtes invité à installer le package windows en mode développeur, cliquez sur Oui :

   

   Une fois l’installation terminée, notez l’URL qui sera utilisée pour la connexion de débogage à distance. Pour trouver cette URL, développez la liste déroulante Portail d’appareil . Dans ce cas, l’URL du portail d’appareil qui sera utilisée est http://localhost:50080:

   

6. Installez Les Outils à distance pour Microsoft Edge à partir du Microsoft Store.

7. Dans Microsoft Edge, accédez à l’URL du portail d’appareil que vous avez notée précédemment. Vérifiez que la page Confirmer les paramètres de sécurité est chargée (sous l’onglet Portail d’appareil Windows ) :

   

8. Si vous déboguez uniquement des applications qui s’exécutent localement, vous pouvez sélectionner le bouton Continuer avec une connexion non sécurisée .

   Ou, si vous n’exécutez pas l’application localement ou si vous devez vous connecter via HTTPS, sélectionnez le lien Configurer une connexion sécurisée , puis suivez les étapes de la page vers laquelle vous êtes redirigé.

9. Vérifiez que vous êtes redirigé vers la page Gestionnaire d’applications : Portail d’appareil Windows :

   

10. Accédez à et vérifiez que les outils à http://<Device Portal URL>/msedge distance pour Microsoft Edge fonctionnent. La page charge une liste vide : [], sauf si une application en cours d’exécution peut être déboguée par les outils à distance.

11. Configurez 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 le CoreWebView2 instance et avant de définir la WebView2.Source propriété ou d’appeler la WebView2.EnsureCoreWebView2Async méthode .

    Définissez la variable suivante :

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

    

12. Lancez votre application.

13. Accédez à http://<Device Portal URL>/msedge, par http://localhost:50080/msedgeexemple , et assurez-vous que votre instance WebView2 s’affiche dans la liste :

    

14. Accédez à edge://inspect. Dans la zone de texte Se connecter à un appareil Windows distant , entrez http://<Device Portal URL>, par http://localhost:50080exemple , puis cliquez sur Se connecter à l’appareil.

15. 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 :

    

16. 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.

Voir aussi

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