Déboguer à distance les appareils Android

Kayce Basques

Sofia Emelianova

Déboguez à distance du contenu en direct sur un appareil Android depuis votre ordinateur Windows, Mac ou Linux. Ce tutoriel vous apprend à :

• Configurez votre appareil Android pour le débogage à distance et découvrez-le depuis votre ordinateur de développement.
• Inspectez et déboguez le contenu en direct sur votre appareil Android depuis votre ordinateur de développement.
• Castez le contenu de l'écran de votre appareil Android sur une instance DevTools de votre ordinateur de développement.

Étape 1 : Découvrez votre appareil Android

Le workflow ci-dessous fonctionne pour la plupart des utilisateurs. Pour obtenir de l'aide, consultez Dépannage : les outils de développement ne détectent pas l'appareil Android.

1. Ouvrez l'écran Options pour les développeurs sur votre appareil Android. Consultez Configurer les options pour les développeurs sur l'appareil.
2. Sélectionnez Activer le débogage USB.
3. Sur votre machine de développement, ouvrez Chrome.
4. Accédez à chrome://inspect#devices.

5. Assurez-vous que l'option Découvrir les périphériques USB est activée dans .

   

6. Connectez votre appareil Android directement à votre ordinateur de développement à l'aide d'un câble USB.

7. Si vous connectez votre appareil pour la première fois, il s'affiche comme "Hors connexion" et en attente d'authentification.

   

   Dans ce cas, acceptez l'invite de session de débogage sur l'écran de votre appareil.

8. Si le nom du modèle de votre appareil Android s'affiche, cela signifie que les outils de développement ont réussi à établir la connexion à votre appareil.

   

9. Passez à l'étape 2.

Dépannage : les outils de développement ne détectent pas l'appareil Android

Assurez-vous que votre matériel est correctement configuré :

• 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 de le rebrancher. Faites-le lorsque 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 devriez pouvoir inspecter les fichiers sur votre appareil Android depuis votre ordinateur de développement.

Assurez-vous 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. Consultez Installer des pilotes USB OEM.
• Certaines combinaisons d'appareils Windows et Android (en particulier Samsung) nécessitent une configuration supplémentaire. Consultez Chrome DevTools Devices does not detect device when plugged in (Les outils pour les développeurs Chrome ne détectent pas l'appareil lorsqu'il est branché).

Si l'invite Autoriser le débogage USB ne s'affiche pas sur votre appareil Android, essayez ce qui suit :

• Débranchez, puis rebranchez le câble USB lorsque les outils de développement sont au premier plan sur votre ordinateur de développement et que l'écran d'accueil Android est affiché. En d'autres termes, il arrive que l'invite ne s'affiche pas lorsque les écrans de votre appareil Android ou de votre ordinateur de développement sont verrouillés.
• Mettez à jour les paramètres d'affichage de votre appareil Android et de votre ordinateur de développement pour qu'ils ne se mettent jamais en veille.
• Définissez le mode USB d'Android sur PTP. Consultez La boîte de dialogue "Autoriser le débogage USB" ne s'affiche pas sur le Galaxy S4.
• Sélectionnez Annuler autorisations pour débog. USB sur l'écran Options pour les développeurs de votre appareil Android pour le réinitialiser.

Si vous trouvez une solution qui n'est pas mentionnée dans cette section ni dans Les outils pour les développeurs Chrome ne détectent pas l'appareil lorsqu'il est branché, veuillez ajouter une réponse à cette question Stack Overflow ou ouvrir un problème dans le dépôt developer.chrome.com.

Étape 2 : Déboguez du contenu sur votre appareil Android depuis votre ordinateur de développement

1. Ouvrez Chrome sur votre appareil Android.

2. Dans chrome://inspect/#devices sur votre ordinateur de développement, vous voyez le nom du modèle de votre appareil Android, suivi de son numéro de série. En dessous, vous pouvez voir la version de Chrome exécutée sur l'appareil, avec le numéro de version entre parenthèses.

   

