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 ordinateur de développement.

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

• Capture d’écran du contenu de votre appareil Windows sur un instance DevTools sur votre ordinateur de développement.

Étape 1 : Configurer l’hôte (machine déboguée)

L’ordinateur hôte ou débogué est l’appareil Windows 10 ou ultérieur que vous souhaitez déboguer. Il peut s’agir d’un appareil distant qui est difficile d’accès physique pour vous ou il peut ne pas avoir de périphériques clavier et souris, ce qui rend difficile l’interaction avec Microsoft Edge DevTools sur cet appareil.

Pour configurer l’ordinateur hôte (débogué), 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 Get to Know 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 disposez de Microsoft Edge (Chromium) et non de Microsoft Edge (EdgeHTML). Un moyen rapide de 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 à edge://flags dans Microsoft Edge.

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

Installer les outils à distance pour Microsoft Edge

1. Installez les Outils à distance pour 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 utilisez Windows 10 ou version ultérieure 1809 ou antérieure, le bouton Télécharger ou Obtenir dans cette page Outils à distance pour Microsoft Edge peut être désactivé. Mettez à jour l’ordinateur hôte (débogué) pour acquérir les outils à distance pour Microsoft Edge.

   

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

3. Fermez Outils à distance pour Microsoft Edge. Vous n’avez pas besoin de l’avoir ouvert pour les futures sessions de débogage à distance.

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

1. Activer le mode développeur ; consultez Activer votre appareil pour le développement.

2. Activer Device Portal ; Consultez Vue d’ensemble du portail d’appareil Windows.

3. Si vous êtes sur 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é en tant que réseau de domaine ou 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 Profil réseau sur Privé.

5. Ouvrez l’application Paramètres . Dans Rechercher un paramètre, entrez Developer settings et sélectionnez-le. Activer le mode développeur. Vous pouvez maintenant activer le portail d’appareil en définissant Activer l’diagnostics à distance sur les connexions réseau locales sur Activé. Vous pouvez ensuite éventuellement activer l’authentification afin que l’appareil client (débogueur) fournisse les informations d’identification appropriées pour se connecter à cet appareil.

6. Si l’option Activer l’diagnostics à distance sur les connexions réseau locales a été précédemment activée, vous devez la désactiver et la réactiver pour que Le portail d’appareil fonctionne avec les Outils à distance pour Microsoft Edge.

   Si aucune section Pour les développeurs n’est 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 de l’ordinateur et le port de connexion 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 l’appareil client (débogueur) dans la section suivante, « Étape 2 : Configurer le client (ordinateur du débogueur) ».

8. Ouvrez les onglets dans Microsoft Edge et progressive Web Apps (PWA) sur l’ordinateur hôte (débogueur) que vous souhaitez déboguer à partir de l’ordinateur client (débogueur).

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

Le client ou l’ordinateur du débogueur est l’appareil à partir duquel vous souhaitez déboguer. Cet appareil peut être votre ordinateur de développement quotidien, ou il peut s’agir simplement de votre PC ou MacBook lorsque vous travaillez à domicile.

1. Pour configurer l’ordinateur client (débogueur), installez Microsoft Edge à partir de cette page 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 disposez de Microsoft Edge (Chromium) et non de Microsoft Edge (EdgeHTML). Un moyen rapide de 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 Se connecter à l’appareil.

   

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

Utilisation de https au lieu de http

Si vous souhaitez vous connecter à l’ordinateur hôte (débogué) en utilisant https au lieu de http:

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

2. Sélectionnez rootcertificate.cer. L’outil Gestionnaire de certificats Windows s’ouvre.

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 cliquez sur Parcourir....

5. Sélectionnez le magasin Autorités de certification racines approuvées , puis cliquez sur OK.

6. Cliquez sur Suivant, puis sur Terminer.

7. Si vous y êtes invité, vérifiez que vous souhaitez installer ce certificat dans le magasin Autorités de certification racines de confiance .

8. Maintenant, lorsque vous vous connectez à 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 windows de bureau, le portail d’appareil utilise 50080 comme connection port pour http. Pour https, le portail d’appareil utilise 50043 donc suivez le modèle suivant : https://IP address :50043 sur la edge://inspect page.

Pour voir les ports par défaut utilisés par Device Portal, consultez le tableau dans Vue d’ensemble de l’installation dans le 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 les ports de revendications de bureau dans la plage éphémère (>50 000) pour éviter les collisions avec les revendications de port existantes sur l’appareil.

Pour voir les ports par défaut utilisés par Device Portal, consultez le tableau dans Vue d’ensemble de l’installation dans le portail d’appareil Windows.

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

Voir aussi :

• Configuration basée sur le Registre dans le portail d’appareil Windows pour bureau.

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

Si l’ordinateur client (débogueur) se connecte correctement à l’ordinateur hôte (débogué), la edge://inspect page du client affiche désormais une liste des onglets dans Microsoft Edge et des 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 capture le contenu de l’ordinateur hôte (débogueur) vers l’ordinateur client (débogueur). Vous pouvez maintenant utiliser toute la puissance de Microsoft Edge DevTools sur le client pour le contenu s’exécutant sur l’hôte.

Voir aussi :

• Documentation 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 pointez 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 l’activer à nouveau chaque fois que vous souhaitez utiliser cette fonctionnalité.

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

Par défaut, la capture d’écran est activée sur les instance DevTools sur le client, ce qui vous permet d’afficher le contenu sur l’appareil hôte dans votre instance DevTools sur votre appareil client. Cliquez sur Activer ou désactiver 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 clics, ce qui déclenche des événements tactiles appropriés sur l’appareil.
• Les séquences de touches sur votre ordinateur sont envoyées à l’appareil.
• Pour simuler un mouvement de pincement, maintenez la touche Maj enfoncée tout en faisant glisser.
• Pour faire défiler, utilisez votre pavé tactile ou votre roulette de souris, ou utilisez le pointeur de votre souris.

Remarques sur les captures d’écran :

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

• Les captures d’écran affectent négativement les fréquences d’images. Désactivez la capture d’écran 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 verrouille, 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.