Comment inspecter un élément sur Android, depuis n'importe quel ordinateur

Vous ne pouvez pas ouvrir les outils de développement sur le téléphone lui-même. Ce que vous pouvez faire, c’est piloter le navigateur du téléphone depuis un ordinateur avec un câble, et contrairement à l’équivalent sur un iPhone - qui demande un Mac - cela fonctionne sous Windows, macOS ou Linux. N’importe quel ordinateur équipé de Chrome fera l’affaire.

La préparation, une fois pour toutes

Sur le téléphone. Ouvrez Paramètres → À propos du téléphone et appuyez sept fois sur Numéro de build. Android vous annonce que le mode développeur est activé. Revenez dans Paramètres → Système → Options pour les développeurs et activez le débogage USB. Le chemin exact varie selon le fabricant ; chercher “numéro de build” dans l’application Paramètres va plus vite que de fouiller.

Branchez-le. Reliez le téléphone à l’ordinateur avec un câble qui transporte des données - un câble de charge seule est la raison la plus fréquente pour que rien n’apparaisse. Déverrouillez le téléphone. Il demande s’il faut autoriser le débogage USB depuis cet ordinateur ; dites oui.

Sur l’ordinateur. Ouvrez Chrome et allez sur chrome://inspect#devices. Votre téléphone apparaît avec son nom, accompagné de la liste des onglets ouverts dessus. Cliquez sur inspect à côté de celui qui vous intéresse.

Les outils de développement s’ouvrent sur l’ordinateur et pilotent le téléphone. Vous avez la panoplie complète - Éléments, Console, Réseau, tout - plus une vue en direct de l’écran sur laquelle vous pouvez cliquer, ce qui est vraiment utile quand la personne qui tient le téléphone est au téléphone avec vous.

Sans câble

Android 11 et les versions suivantes savent le faire en wifi. Dans les options pour les développeurs, activez le débogage sans fil, choisissez “Associer l’appareil à l’aide d’un code d’association”, puis associez depuis l’ordinateur. Les deux appareils doivent être sur le même réseau. C’est plus lent qu’un câble, et c’est la différence entre déboguer à son bureau et déboguer depuis le canapé.

Ce qui apparaît là en plus

• Les autres navigateurs Chromium du téléphone - Samsung Internet, Edge - apparaissent dans la même liste dès que le débogage est activé.
• Firefox pour Android non. Son équivalent est about:debugging dans le Firefox de bureau, avec le même interrupteur de débogage USB sur le téléphone.
• Une vue web à l’intérieur d’une application native n’apparaît que si l’application a été compilée avec le débogage des vues web activé. Pour votre propre application dans une version de développement, cela tient en une ligne. Pour l’application de quelqu’un d’autre récupérée sur le store, ce n’est pas disponible, et c’est volontaire.

La différence avec l’iPhone qu’il faut connaître

Sous iOS, tous les navigateurs affichent avec WebKit, donc un bug qui ne se voit que sur un iPhone est le plus souvent une différence de moteur qu’aucun navigateur de bureau ne peut reproduire.

Android n’est pas comme cela. Chrome sur Android, c’est Blink, le même moteur que Chrome sur votre bureau, si bien que la plupart des bugs d’affichage se reproduisent bien dans le mode appareil du bureau - la vue téléphone des outils de développement. Cela fait du mode appareil un bien meilleur premier essai ici que sur iOS.

Ce que le mode appareil ne vous donne toujours pas, c’est le reste du téléphone : le comportement tactile réel et la taille réelle des zones touchables, la fenêtre d’affichage véritable une fois le clavier ouvert, les limites de mémoire d’un appareil bon marché, les différences de GPU, et tout ce qui touche aux conditions réseau de l’appareil lui-même. L’ordre qui fait gagner du temps est donc : essayez d’abord le mode appareil, et prenez le câble quand le bug ne s’y montre pas.

Quand le téléphone est celui de quelqu’un d’autre

Tout ce qui précède suppose que vous avez le téléphone en main. Le plus souvent ce n’est pas le cas : un client a signalé que votre site est cassé sur son Android, et activer le mode développeur sur l’appareil d’un inconnu n’est pas une demande que quiconque va formuler.

Ce qu’il faut demander à la place, dans l’ordre de ce que cela vous apprend :

• Un enregistrement de l’écran. Android enregistre l’écran depuis le panneau des réglages rapides. Il capte le comportement, le rythme et ce sur quoi la personne a appuyé.
• Le navigateur et sa version. Celle de Chrome est dans Paramètres → À propos de Chrome. “Android” n’est pas une réponse - Chrome 152 sur Android 16 en est une.
• Le texte exact de la moindre erreur, photographié si c’est plus simple que de le recopier.
• Si cela arrive dans un onglet de navigation privée, ce qui sépare votre page d’une extension, d’une ressource en cache ou d’un service worker périmé.

Notre propre limite, dite franchement sur une page qui parle de téléphones : notre extension est une extension Chrome pour ordinateur de bureau. Elle capture la console et le journal réseau sur un ordinateur, pas sur un téléphone. Pour un bug de bureau, elle supprime tout cet échange, parce que la moitié technique arrive en appuyant sur un bouton. Pour un bug qui n’arrive que sur l’Android de quelqu’un, l’enregistrement et le numéro de version restent ce à partir de quoi vous travaillez.

Aide-mémoire

• Téléphone : Paramètres → À propos du téléphone → appuyer sept fois sur Numéro de build, puis Options pour les développeurs → débogage USB.
• Ordinateur : Chrome → chrome://inspect#devices → inspect.
• Utilisez un câble de données, déverrouillez le téléphone et acceptez la demande.
• Android 11 et plus peuvent s’associer en wifi à la place.
• Chrome sur Android est le même moteur que Chrome sur le bureau, donc essayez le mode appareil avant de prendre le câble.