Le Web est aujourd'hui plus consulté sur les téléphones mobiles que sur les ordinateurs de bureau. Depuis que les appareils sont devenus vraiment portables et les tailles d'écran plus petites. Donc, si vous développez une application Web, vous ne pouvez tout simplement pas éviter la prise en charge des téléphones mobiles (Android ou iOS). Les sites cassés ou à l'apparence de merde sur les écrans mobiles peuvent vraiment nuire à votre réputation en ligne. L'expérience utilisateur sur les téléphones est complètement différente de celle du bureau. Les développeurs doivent donc spécialement concevoir les applications pour s'adapter à l'écran mobile.
Google Chrome Dev fournit des outils qui vous permettent d'inspecter, de déboguer, d'analyser l'expérience sur l'appareil, et vous pouvez utiliser les outils Chrome Dev sur votre ordinateur local pour déboguer votre application sur un appareil mobile. Dans ce didacticiel, nous apprendrons comment configurer votre machine de développement local pour déboguer à distance sur Android. Nous procéderons au débogage via une connexion USB entre votre appareil mobile et votre machine de développement locale.
Vous aurez besoin des éléments suivants pour avancer dans le débogage à distance :
- Un mobile ou une tablette Android avec Chrome pour Android 28 installé (vous pouvez l'installer à partir de ici).
- Un câble USB pour connecter votre appareil Android à votre machine de développement locale, assurez-vous également que les lecteurs requis sont installés pour connecter votre mobile Android à un ordinateur.
- Vérifiez la Liste des pilotes USB OEM et découvrez les pilotes qui vous conviennent.
- Chrome 28+ installé sur votre ordinateur de développement local.
- Assurez-vous que l'extension ADB Chrome est installée sur votre ordinateur de développement local. Vous pouvez l'installer à partir de ici.
Dans ce didacticiel, nous utiliserons un Sony Xperia L (appareil Android) et Windows 7 sur notre machine de développement locale. Commençons donc par le débogage à distance :
1. Assurez-vous d'abord que le mode Débogage est activé sur votre appareil Android
Si vous ne l'avez pas activé, veuillez vous référer à ceci :
- Pour les utilisateurs d'Android 4.2, reportez-vous à : http://www.thesmarthacks.com/2013/04/enabling-usb-debugging-mode-on-android.html.
- Les autres peuvent faire référence à : http://www.groovypost.com/howto/mobile/how-to-enable-usb-debugging-android-phone/.
Pour plus d'informations sur la configuration d'un appareil Android pour le développement, veuillez vous référer à : http://developer.android.com/tools/device.html#setting-up.
2. Connecter votre appareil Android
Connectez maintenant votre appareil Android à votre machine de développement locale avec un câble USB. Une fois que vous avez connecté votre appareil Android, vous devez activer le débogage Web USB sur votre téléphone, en lançant Chrome sur votre Android puis, -> Paramètres -> Outils de développement -> Sélectionnez Activer le débogage Web USB
Lorsque vous sélectionnez cette option si elle vous demande de confirmer votre connexion avec la machine de développement, sélectionnez OK.
3. Débogage
Après avoir installé l'extension ADB, vous verrez une icône Android grise à côté du menu Chrome. Cliquez maintenant sur l'icône Android et sélectionnez -> Démarrer ADB. Maintenant, il devrait devenir vert et affichera le nombre d'appareils actuellement connectés. Cliquez ensuite sur l'icône et sélectionnez -> Afficher les cibles d'inspection. Cela devrait ouvrir un nouvel onglet et afficher le nombre d'appareils Android connectés et les onglets actuellement ouverts sur eux.
Sélectionnez maintenant l'onglet dans la liste que vous souhaitez déboguer. Cela ouvrira une nouvelle fenêtre avec les outils de développement.
Inspectez maintenant un élément de la page et l'élément est mis en surbrillance dans le mobile Chrome, en temps réel.
De cette façon, vous pouvez corriger les bogues spécifiques à l'appareil, en déboguant à partir des outils de développement. Vous pouvez exécuter des commandes à partir des outils de développement qui seront exécutées dans le mobile Chrome. Affichez également différents panneaux tels que Réseau, Ressources, Chronologie, Profils, Audits.
Vous pouvez désormais corriger des bogues spécifiques aux mobiles et déboguer des applications mobiles en temps réel au lieu de déployer votre application sur le serveur, puis d'y accéder depuis votre téléphone et de déboguer. Google Chrome Dev fournit ces outils qui résolvent un véritable problème pour les développeurs qui créent des applications compatibles avec les appareils.
Bon à savoir sur Chrome Dev. L'offre de plateforme aux développeurs tant pour les navigateurs que pour les mobiles (iOS et Android) augmente de jour en jour. Merci pour toutes les photos détaillées sur le processus de débogage.
C'est un article vraiment génial et utile. À partir de là, nous pouvons comprendre les procédures claires concernant le débogage à distance des applications Web sur Android. De plus, les images expliquent la procédure à propos de Chrome Dev de manière claire et simple.
Waouh ! Android déchire !
Je ne savais pas si c'était même possible
Je pense que c'est un article vraiment utile pour tous les utilisateurs d'Android. surtout à cette époque, beaucoup d'applications pour les navigateurs rendent généralement les utilisateurs confus.
All Fotos est très détaillé et facile à suivre toutes les étapes.
Merci pour votre partage.
Stéphan Wu
Vraiment, cet article est très utile pour déboguer des applications Web sur Android. Je n'y ai pas pensé.
C'est un article très instructif. Nous pouvons maintenant déboguer à distance des applications Web sur Android.
Article très bien présenté et instructif. Je me suis toujours demandé comment déboguer à distance des applications Web, mais les autres blogs que j'avais lus dans le passé n'étaient pas très simples. Merci de l'avoir exprimé en termes clairs pour ceux d'entre nous qui luttent pour suivre le langage technologique.
Comme l'a dit Stephan, les images sont très détaillées, ce qui rend les instructions plus faciles à suivre.
Je cherchais un moyen de déboguer mon Samsung Galaxy S3. Je pense que je suis au bon endroit car votre tutoriel m'a vraiment aidé et j'ai réussi à déboguer mon appareil. Merci beaucoup pour l'aide.
Waouh ! Je ne savais pas que vous pouviez faire cela avec mon téléphone Android.
Merci !
Vraiment incroyable, je n'ai jamais pensé que le débogage pouvait se faire à distance, en particulier pour les applications Android…
Bonjour,
Merci, enfin j'ai fait le débogage à distance, vraiment utile.