Déboguer vos pages web sur Android

Comme vous le savez tous, le développement web mobile peut être un peu fastidieux, lorsqu'il s'agit de déboguer du code JavaScript exécuté uniquement sur un téléphone par exemple.

Il existe des sites permettant de tester votre site sous différentes résolutions (http://screenqueri.es/ en est un exemple parmi tant d'autres) mais il est plus difficile d'analyser le DOM, de tester du code sans mettre des alert() partout.

Google a répondu à ce problème par un plugin pour Chrome appelé ADB pour Android Device Bridge. Les personnes travaillant dans le développement Android le connaissent bien car c'est un des composants installés avec le SDK Android. Ce plugin va nous permettre de détecter un appareil Android connecté via USB sur votre ordinateur et ainsi d'utiliser la console de débogage de Google Chrome desktop sur une page affichée depuis Google Chrome Android.

Attention, il vous faut au minimum la version 28 pour Chrome Desktop et la version 24 pour Chrome Android.

Installer le plugin ADB pour Google Chrome 28

Il suffit d'installer le plugin ADB comme n'importe quel autre plugin Chrome en cliquant sur le bouton Installer. L'icône suivante va s'afficher à droite de votre barre d'adresse.

Préparer le téléphone pour le débogage USB

Nous allons préparer le téléphone au débogage USB en activant la bonne option dans les options développeurs des paramètres du téléphone.

Si vous utilisez Android 4.2+, ces options sont camouflées. Pour les afficher, il vous faut réaliser les étapes suivantes :

  • Cliquez sur l'icône Paramètres
  • Cliquez sur A propos de ce téléphone
  • tapotez 4 fois sur le numéro de build
  • Revenez dans les paramètres générales, l'onglet va se trouver juste avant A propos de ce téléphone

Une fois que vous êtes dans les options développeur, il vous faut cocher l'option Débogage USB.

Le mode Débogage USB

Activer le débogage USB dans Chrome Android

Nous allons maintenant activer le débogage USB pour Google Chrome Android, ce qui permettra au plugin ADB de reconnaitre notre appareil Android et d'afficher les pages web.

Pour cela :

  • Ouvrez Google Chrome Android
  • Allez dans les Paramètres
  • Allez dans Outils de Développement
  • cochez Activer le déblocage USB pour le web

Le mode débogage sur Chrome Android

Utiliser le plugin

Tout est complètement configuré, nous allons maintenant pouvoir utiliser le plugin. Pour cela, veuillez brancher votre téléphone Android à votre ordinateur via USB. Vous pouvez ouvrir votre site web préféré sur votre téléphone.

Veuillez cliquez sur l'icône ajoutée à votre barre d'adresse puis sur Start ADB. Cela va permettre au plugin de rechercher votre appareil Android.

Veuillez cliquer sur View Inspection targets.

Cela vous mènera sur la page chrome://inspect/. Vous pourrez ainsi voir toutes les pages ouvertes sur votre téléphone Android. Il vous suffit de cliquer sur Inspect pour ouvrir la console de débogage et ainsi avoir la puissance de Chrome Desktop sur votre appareil mobile.

En savoir plus sur le remote debugging sur Android : https://developers.google.com/chrome-developer-tools/docs/remote-debugging#install-adbplugin


12 Commentaires

A61035066d5edcafdb5e869621d15111?s=200&r=pg&d=mm
Abdellah Rahim, 27-04-2014 17:22:08 - Répondre

Merci

1f373f7eb4d8e5e040cae2ecf4341bfe?s=200&r=pg&d=mm
darkhexagon, 17-11-2013 16:58:36 - Répondre

Salut tout le monde je ne peux pas installer l'extension pour google chrome le web store me dit Le plug-in NPAPI est nécessaire au fonctionnement de cette application.

Ou est ce que je peux le trouver ?

C3aec43bc4bf11475a1d31f781c5f50a?s=200&r=pg&d=mm
rafffel, 28-10-2013 11:50:03 - Répondre

Je tenais a rajouter qu'il est possible de se passer du cable usb en passant par l'appli adb over wifi du play store et sur le pc la commande adb connect ipfourniparlewidget:portfournitparlewidget

l'outil adb étant disponible dans le sdk android repertoire plateform-tools.

Perso j'avais vu ça rapidement sans l'essayer et aujourd'hui en voyant l'article je m'y suis tenté et ça marche bien cela va m'être utile.

Merci

31381
Koopa, 27-10-2013 22:33:23 - Répondre

Ou sinon il y a l'outil de développement intégré dans le navigateur Google Chrome (CTRL + MAJ + I), vous changez le User-Agent et la résolution puis le tour est joué. ;)

C3aec43bc4bf11475a1d31f781c5f50a?s=200&r=pg&d=mm
rafffel, 28-10-2013 11:45:31 - Répondre

Pas tout à fait, cela fait une simulation d'un appareil mais ne remplace en aucun cas un vrai appareil. Chrome pour Android n'intègre pas toutes les fonctionnalités qu'un Chrome pour ordinateur. Les deux versions sont quand même pour la plupart du temps similaire mais votre principe reste une simulation.

Fcd476cfe3a385bc4bddf5cbbff79fb4?s=200&r=pg&d=mm
Pewel-OutOfNutella, 07-10-2013 16:57:04 - Répondre

Salut prbaron ! Merci pour ce petit tuto mais j'ai un petit soucis.
J'ai installé le plugin chrome sur un debian, mis à jour mes version de chrome sur mon pc, sur mon téléphone, activé le debug dans les paramètres de mon tel et du navigateur sur mon tel mais rien n'y fait, mon plugin sur chrome reste inactif et quand j'appuie sur start adb ça ne fonctionne pas du tout.

Est ce que c'est compatible avec linux ce plugin ?

7314
prbaron, 10-10-2013 11:17:44 - Répondre

Je ne pense pas que le problème vienne de Linux mais plutôt des drivers relatifs à ton ordinateur. Nous avons eu un soucis similaire avec les Nexus 7. En mettant à jour les drivers, adb a été capable de voir la tablette.

25115
Xen0risDEV, 01-09-2013 02:01:37 - Répondre

Superbe article merci Graf :)

52413b2379be616cb84a6998d515a64f?s=200&r=pg&d=mm
Toune, 31-08-2013 13:26:26 - Répondre

Ou sinon il y a l'outil de développement intégré dans le navigateur Google Chrome (CTRL + MAJ + I), vous changez le User-Agent et la résolution puis le tour est joué. ;)

7314
prbaron, 31-08-2013 21:16:44 - Répondre

Pas tout à fait, cela fait une simulation d'un appareil mais ne remplace en aucun cas un vrai appareil. Chrome pour Android n'intègre pas toutes les fonctionnalités qu'un Chrome pour ordinateur. Les deux versions sont quand même pour la plupart du temps similaire mais votre principe reste une simulation.

1f373f7eb4d8e5e040cae2ecf4341bfe?s=200&r=pg&d=mm
darkhexagon, 30-08-2013 18:22:24 - Répondre

Moi j'utilise un émulateur comme celui installé pour cordova et ça marche très bien !

26554
JamesHemery, 30-08-2013 18:08:02 - Répondre

Intéréssent :D