Vous vous demandez comment est-il possible, gratuitement, de synchroniser son smartphone sous Android et son PC pour inspecter les éléments du DOM ?
Suivez le guide !
Inspecter un site sous Android en vue d’un débogage
Présentation du contexte
Vous êtes en face d’un dysfonctionnement visible uniquement sur votre smartphone Android et vous ne pouvez reproduire ce bug sur les outils et consoles de vos navigateurs PC ?
Pas de panique, il existe une solution pour synchroniser les vues du smartphone sur votre PC.
Vous pourrez ainsi inspecter le DOM et faire les corrections en temps réelle.
Préparer son smartphone
Et oui, il va falloir paramétrer votre smartphone pour autoriser la synchronisation.
Rassurez-vous, rien de bien complexe.
Passer en mode développeur
Si vous êtes persuadé d’être déjà en mode développeur alors vous pouvez passer cette section et aller directement au titre Se préparer côté PC.
Sinon, commencez par retrouver votre smartphone et allez dans vos paramètres (une roue crantée vous y amène, surplombant votre menu de notifications).
Allez sur votre système.
Tout en bas, dans le sous-menu À propos, qui doit avoir en sous titre le nom de votre modèle de smartphone.
Poursuivez dans Informations logicielles
Et tadam ! Bourrinez-moi ce numéro de build 4 fois !
Pour ma part j’étais déjà développeur, donc ça me l’indique tout en bas.
Activer le débogage par USB
Si tout va bien, retournez 2 fois en arrière dans la section Système et les Options pour les développeurs devraient être désormais présentes.
Allez-y et en descendant sur la page vous trouverez une option à cocher : Débogage USB.
Voilà, nous en avons fini avec la partie smartphone.
Pour s’en assurer, connectez votre téléphone sur votre PC via USB et la notification suivante devrait s’afficher :
Se préparer côté PC
Votre mode développeur désormais actif, nous allons pouvoir nous attaquer à la partie navigateur PC.
Ici rien de plus simple :
- ouvrez Chrome et retrouvez-vous sur chrome://inspect/#devices
- cochez Discover USB devices
- ouvrez ensuite Chrome sur votre mobile et cette capture d’écran devrait vous parler
Ici nous identifions le ASUS_X00ID qui est le modèle du smartphone (il sera différent pour le votre normalement), ainsi qu’un Chrome mobile ouvert et ensuite une liste d’onglet(s). Pour ma part, je n’en avais qu’un seul d’ouvert. Pour inspecter les éléments en temps réel, cliquez sur inspect, une nouvelle fenêtre devrait alors s’ouvrir avec la vue de votre smartphone.
Et voilà !
Le reste du travail est à venir !
Et vous vos astuces de debug ?
Infographiste passionné par son métier, il passe le plus clair de son temps à vouloir tout apprendre et tout savoir faire. Heureusement les journées sont limitées à 24 heures.
Aujourd’hui spécialisé dans la mise en page (maquettiste PAO) et dans le webdesign, il a tendance à déborder sur la 3D et la vidéo quand le temps le lui permet.