Inspecter sur Android

Voir la vidéo

Lors du dévelopement d'un site web responsive il vient toujours le moment fatidique du test sur Mobile et Tablette et ce n'est j'amais simple car il n'y a pas d'inspecteur de code sur Chrome pour Android mais alors Comment faire ?

En fait il est possible d'inspecter une page ouverte avec chrome android (navigateur par défaut sur les dernière versions d'android) depuis un ordinateur sans devoir installer d'extensions particulières (article officiel sur le remote debugging).

Débogage usb

Avant de commencer on doit préparer notre périphérique pour pouvoir activer le mode débogage USB. Pour cela il faut activer le mode développeur. Ce mode est caché pour éviter ques les simples utilisateurs tombent dessus sans comprendre de quoi il s'agit. Pour l'activer il vous suffit de vous rendre dans Paramètres > A propos du téléphone puis de tapoter une dixaine de fois sur le Numéro d'installation.

Et on tapote plusieurs fois !

Ceci vous permettra d'afficher une nouvelle option dans vos paramètres au dessus de A propos du téléphone. Dans ces options, vous devez activer le débogage USB.

Installation des drivers

Ensuite, il faut posséder et installer les Drivers USB Google pour Windows afin que notre périphérique sois correctement détecté. Vous pouvez décompresser ce dossier n'importe où.

On trouve notre téléphone dans le gestionnaire de périphérique

On va aller chercher les drivers à installer

On clique sur suivant

On clique alors sur disque fourni, et on sélectionne le dossier contenant nos drivers google

Voila le plus dur est fait !

Inspecter chrome android

Maintenant que notre téléphone est correctement détecté par l'ordinateur il est possible d'inspecter chrome android depuis chrome bureau sans utiliser d'extension ni utiliser de logiciels additionnels.

Pour cela il vous suffit de lancer Device Inspect chrome://inspect/#devices et vous devriez voir le téléphone connecté s'afficher.

Ensuite pour déboguer une page web il suffit de lancer Chrome pour Android et d'ouvrir n'importe quelle page.

Puis d'appuyez sur inspect dans votre Device Inspect ce qui va permettre d'afficher un inspecteur de code sur votre bureau qui inspectera le code affiché sur le téléphone.

Mais on peut aller plus loin, il est même possible de contrôler le navigateur directement depuis l'ordinateur en activant le système de screencast

Publié
Technologies utilisées
Auteur :
Big B
Partager