• Passer à la navigation principale
  • Passer au contenu principal
  • Passer au pied

TechLila

Bord saignant, toujours

  • Home
  • À propos
  • Contact
  • Aubaines et offres
Techlila Logo
FacebookTweetLinkedInPin It
CMS ou HTML
Suivant

CMS ou HTML : que devraient choisir les petites entreprises pour leur site Web

Comment déboguer à distance des applications Web sur Android

TechLila Mobile Android

Comment déboguer à distance des applications Web sur Android

Avatar de Virendra Rajput Virendra Rajput
Dernière mise à jour le: Le 9 janvier 2022

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 :

  1. Un mobile ou une tablette Android avec Chrome pour Android 28 installé (vous pouvez l'installer à partir de ici).
  2. 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.
  3. Vérifiez la Liste des pilotes USB OEM et découvrez les pilotes qui vous conviennent.
  4. Chrome 28+ installé sur votre ordinateur de développement local.
  5. 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

Développeurs Outils Android

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.

Inspecter avec l'outil de développement Chrome

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.

Tableau de bord des 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.

Élément mis en évidence dans Chrome Mobile
Élément mis en évidence dans la capture d'écran Chrome Mobile

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.

Réseau

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.

Divulgation: Le contenu publié sur TechLila est pris en charge par les lecteurs. Nous pouvons recevoir une commission pour les achats effectués via nos liens d'affiliation sans frais supplémentaires pour vous. Lisez notre Avis de non-responsabilité pour en savoir plus sur notre financement, nos politiques éditoriales et les moyens de nous soutenir.

Partager c'est aimer

FacebookTweetLinkedInPin It
Avatar de Virendra Rajput

Virendra Rajput

Virendra Rajput est un programmeur passionné et un hacker. Il est co-fondateur de Markitty. C'est un programmeur Python inconditionnel qui se passionne pour le piratage avec diverses API. Dans ses temps libres, il aime travailler sur des projets parallèles.

Catégories

  • Android
  • Conception et développement Web

Interactions Reader

Ce que nos propriétaires en disent

  1. Avatar de pedro miguelPedro Miguel

    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.

    Répondre
  2. Avatar de MeethuMeethu

    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.

    Répondre
  3. Avatar de Van Wildervan Wilder

    Waouh ! Android déchire !

    Je ne savais pas si c'était même possible

    Répondre
  4. Avatar de StéphaneStephan

    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

    Répondre
  5. Avatar de SatishSatish

    Vraiment, cet article est très utile pour déboguer des applications Web sur Android. Je n'y ai pas pensé.

    Répondre
  6. Avatar de Karen DavidsonKaren Davidson

    C'est un article très instructif. Nous pouvons maintenant déboguer à distance des applications Web sur Android.

    Répondre
  7. Avatar de James StevensJames Stevens

    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.

    Répondre
  8. Avatar de Peter FordPeter Ford

    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.

    Répondre
  9. Avatar de Mahesh SrivastavaMahesh Srivastava

    Waouh ! Je ne savais pas que vous pouviez faire cela avec mon téléphone Android.

    Merci !

    Répondre
  10. Avatar de BéthanieBethany

    Vraiment incroyable, je n'ai jamais pensé que le débogage pouvait se faire à distance, en particulier pour les applications Android…

    Répondre
  11. Avatar d'AliciaAlicia

    Bonjour,

    Merci, enfin j'ai fait le débogage à distance, vraiment utile.

    Répondre

Ajoutez votre commentaire Annuler la réponse

Votre adresse email n'apparaitra pas. Les champs obligatoires sont marqués *

Pied de page Logo Logo de texte de pied de page

Pied de page

À propos

Bonjour et bienvenue sur TechLila, le célèbre blog technologique où vous pouvez trouver des articles ingénieux pour maîtriser les bases et au-delà.

Chez TechLila, notre objectif principal est de fournir des informations uniques, telles que des trucs et astuces de qualité, des tutoriels, des guides pratiques sur Windows, Macintosh, Linux, Android, iPhone, Sécurité et quelques sous-thèmes divers tels que des critiques.

Liens

  • À propos
  • Contactez-Nous
  • Dénégation de responsabilité
  • Politique de Confidentialité
  • Conditions

Suivez la météo en direct

Thème personnalisé utilisant Genesis Framework

Hébergement cloud par Cloudways

Langue

© Droits d'auteur 2012-2023 TechLila. Tous les droits sont réservés.

x
x