Déboguer à distance des appareils Android

Déboguer à distance du contenu en direct sur un appareil Android à partir de votre ordinateur Windows ou macOS. La page de didacticiel suivante vous explique comment :

• Configurez votre appareil Android pour le débogage à distance et découvrez-le à partir de votre ordinateur de développement.

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

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

Remarque

Le débogage à distance de l’application Microsoft Edge sur les appareils iOS n’est actuellement pas pris en charge. Le guide suivant est spécifiquement axé sur le débogage à distance de Microsoft Edge sur les appareils Android. Si vous disposez d’un appareil macOS, suivez le Guide de débogage Brightcove pour déboguer à distance Microsoft Edge sur un appareil iOS à l’aide de Safari. Pour plus d’informations sur l’outil Web Inspector dans Safari, consultez Outils de développement web Safari.

Étape 1 : Découvrir votre appareil Android

Le flux de travail ci-dessous fonctionne pour la plupart des utilisateurs. Pour plus d’aide, consultez Résolution des problèmes : DevTools ne détecte pas l’appareil Android ci-dessous.

1. Ouvrez l’écran Options du développeur sur votre Android. Consultez Configurer les options du développeur sur l’appareil.

2. Sélectionnez Activer le débogage USB.

3. Sur votre ordinateur de développement, ouvrez Microsoft Edge.

4. Dans la barre Adresse, accédez à edge://inspect.

   

5. Connectez votre appareil Android directement à votre machine de développement à l’aide d’un câble USB. La première fois que vous essayez de vous connecter, une invite doit s’afficher pour indiquer que DevTools détecte un appareil inconnu. Acceptez l’invite d’autorisation Autoriser le débogage USB sur votre appareil Android.

   

6. Si le nom du modèle de votre appareil Android est affiché, Microsoft Edge a correctement établi la connexion à votre appareil. Passez à la section Étape 2 .

Résolution des problèmes : DevTools ne détecte pas l’appareil Android

Utilisez les conseils suivants pour vous aider à résoudre les problèmes de paramètres corrects pour votre matériel.

• Si vous utilisez un hub USB, essayez de connecter votre appareil Android directement à votre ordinateur de développement.
• Essayez de débrancher le câble USB entre votre appareil Android et l’ordinateur de développement, puis rebranchez votre câble USB. Effectuez la tâche pendant que les écrans de votre appareil Android et de votre ordinateur de développement sont déverrouillés.
• Assurez-vous que votre câble USB fonctionne. Vous devez être en mesure d’inspecter les fichiers sur votre appareil Android à partir de votre ordinateur de développement.

Utilisez les conseils suivants pour vérifier que votre logiciel est correctement configuré.

• Si votre ordinateur de développement exécute Windows, essayez d’installer manuellement les pilotes USB pour votre appareil Android. Pour plus d’informations, consultez Installer des pilotes USB OEM.
• Certaines combinaisons d’appareils Windows et Android (en particulier Samsung) nécessitent des paramètres supplémentaires. Pour plus d’informations, consultez DevTools Devices ne détecte pas l’appareil lorsqu’il est branché.

Si l’invite Autoriser le débogage USB n’est pas affichée sur votre appareil Android, essayez :

• Déconnectez, puis reconnectez le câble USB pendant que DevTools est en cours de développement et que votre écran d’accueil Android s’affiche. Parfois, l’invite ne s’affiche pas lorsque les écrans de votre appareil Android ou de votre ordinateur de développement sont verrouillés.
• Mise à jour des paramètres d’affichage de votre appareil Android et de votre ordinateur de développement afin qu’ils ne soient jamais mis en veille.
• Définition du mode USB pour Android sur PTP. Voir Galaxy S4 n’affiche pas la boîte de dialogue Autoriser le débogage USB.
• Sélectionnez Révoquer les autorisations de débogage USB à partir de l’écran Options du développeur de votre appareil Android pour le rétablir.

Si vous trouvez une solution qui n’est pas mentionnée sur cette page ou dans DevTools Devices ne détecte pas l’appareil lorsqu’il est branché sur Stack Overflow, ajoutez votre solution à cette question Stack Overflow.

Étape 2 : Déboguer du contenu sur votre appareil Android à partir de votre ordinateur de développement

1. Ouvrez Microsoft Edge sur votre appareil Android.

2. Accédez à edge://inspect. Le nom du modèle de votre appareil Android s’affiche, suivi du numéro de série de l’appareil. En dessous, la version de Microsoft Edge exécutée sur l’appareil doit s’afficher, avec le numéro de version entre parenthèses. Chaque onglet Microsoft Edge ouvert obtient une section unique. Vous pouvez interagir avec cet onglet à partir d’une section.

1. Dans la zone de texte Ouvrir l’onglet avec url , entrez une URL, puis cliquez sur Ouvrir. La page s’ouvre dans un nouvel onglet sur votre appareil Android.

2. Cliquez sur Inspecter en regard de l’URL que vous venez d’ouvrir. Une nouvelle instance DevTools s’ouvre.

Autres actions : focus, actualisation ou fermeture d’un onglet

Sélectionnez l’onglet Focus, rechargez ou fermez à côté de l’onglet que vous souhaitez mettre au point, actualiser ou fermer.

Inspecter les éléments

Accédez à l’outil Éléments de votre instance DevTools, puis pointez sur un élément pour le mettre en surbrillance dans la fenêtre d’affichage de votre appareil Android.

Vous pouvez également appuyer sur un élément sur l’écran de votre appareil Android pour le sélectionner dans l’outil Éléments . Cliquez sur l’icône Sélectionner un élément () dans votre instance DevTools, puis sélectionnez l’élément sur l’écran de votre appareil Android.

Select Element étant désactivé après la première sélection, vous devez le réactiver chaque fois que vous souhaitez utiliser cette fonctionnalité.

Capture d’écran de votre écran Android sur votre ordinateur de développement

Cliquez sur l’icône Activer/désactiver la capture d’écran le contenu de votre appareil Android dans votre instance DevTools.

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.

Utilisez les conseils suivants pour vous aider à la capture 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 d’status Android ou le clavier Android.
• 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 Android se verrouille, le contenu de votre capture d’écran disparaît. Déverrouillez l’écran de votre appareil Android pour reprendre automatiquement la capture d’écran.

Remarque

Certaines parties de cette page sont des modifications fondées sur le travail créé et partagé par Google et utilisées conformément aux conditions décrites dans la licence internationale 4,0 d’attribution créative. La page d’origine se trouve ici et est créée par Kayce Basques (Rédacteur technique, Chrome DevTools & Lighthouse).

Cette œuvre est concédée sous licence creative commons attribution 4.0 international.