Inspecter son site sur Android en synchronisant la vue sur PC

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.

Tuto inspecter un site sous android depuis son pc - capture systeme
Paramètres > Système

Tout en bas, dans le sous-menu À propos, qui doit avoir en sous titre le nom de votre modèle de smartphone.

Tuto inspecter un site sous android depuis son pc - capture à propos
Paramètres > Système > À propos

Poursuivez dans Informations logicielles

Tuto inspecter un site sous android depuis son pc - information logiciel
Paramètres > Système > À propos > 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.

Tuto inspecter un site sous android depuis son pc - capture numero de build
Paramètres > Système > À propos > Informations logicielles

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.

Tuto inspecter un site sous android depuis son pc - capture débogage usb
Paramètres > Système > Options pour les développeurs > 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 :

Tuto inspecter un site sous android depuis son pc - capture notification debogage
Notification du débogage USB actif

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
Tuto inspecter un site sous android depuis son pc - capture sur chrome PC
Découvrez si votre smartphone apparait

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.

Tuto inspecter un site sous android depuis son pc - capture inspection sous chrome
Inspection du DOM sur Android grâce à Chrome

Et voilà !
Le reste du travail est à venir !

Et vous vos astuces de debug ?

Author profile

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.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *