Déboguer à distance les appareils Android

Kayce Basques
Sofia Emelianova
Sofia Emelianova
GitHub

Procédez au débogage à distance du contenu en direct sur un appareil Android depuis votre ordinateur Windows, Mac ou Linux. Ce ce tutoriel 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 le contenu en direct de votre appareil Android à partir de votre ordinateur de développement.
  • Enregistrez l'écran de votre appareil Android sur une instance des outils de développement sur votre ordinateur de développement.

Diagramme de débogage à distance

Étape 1: Découvrez votre appareil Android

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

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

  5. Assurez-vous que l'option Case à cocher. Détecter les appareils USB est activée.

    La case "Découvrir les appareils USB" est cochée.

  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 apparaît comme "Hors connexion". et en attente d'authentification.

    Appareil hors connexion en attente d'authentification.

    Dans ce cas, acceptez l'invite de la 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 bien établi la connexion avec votre appareil.

    Un appareil correctement connecté et désigné par un nom de modèle

  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. à la place.
  • Débranchez le câble USB entre votre appareil Android et l'ordinateur de développement, puis en le rebranchant. Faites-le lorsque votre appareil Android et les écrans 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 de votre ordinateur de développement.

Assurez-vous que votre logiciel est correctement configuré:

Si l'invite Autoriser le débogage USB ne s'affiche pas sur votre appareil Android, procédez comme suit:

  • Débrancher, puis rebrancher le câble USB pendant que les outils de développement se concentrent sur votre développement votre ordinateur et votre écran d'accueil Android s'affiche. En d'autres termes, parfois, la requête n'affiche pas lorsque l'écran de votre ordinateur Android ou de votre ordinateur de développement est verrouillé.
  • Mettre à jour les paramètres d'affichage de votre appareil Android et de votre ordinateur de développement de sorte qu'ils ne soient jamais d'aller dormir.
  • Je règle le mode USB d'Android sur PTP. Consultez 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 sur l'écran Options pour les développeurs de votre l'appareil Android pour le réinitialiser.

Si vous trouvez une solution qui n'est pas mentionnée dans cette section ou dans la section Les appareils des outils pour les développeurs Chrome n'ont pas détecter l'appareil lorsqu'il est branché, ajoutez une réponse à la question Stack Overflow ou ouvrez une dans le dépôt developer.chrome.com.

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

  1. Ouvrez Chrome sur votre appareil Android.

  2. Dans le fichier chrome://inspect/#devices de votre ordinateur de développement, vous voyez le nom du modèle de votre appareil Android, suivi du 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.

    Version de Chrome exécutée sur l'appareil.

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

    Onglet distant figurant dans une section

    Chaque onglet Chrome distant a 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 DevTools s'ouvre.

Nouvelle instance DevTools pour l'onglet distant

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. Ainsi, si votre appareil Android exécute une version très ancienne de Chrome, l'instance des outils de développement peut être très différente de celle à laquelle vous êtes habitué.

Autres actions: mettre en pause, sélectionner, actualiser ou fermer un onglet

Sous l'URL, vous trouverez un menu permettant de mettre en pause, sélectionner, actualiser ou fermer un onglet.

Menu permettant de mettre en pause, d'actualiser, de sélectionner ou de fermer un onglet.

Inspecter les éléments

Accédez au panneau Elements (Éléments) de votre instance DevTools et pointez sur un élément pour le mettre en surbrillance 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 le panneau Elements. Cliquez sur Select Element Sélectionner un élément (Sélectionner l'é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 l'é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 écran Android sur votre ordinateur de développement

Cliquez sur Toggle Screencast (Activer/Désactiver l'enregistrement d'écran). Activer/Désactiver l'enregistrement d'écran pour le consulter le contenu de votre appareil Android dans votre instance DevTools.

Vous pouvez interagir avec l'enregistrement d'écran de plusieurs manières:

  • Les clics sont convertis en actions d'appui, 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, faites glisser la souris tout en maintenant la touche Maj enfoncée.
  • Pour faire défiler l'écran, utilisez votre pavé tactile ou la molette de la souris, ou faites glisser le pointeur de la souris.

Quelques remarques concernant les enregistrements d'écran:

  • Les enregistrements d'écran n'affichent que le contenu de la page. Les parties transparentes de l'enregistrement d'écran représentent l'appareil interfaces, comme la barre d'adresse Chrome, la barre d'état Android ou le clavier Android.
  • Les enregistrements d'écran ont un impact négatif sur la fréquence d'images. Désactivez l'enregistrement 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 l'enregistrement d'écran disparaît. Déverrouillez votre Écran d'un appareil Android pour reprendre automatiquement l'enregistrement d'écran.

Déboguer manuellement via Android Debug Bridge (adb)

Dans de rares cas, une autre méthode de débogage à distance peut s'avérer utile. Par exemple, vous pouvez vous connecter directement au CDP (Chrome DevTools Protocol) 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 via:

  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 de l'appareil vers le port local de votre machine, 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, procédez comme suit:

    • http://localhost:9222/json répertorie 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 appareils USB n'est pas coché.

Pour résoudre les problèmes, consultez les pages suivantes: