Déboguer à distance des appareils Windows

Déboguer à distance du contenu en direct sur un appareil Windows 10 ou version ultérieure à partir de votre ordinateur Windows ou macOS.

Ce tutoriel vous apprend les tâches suivantes :

• Configurez votre appareil Windows pour le débogage à distance et connectez-vous à celui-ci à partir de votre machine de développement.

• Inspectez et déboguez le contenu en direct sur votre appareil Windows à partir de votre machine de développement.

• Capture d’écran du contenu de votre appareil Windows vers une instance DevTools de votre machine de développement.

Étape 1 : configurer l’hôte (machine de débogage)

L’hôte ou la machine de débogage est l’appareil Windows 10 ou version ultérieure que vous souhaitez déboguer. Il peut s’agir d’un appareil distant auquel vous avez difficilement accès physiquement ou qui n’a pas de périphériques clavier et souris, ce qui rend difficile l’interaction avec Microsoft Edge DevTools sur cet appareil.

Pour configurer la machine hôte (déboguer), utilisez les sous-sections suivantes, dans l’ordre.

Installer et configurer Microsoft Edge

1. S’il n’est pas déjà installé, sur l’appareil Windows 10 ou version ultérieure que vous souhaitez déboguer, installez Microsoft Edge, à partir de Découvrir Microsoft Edge.

2. Si vous utilisez une version préinstallée de Microsoft Edge sur l’ordinateur hôte (débogué), vérifiez que vous avez bien Microsoft Edge (Chromium) et non Microsoft Edge (EdgeHTML). Une méthode rapide pour vérifier cette case activée consiste à charger edge://settings/help dans le navigateur et à confirmer que le numéro de version est 75 ou supérieur.

3. Dans Microsoft Edge, accédez à edge://flags.

4. Dans Indicateurs de recherche, tapez Activer le débogage à distance via le portail d’appareils Windows. Définissez cet indicateur sur Activé. Cliquez ensuite sur le bouton Redémarrer pour redémarrer Microsoft Edge.

Installer les outils de contrôle à distance pour Microsoft Edge

1. Installez les outils de contrôle à distance de Microsoft Edge à partir du Microsoft Store.

   Pour configurer l’ordinateur hôte (débogué), il doit exécuter Windows 10 version 1903 ou ultérieure. Si vous êtes sur Windows 10 ou version ultérieure 1809 ou antérieure, le bouton Télécharger ou Obtenir de cette page Outils de contrôle à distance pour Microsoft Edge est peut-être désactivé. Mettez à jour la machine hôte (déboguée) pour acquérir les Outils de contrôle à distance pour Microsoft Edge.

   

2. Lancez les outils de contrôle à distance pour Microsoft Edge et, si vous y êtes invité, acceptez la boîte de dialogue d’autorisations dans l’application.

3. Fermez les Outils de contrôle à distance pour Microsoft Edge. Vous n’avez pas besoin de l’ouvrir pour de futures sessions de débogage à distance.

Activer le mode développeur et activer le portail d’appareil

1. Activer le mode développeur ; reportez-vous à la section Activer votre appareil pour le développement.

2. Activer le portail d’appareils ; voir Vue d’ensemble du portail d’appareil Windows.

3. Si vous utilisez un réseau Wi-Fi, assurez-vous que le réseau est marqué comme Domaine ou Privé. Vous pouvez vérifier l’état en ouvrant l’application Sécurité Windows, en sélectionnant Pare-feu & protection réseau et en vérifiant si votre réseau est répertorié comme un réseau de domaine ou un réseau privé.

4. Si votre réseau est répertorié comme public, accédez à Paramètres>Réseau &>Internet Wi-Fi, cliquez sur votre réseau et basculez le bouton de profil réseau sur Privé.

5. Ouvrez l’application Paramètres . Dans Rechercher un paramètre, saisissez-le Developer settings et sélectionnez-le. Basculez sur le mode développeur. Vous pouvez maintenant activer le Portail d’appareil en définissant Activer les diagnostics à distance sur les connexions réseau local sur Activé. Vous pouvez ensuite éventuellement activer l’authentification afin que le périphérique client (débogueur) fournisse les informations d’identification correctes pour se connecter à ce périphérique.

