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 apprend à :

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

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

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

Notes

Le débogage à distance de l’application Microsoft Edge sur les appareils iOS n’est actuellement pas pris en charge. Le guide suivant se concentre spécifiquement 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 Inspecteur web dans Safari, consultez Safari Web Development Tools.

É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 de développement sur appareil.

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

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

4. Dans la barre d’adresses, 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 être affichée sur DevTools qui 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 s’affiche, 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 des paramètres appropriés 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 votre ordinateur de développement, puis réinsélez votre câble USB. Effectuez la tâche pendant que vos écrans Android et de machine 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 Les appareils DevTools ne détectent 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éconnecter puis reconnecter le câble USB pendant que DevTools se concentre sur votre ordinateur de développement et que votre écran d’accueil Android s’affiche. Parfois, l’invite n’est pas affichée lorsque vos écrans Android ou de machine de développement sont verrouillés.
• Mise à jour des paramètres d’affichage pour votre appareil Android et votre ordinateur de développement afin qu’ils ne soient jamais mis en veille.
• Définition du mode USB pour Android sur PTP. Voir que 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 sur votre appareil Android pour la réinitialiser à un nouvel état.

Si vous trouvez une solution qui n’est pas mentionnée dans 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 s’exécutant sur l’appareil doit être affichée, 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 l’onglet Ouvrir avec zone de texte 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 concentrer, 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.

Notes

L’élément Select é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 pour afficher 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 appuis, en tirent les é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 enfoncée Shift tout en faisant glisser.
• Pour faire défiler l’écran, utilisez votre trackpad ou votre roulette de souris, ou fling avec votre pointeur de souris.

Utilisez les conseils suivants pour vous aider à effectuer une capture d’écran :

• Les captures d’écran affichent uniquement le contenu de la page. Les parties transparentes de la capture d’écran représentent les interfaces d’appareil, telles que la barre d’adresses Microsoft Edge, la barre d’état 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.

Notes

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 (Technical Writer, Chrome DevTools & Lighthouse).

Ce travail est concédé sous une Licence internationale Creative Commons Attribution 4.0.