Comment faire inspecter sur mobile ?

Développeur mobile : Inspecter le code web directement sur votre Android

Vous développez des sites web responsives, des applications web progressives (PWA) ou vous souhaitez simplement comprendre comment un site web s’affiche sur votre mobile ? L’inspection du code source directement depuis votre smartphone Android est un atout précieux. Fini les conjectures ! Vous pouvez désormais analyser en temps réel le rendu, les ressources et les comportements d’un site web mobile. Voici comment faire, en utilisant les outils puissants de Chrome DevTools.

Pourquoi inspecter le code web sur mobile ?

Avant de plonger dans la procédure, rappelons l’intérêt d’inspecter le code directement sur votre Android :

• Débogage précis : Identifiez rapidement les problèmes d’affichage spécifiques aux mobiles (différences de taille d’écran, problèmes de rendu CSS, etc.).
• Optimisation des performances : Analysez le chargement des ressources, les temps de réponse du réseau et les éventuels goulots d’étranglement.
• Adaptation responsive : Vérifiez si votre site web s’adapte correctement aux différentes tailles d’écran et aux résolutions.
• Compréhension approfondie : Etudiez le code source des sites web mobiles que vous admirez et comprenez leurs astuces.

La méthode : Chrome DevTools et l’inspecteur à distance

L’inspection se fait en deux étapes clés : la connexion entre votre appareil Android et votre ordinateur, et l’utilisation des Chrome DevTools pour inspecter l’onglet ouvert sur votre mobile.

Prérequis :

• Un smartphone Android avec Chrome installé. Assurez-vous que Chrome est à jour.
• Un ordinateur avec Chrome installé. Lui aussi, doit être à jour.
• Un câble USB pour connecter votre téléphone à votre ordinateur.

Voici la procédure étape par étape :

1. Activer le débogage USB sur votre téléphone :

   • Rendez-vous dans les Paramètres de votre téléphone.
   • Recherchez “Informations sur le téléphone” ou “A propos de l’appareil”.
   • Trouvez le numéro de build et tapez dessus 7 fois rapidement. Cela activera les options pour les développeurs. (Si vous l’avez déjà fait auparavant, cette étape n’est pas nécessaire).
   • Retournez dans les Paramètres et cherchez “Options pour les développeurs” (parfois sous “Système”).
   • Activez le “Débogage USB”. Vous devrez peut-être confirmer votre choix.

2. Connecter votre téléphone à l’ordinateur :

   • Connectez votre téléphone à votre ordinateur via le câble USB.
   • Il vous sera demandé sur votre téléphone d’autoriser le débogage USB à partir de cet ordinateur. Autorisez la connexion. (Vous pouvez cocher la case “Toujours autoriser à partir de cet ordinateur” pour éviter de répéter cette étape à chaque fois).

3. Ouvrir Chrome DevTools sur votre ordinateur :

   • Ouvrez Chrome sur votre ordinateur.
   • Tapez chrome://inspect dans la barre d’adresse et appuyez sur Entrée.

4. Configurer l’inspecteur à distance :

   • Dans la fenêtre Chrome DevTools qui s’ouvre, vous devriez voir votre appareil Android détecté dans la section “Remote Devices”. Si ce n’est pas le cas, assurez-vous que le débogage USB est bien activé et que votre téléphone est bien connecté. Vous pouvez également cocher la case “Discover USB devices” pour forcer la détection.
   • Votre appareil devrait afficher la liste des onglets Chrome ouverts.

5. Inspecter l’onglet souhaité :

   • Cliquez sur le bouton “Inspect” à côté de l’onglet que vous souhaitez inspecter.

6. Utiliser Chrome DevTools :

   • Une nouvelle fenêtre Chrome DevTools s’ouvre, vous permettant d’inspecter le code HTML, CSS, JavaScript, les ressources, le réseau, la console, et plus encore.
   • Vous pouvez interagir avec l’onglet distant comme si vous utilisiez la version de bureau de DevTools.
   • Les modifications que vous effectuez dans DevTools seront reflétées en temps réel sur l’onglet Chrome de votre téléphone.

Conseils et astuces :

• Port forwarding: Pour le développement local (par exemple, inspecter un serveur web tournant sur votre machine), le port forwarding peut être nécessaire. Dans la section “Remote Devices”, vous pouvez configurer le port forwarding pour diriger le trafic vers le bon port sur votre téléphone.
• Rester connecté : Laissez votre téléphone connecté à votre ordinateur pendant le développement pour une inspection continue.
• Mises à jour : Assurez-vous que Chrome sur votre téléphone et votre ordinateur sont à jour pour bénéficier des dernières fonctionnalités de DevTools.

En maîtrisant cette technique, vous transformerez votre workflow de développement mobile. Vous gagnerez en efficacité, en précision et en compréhension des défis spécifiques au mobile. Alors, à vos smartphones et bons débogages !