6. Si vous activez les diagnostics à distance via des connexions réseau locales. a été activée précédemment, vous devez la désactiver puis la réactiver pour que le Portail d’appareil fonctionne avec les Outils de contrôle à distance pour Microsoft Edge.

   Si une section Pour les développeurs n’est pas affichée dans Paramètres, le Portail d’appareil est peut-être déjà activé. Essayez donc de redémarrer l’appareil Windows 10 ou version ultérieure à la place.

   

7. Notez l’adresse IP et le port de connexion de l’ordinateur qui sont affichés sous Se connecter à l’aide de : L’adresse IP dans l’image ci-dessous est 192.168.86.78 et le port de connexion est 50080:

   

   Vous entrez les informations sur le périphérique client (débogueur) dans la section suivante, « Étape 2 : Configurer le client (machine de débogage) ».

8. Ouvrir des onglets dans Microsoft Edge et Progressive Web Apps (PWA) sur l’ordinateur hôte (débogueur) que vous souhaitez déboguer de l’ordinateur client (débogueur).

Étape 2 : Configurer le client (machine du débogueur)

Le client ou le débogueur est l’appareil à partir duquel vous voulez déboguer. Cet appareil peut être votre machine de développement quotidienne, ou simplement votre PC ou MacBook lorsque vous travaillez à domicile.

1. Pour configurer l’ordinateur client (débogueur), installez Microsoft Edge à partir de Se familiariser avec Microsoft Edge si vous ne l’avez pas déjà fait.

2. Si vous utilisez une version préinstallée de Microsoft Edge sur l’ordinateur hôte (débogué), vérifiez que vous avez bien Microsoft Edge (Chromium) et non Microsoft Edge (EdgeHTML). Une méthode rapide pour vérifier cette case activée consiste à charger edge://settings/help dans le navigateur et à confirmer que le numéro de version est 75 ou supérieur.

3. Accédez à la edge://inspect page dans Microsoft Edge. Par défaut, vous devez être dans la section Appareils .

4. Sous Se connecter à un appareil Windows distant, entrez l’adresse IP et le port de connexion de l’ordinateur hôte (débogué) dans la zone de texte en suivant ce modèle : http://IP address :connection port.

5. Cliquez sur Connexion à l’appareil.

   

6. Si vous configurez l’authentification pour l’ordinateur hôte (débogueur), vous êtes invité à entrer le nom d’utilisateur et le mot de passe de l’ordinateur client (débogueur) pour que la connexion réussisse.

Utilisation de https au lieu de http

Si vous souhaitez vous connecter à la machine hôte (déboguer) en utilisant https au lieu de http:

1. Accédez à http://IP address:50080/config/rootcertificate dans Microsoft Edge sur la machine cliente (débogueur). Cela télécharge automatiquement un certificat de sécurité nommé rootcertificate.cer.

2. Sélectionnez rootcertificate.cer. Cela ouvre l’outil Gestionnaire de certificats Windows.

3. Cliquez sur Installer le certificat..., vérifiez que l’utilisateur actuel est activé, puis cliquez sur Suivant.

4. Cliquez sur Placer tous les certificats dans le magasin suivant , puis sur Parcourir....

5. Sélectionnez le magasin des autorités de certification racines de confiance , puis cliquez sur OK.

6. Cliquez sur Suivant, puis sur Terminer.

7. Si vous y êtes invité, confirmez que vous souhaitez installer ce certificat dans le magasin des autorités de certification racines de confiance .

8. Maintenant, lors de la connexion à l’ordinateur hôte (débogueur) à partir de l’ordinateur client (débogueur) à l’aide de la edge://inspect page, vous devez utiliser une valeur différente connection port . Par défaut, pour les ordinateurs de bureau, le Portail d’appareil connection port utilise 50080 comme for http. Pour https, utilisé par le Portail 50043 d’appareil, suivez donc ce modèle : https://IP address :50043 sur la edge://inspect page.

