Déboguer à distance les appareils Android

Kayce Basques
Sofia Emelianova
Sofia Emelianova
GitHub

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

  • Configurez votre appareil Android pour le débogage à distance et détectez-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.
  • Enregistrez l'écran de votre appareil Android sur une instance DevTools sur votre ordinateur de développement.

Schéma de débogage à distance

Étape 1: Découvrez votre appareil Android

La plupart des utilisateurs peuvent suivre le workflow ci-dessous. Pour obtenir de l'aide, consultez Dépannage: DevTools ne détecte 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 ordinateur de développement, ouvrez Chrome.
  4. Accédez à chrome://inspect#devices.

  5. Assurez-vous que Case à cocher. Découvrir les appareils USB est activé.

    La case "Découvrir les périphériques 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 étant hors connexion et en attente d'authentification.

    Authentification de l'appareil hors connexion en attente.

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

  8. Si le nom du modèle de votre appareil Android s'affiche, cela signifie que DevTools a réussi à établir la connexion avec votre appareil.

    Appareil connecté avec un nom de modèle.

  9. Passez à l'étape 2.

Dépannage: DevTools ne détecte 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 de votre appareil Android depuis 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, essayez les solutions suivantes:

  • Déconnectez, puis reconnectez le câble USB lorsque DevTools est sélectionné sur votre ordinateur de développement et que l'écran d'accueil Android s'affiche. En d'autres termes, il arrive que l'invite ne s'affiche pas lorsque les écrans de votre appareil Android ou de votre machine de développement sont verrouillés.
  • Mettre à jour les paramètres d'affichage de votre appareil Android et de votre ordinateur de développement pour qu'ils ne passent jamais en veille.
  • Définir le mode USB d'Android sur PTP. Consultez Le Galaxy S4 n'affiche pas la boîte de dialogue "Autoriser le débogage USB".
  • Sélectionnez Revoke USB Debugging Authorizations (Annuler les autorisations de débogage USB) sur l'écran Developer Options (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 ou dans Chrome DevTools Devices does not detect device when plugged in (Les appareils des outils de développement 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éboguer 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, le nom du modèle de votre appareil Android est affiché, suivi de son numéro de série. Vous pouvez voir ci-dessous 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 un onglet avec une URL, saisissez une URL, puis cliquez sur Ouvrir. La page s'ouvre dans un nouvel onglet sur votre appareil Android.

    Onglet distant listé dans une section.

    Chaque onglet Chrome distant 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 pour les développeurs s'ouvre.

Nouvelle instance DevTools pour l'onglet distant.

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

Autres actions: mettre en pause, mettre en surbrillance, actualiser ou fermer un onglet

Sous l'URL, vous trouverez un menu permettant de suspendre, de mettre en surbrillance, de recharger ou de fermer un onglet.

Menu permettant de mettre en pause, de recharger, de mettre en surbrillance 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 le viewport de votre appareil Android.

Vous pouvez également appuyer sur un élément à l'écran de votre appareil Android pour le sélectionner dans le panneau Éléments. Cliquez sur Sélectionner un élément Sélectionner un élément dans votre instance DevTools, puis appuyez sur l'élément à l'écran de votre appareil Android. Notez que Sélectionner un élément est désactivé après le premier appui. Vous devez donc l'activer à nouveau chaque fois que vous souhaitez utiliser cette fonctionnalité.

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

Cliquez sur Activer/Désactiver la capture d'écran Activer/Désactiver l'enregistrement d'écran pour afficher 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 traduits en pressions, ce qui déclenche les événements tactiles appropriés sur l'appareil.
  • Les frappes sur votre ordinateur sont envoyées à l'appareil.
  • Pour simuler un geste de pincement, maintenez la touche Maj enfoncée pendant le glissement.
  • Pour faire défiler l'écran, utilisez le pavé tactile ou la molette de la souris, ou effectuez un balayage avec le pointeur de la souris.

Remarques sur 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 les interfaces de l'appareil, telles que la barre d'adresse Chrome, la barre d'état Android ou le clavier Android.
  • Les captures d'écran ont un impact négatif sur les fréquences d'images. Désactivez la capture d'écran 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 capture d'écran disparaît. Déverrouillez l'écran de votre appareil Android pour reprendre automatiquement la capture d'é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 vous connecter directement au protocole Chrome DevTools (CDP) de votre 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, 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 activé.

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