Le déclin du PC et la popularité croissante des tablettes / smartphones implique que les sites web doivent prendre en compte ce nouveau type de devices et leur contraintes (résolution, puissance, …). Le développement et le debogage pour ce type de device n’est pas aussi simple que cela ne peut l’être sur PC.

Voyons comment faire du débogage de site web sur un Android équipé de Chrome connecté en USB à un PC. (J’ai pu tester sous Windows 7 avec une tablette Samsumg Galaxy Tab 3 et sous Linux Ubuntu avec mon Samsung Nexus S, et cela fonctionne sans problème)

Installer ADB

ADB est l’extension Chrome qui permet de débugger votre appareil Android à distance.

Installer le driver de votre Android sous Windows

Sous windows, il faut installer le driver suivant le constructeur de votre android. Voici la page concernant l’installation d’un driver pour Android sous Windows.

Pour ma part, j’ai eu à installer le driver Samsung que l’on peut trouver ici.

Cela n’est pas nécessaire pour Linux ou Mac.

Activer le débogage USB sur votre android

Il faut ensuite activer le débogage via USB de votre téléphone ou tablette.

Pour cela, cela dépend de la version d’Android :

• Pur les Android 3.2 et plus anciens, vous pouvez trouver l’option sous Paramètres > Applications > Développement.
• Pour Android 4.0 et plus récent, Paramètres > Développeur.
• A partir d’Android 4.2, les options développeurs sont cachés par défaut. Pour les rendre visible, il faut aller dans Paramètres > A propos du téléphone et tapper 7 fois sur le numéro de build. Retourner à l’écran précédent pour trouver les options Développeurs.

Il faut cocher l’option Débogage USB.

Activer le débogage USB dans Chrome

Il faut ensuite activer l’option dans Chrome (à partir de la version 28 ) via Paramètres > Avancés > Outils de développement et cocher Activer débogage USB pour le Web.

Brancher votre Android en USB

Au branchement de votre appareil, il vous est demander d’autoriser votre machine à déboguer votre téléphone ou tablette. Cliquer sur OK.

Deboguer avec ADB

I l faut ensuite lancer ADB en cliquant sur Start ADB dans le menu d’ADB.

L’icone d’ADB indique alors le nombre de device connectés.

Il faut ensuite cliquer sur View Inspection Targets pour afficher les éléments pour lesquels on peut effectuer un débogage à distance, dont les pages ouvertes dans Chrome de votre Android.

Il suffit de cliquer sur inspect pour lancer le débogage d’une page.

La barre d’outils de développement sur le PC :

Chrome sous Android en mode débogage :

Référence

La page d’explication (en anglais) sur le portail développeurs de google.

Tweet