Pour afficher les ports par défaut utilisés par le portail d’appareils, consultez le tableau figurant dans Installation dans la vue d’ensemble du portail d’appareil Windows.

Ports par défaut

Le port par défaut pour http est 50080 et le port par défaut pour https est 50043, mais ce n’est pas toujours le cas, car Device Portal sur le bureau revendique des ports dans la plage éphémère (>50 000) pour éviter les collisions avec les revendications de port existantes sur l’appareil.

Pour afficher les ports par défaut utilisés par le portail d’appareils, consultez le tableau figurant dans Installation dans la vue d’ensemble du portail d’appareil Windows.

Pour plus d’informations sur les paramètres des ports, consultez Portail d’appareil Windows pour bureau.

Voir aussi :

• Configuration basée sur le Registre dans Windows Device Portal for Desktop.

Étape 3 : Déboguer le contenu de l’hôte à partir du client

Si l’ordinateur client (débogueur) se connecte avec succès à l’ordinateur hôte (débogué), la edge://inspect page du client affiche maintenant la liste des onglets dans Microsoft Edge et tous les PWA ouverts sur l’hôte.

Déterminez le contenu que vous souhaitez déboguer, puis cliquez sur inspecter. Microsoft Edge DevTools s’ouvre dans un nouvel onglet et affiche le contenu de l’ordinateur hôte (débogueur) vers l’ordinateur client (débogueur). Vous pouvez désormais utiliser toute la puissance de Microsoft Edge DevTools sur le client pour le contenu exécuté sur l’hôte.

Voir aussi :

• Documentation de Microsoft Edge DevTools

Inspecter les éléments

Par exemple, essayez d’inspecter un élément. Accédez à l’outil Éléments de votre instance DevTools sur le client, puis placez le curseur sur un élément pour le mettre en surbrillance dans la fenêtre d’affichage de l’appareil hôte.

Vous pouvez également appuyer sur un élément sur l’écran de votre appareil hôte pour le sélectionner dans l’outil Éléments . Sélectionnez Sélectionner un élément sur votre instance DevTools sur le client, puis appuyez sur l’élément sur l’écran de votre appareil hôte.

Select Element est désactivé après la première interaction tactile. Vous devez donc le réactiver chaque fois que vous souhaitez utiliser cette fonctionnalité.

Importante

Le volet Détecteurs d’événements de l’outil Éléments est vide sous Windows 10 version 1903. Il s’agit d’un problème connu et l’équipe prévoit de corriger le volet Détecteurs d’événements dans une mise à jour de maintenance vers Windows 10 version 1903.

Étape 4 : Effectuez une capture d’écran de votre écran hôte sur votre appareil client

Par défaut, la diffusion d’écran est activée sur l’instance DevTools du client, ce qui vous permet d’afficher le contenu de l’appareil hôte dans votre instance DevTools sur votre appareil client. Cliquez sur Basculer la capture d’écran pour activer ou désactiver cette fonctionnalité.

Vous pouvez interagir avec la capture d’écran de plusieurs façons :

• Les clics sont traduits en taps, déclenchant des événements tactiles appropriés sur l’appareil.
• Les touches de votre ordinateur sont envoyées à l’appareil.
• Pour simuler un mouvement de pincement, maintenez la touche Maj enfoncée tout en faisant glisser le souris.
• Pour faire défiler la page, utilisez le trackpad ou la molette de la souris, ou utilisez le pointeur de votre souris.

Remarques sur les captures d’écran :

• Les captures d’écran n’affichent que le contenu de la page. Les parties transparentes de la capture d’écran représentent les interfaces de l’appareil, telles que la barre d’adresse Microsoft Edge, la barre des tâches de Windows 10 ou version ultérieure et le clavier Windows 10 ou version ultérieure.

• Les captures d’écran ont un impact négatif sur les fréquences d’images. Désactivez le screencasting lors de la mesure des défilements ou des animations pour obtenir une image plus précise des performances de votre page.

• Si l’écran de votre appareil hôte se bloque, le contenu de votre capture d’écran disparaît. Déverrouillez l’écran de votre appareil hôte pour reprendre automatiquement la capture d’écran.