Comment déboguer un site à distance sur Android avec Firefox

Depuis que les smartphones sont apparus s’est posée la question des versions mobiles des sites web : avec de plus en plus de visiteurs en provenance de plate-formes mobiles, il est devenu nécessaire d’offrir une expérience utilisateur particulière à ceux-ci, afin de faciliter leur navigation. Mais développer un site pour mobiles n’est pas forcément toujours pratique, car quand arrive la phase du test, déboguer peut être un vrai calvaire. Enfin, si on n’a pas les bons outils.

Le bon outil, c’est bien évidemment Firefox, qui dispose d’un très grand nombre d’outils plutôt pratiques quand il s’agit de développer un site web. En ce qui concerne le développement mobile, on avait déjà parlé du mode responsive permettant de vérifier l’utilité des media queries, mais il existe un autre outil tout aussi pratique : le débogage à distance.

Grâce au débogage à distance, vous pourrez accéder, depuis votre ordinateur, à la console web, comme vous le feriez avec n’importe quel site. Sauf que ce site sera visualisé sur votre mobile et que vous pourrez donc y tester toutes sortes de choses.

Pour pouvoir faire tout ça, il va nous falloir un peu de matériel, à commencer par un terminal Android, bien sûr, sur lequel vous aurez installé Firefox pour Android et activé le débogage USB. Vous aurez également besoin d’un câble pour le connecter à votre ordinateur et, pour pouvoir établir comme il le faut cette connexion, nous aurons besoin d’ADB, que vous trouverez dans le SDK d’Android. Toutes les explications dont vous pourriez avoir besoin sont ici.

Sur votre ordinateur, ouvrez un terminal et lancez donc la commande suivante afin de vérifier si ADB détecte bien votre terminal :
adb devices

Si c’est le cas, vous devriez avoir une sortie de ce genre (avec bien sûr une chaîne hexadécimale différente) :
List of devices attached
0A3C27F51001B00B device

Maintenant, il nous faut activer le débogage à distance sur Firefox pour Android. Pour cela, lancez l’application et rendez vous dans les paramètres, section Outils de développement. Vous y trouverez une case à cocher « Débogage distant » que vous vous empresserez de cocher si ce n’est pas déjà fait.

Il va nous falloir faire de même sur notre ordinateur, en ouvrant la console web. Cliquez sur la petite icône d’engrenage dans la barre du haut pour vous rendre dans les paramètres et cochez la case « Activer le débogage distant« .

Nous sommes fin prêt à établir une première connexion ! Si ce n’est pas déjà fait, connectez votre terminal grâce au câble USB puis, en ligne de commande, tapez donc ceci pour dire à ADB d’utiliser le port que l’on veut qu’il utilise :
adb forward tcp:6000 tcp:6000
Notez que vous devrez recommencer à partir de cette étape pour vos prochains débogages distants.

Depuis votre ordinateur, rendez vous alors dans le menu Outils de Firefox, rubrique Développeur web. Vous devriez y trouver une option « Se connecter… » sur laquelle vous cliquerez. Cela aura pour effet d’ouvrir un nouvel onglet contenant un petit formulaire qui devrait normalement être pré-rempli avec les bonnes valeurs. Cliquez alors sur le bouton « Se connecter« .

Sur votre mobile, une boîte de dialogue va alors s’afficher, vous demandant si vous souhaitez autoriser la connexion. Je vous laisse deviner l’option à choisir.

Le nouvel onglet de Firefox ouvert précédemment vous affiche alors la liste des onglets ouverts sur votre terminal. Cliquez sur celui que vous souhaitez déboguer. Ceci aura pour effet de fermer l’onglet en question et d’ouvrir une nouvelle fenêtre contenant une console web directement reliée à l’onglet sélectionné : félicitations, vous avez désormais tous les outils dont vous auriez pu rêver sur votre mobile !

Pour tester la bête, vous pouvez par exemple utiliser la ligne de commande de la console et y taper quelque chose du genre :
alert('Hello World!');
Il ne vous reste maintenant plus qu’à déboguer ce qui vous posait problème !