3. Dans la zone de texte Ouvrir l'onglet avec l'URL, saisissez une URL, puis cliquez sur Ouvrir. La page s'ouvre dans un nouvel onglet sur votre appareil Android.

   

   Chaque onglet Chrome à distance dispose de sa propre section dans chrome://inspect/#devices. Vous pouvez interagir avec cet onglet depuis cette section. Si des applications utilisent WebView, une section s'affiche également pour chacune d'elles. Dans cet exemple, un seul onglet est ouvert.

4. Cliquez sur Inspecter à côté de l'URL que vous venez d'ouvrir. Une nouvelle instance des outils de développement s'ouvre.

La version de Chrome exécutée sur votre appareil Android détermine la version des outils de développement qui s'ouvre sur votre ordinateur de développement. Par conséquent, si votre appareil Android exécute une version très ancienne de Chrome, l'instance d'outils de développement peut être très différente de celle à laquelle vous êtes habitué.

Autres actions : mettre en veille, se concentrer, actualiser ou fermer un onglet

Sous l'URL, vous trouverez un menu permettant de suspendre, de mettre au premier plan, de recharger ou de fermer un onglet.

Inspecter les éléments

Accédez au panneau É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 de l'écran de votre appareil Android pour le sélectionner dans le panneau Éléments. Cliquez sur Sélectionner un élément dans votre instance DevTools, puis appuyez sur l'élément sur l'écran de votre appareil Android. Notez que l'option Sélectionner un élément est désactivée après la première pression. Vous devez donc la réactiver chaque fois que vous souhaitez utiliser cette fonctionnalité.

Enregistrer l'écran de votre appareil Android sur votre ordinateur de développement

Cliquez sur Toggle Screencast pour afficher le contenu de votre appareil Android dans votre instance DevTools.

Vous pouvez interagir avec la vidéo de plusieurs manières :

• Les clics sont traduits en appuyez, ce qui déclenche les événements tactiles appropriés sur l'appareil.
• Les frappes au clavier sur votre ordinateur sont envoyées à l'appareil.
• Pour simuler un geste de pincement, maintenez la touche Maj enfoncée pendant que vous faites glisser le curseur.
• Pour faire défiler l'écran, utilisez votre pavé tactile ou la molette de votre souris, ou faites glisser le pointeur de la souris.

Voici quelques remarques sur les screencasts :

• Les enregistrements d'écran n'affichent que le contenu des pages. Les parties transparentes de la vidéo représentent les interfaces de l'appareil, telles que la barre d'adresse Chrome, la barre d'état Android ou le clavier Android.
• Les screencasts ont un impact négatif sur la fréquence d'images. Désactivez le screencasting lorsque vous mesurez les défilements ou les 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 screencast disparaît. Déverrouillez l'écran de votre appareil Android pour reprendre automatiquement la diffusion de l'écran.

Déboguer manuellement via Android Debug Bridge (adb)

Dans de rares cas, une autre méthode de débogage à distance peut être utile. Par exemple, vous pouvez souhaiter vous connecter directement au protocole Chrome DevTools (CDP) de votre navigateur Chrome sur Android.

Pour ce faire, vous pouvez utiliser Android Debug Bridge (adb) :

1. Assurez-vous d'activer les options pour les développeurs et le débogage USB sur votre appareil Android.
2. Ouvrez Chrome sur votre appareil Android.

3. Connectez l'appareil Android à votre ordinateur de développement :

   • Un câble USB (simple).
   • Vous pouvez également utiliser une connexion Wi-Fi adb.

4. Dans la ligne de commande de votre ordinateur de développement, exécutez adb devices -l et vérifiez si votre appareil figure dans la liste.

5. Transférez le socket CDP sur l'appareil vers le port local de votre ordinateur, par exemple 9222. Pour ce faire, exécutez la commande suivante :

   adb forward tcp:9222 localabstract:chrome_devtools_remote
   

6. Une fois la connexion établie, vérifiez les points suivants :

   • http://localhost:9222/json liste vos cibles page.
   • http://localhost:9222/json/version expose le point de terminaison cible browser, comme indiqué dans la documentation CDP.
   • chrome://inspect/#devices est renseigné, même si le paramètre Découvrir les périphériques USB n'est pas coché.

Pour résoudre les problèmes, consultez les articles suivants :

• Documentation sur adb

• Vous pouvez également consulter d'anciens guides :

  • remote-debugging-legacy
  • remote-debugging
  • girish.in/…how