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ébogueur) :

1. Installer et configurer Microsoft Edge

2. Installer les Outils à distance pour Microsoft Edge (bêta) à partir du Microsoft Store

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

Installer et configurer Microsoft Edge

1. Si vous ne l’avez pas déjà fait, sur l’appareil Windows 10 ou version ultérieure que vous souhaitez déboguer, installez Microsoft Edge à partir de cette page.

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 (bêta)

Installez les Outils à distance pour Microsoft Edge (bêta) à partir du Microsoft Store.

Le bouton Obtenir des Outils à distance pour Microsoft Edge (bêta) peut être désactivé si vous utilisez Windows 10 ou une version ultérieure 1809 ou antérieure. Pour configurer l’ordinateur hôte (débogué), il doit exécuter Windows 10 version 1903 ou ultérieure. Mettez à jour l’ordinateur hôte (débogué) pour acquérir les Outils à distance pour Microsoft Edge (bêta) .

Lancez les Outils à distance pour Microsoft Edge (bêta) et, si vous y êtes invité, acceptez la boîte de dialogue d’autorisations dans l’application. Vous pouvez maintenant fermer les Outils à distance pour Microsoft Edge (bêta) et vous n’avez pas besoin de l’ouvrir pour les futures sessions de débogage à distance.

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

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

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

À présent, 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.

Si l’option Activer les 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 Device Portal fonctionne avec les Outils à distance pour Microsoft Edge (bêta). 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.

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. 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. En savoir plus sur les ports par défaut utilisés par Device Portal.

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 plus d’informations, consultez la section Paramètres de port pour Portail d’appareil sur le bureau Windows.

É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 diffuse le contenu de l’ordinateur hôte (débogueur) sur 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. Pour en savoir plus sur l’utilisation des DevTools Microsoft Edge , cliquez ici.

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

Importante

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

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

Problèmes connus

• Le volet Écouteurs d’événements de l’outil Éléments est vide sur Windows 10 version 1903. L’équipe prévoit de corriger le volet Écouteurs d’événements dans une mise à jour de maintenance de Windows 10 version 1903.

• Le volet Cookies du volet Application est vide sur Windows 10 version 1903. L’équipe prévoit de corriger le volet Cookies dans une mise à jour de service vers Windows 10 version 1903.

• L’outil Audits , l’outil Vue 3D , la section Appareils émulés dans Paramètres et le volet Arborescence d’accessibilité de l’outil Éléments ne fonctionnent pas actuellement comme prévu.

• L’Explorateur de fichiers ne démarre pas à partir de DevTools dans l’outil Sources ou dans le panneau Sécurité lorsque vous déboguez à distance.