Lorsqu’il s’agit de débugger sur mobile, on a en théorie tout ce qu’il nous faut avec le Device Mode de Chrome ou la Vue adaptative de Firefox. Choix de l’appareil, de l’orientation et même de la vitesse de connexion : ces outils semblent donner tout ce qu’il faut pour partir à la chasse aux bugs sur mobile.

En pratique, ces outils s’avèrent pourtant très limités lorsqu’il s’agit d’émuler les comportements natifs des devices. Tout au plus, ils permettent de vérifier l’affichage responsive de son site.

Le redoutable bug natif

J’ai par exemple travaillé récemment sur une Google Map qui était censée s’afficher ou se masquer au clic sur un bouton. Aucun problème sur desktop ni sur l’émulateur mobile de mon navigateur, la map accepte docilement le display: block et le display: none.

Mais les choses se compliquent quand vient le moment de tester sur un vrai téléphone. Comme souvent, les mauvaises surprises affluent : la map s’affiche de nouveau après avoir été masquée mais sans ses pins. Je dois bouger mon viewport pour les faire réapparaitre : c’est cassé.

L’enfer des tests

C’est à ce moment que les vrais ennuis commencent : si le bug peut paraître simple, le tester correctement et lui trouver un correctif l’est beaucoup moins. En effet, le noeud du problème est que je n’ai pas accès à mon environnement de travail local depuis mon téléphone. Impossible donc de faire des tests à la volée en alternant entre mon éditeur et mon navigateur.

À ce stade, la seule solution que je trouve, si on peut l’appeler ainsi, est de déployer mes correctifs quasiment à l’aveugle sur un environnement accessible en ligne et de les tester sur mobile. Lent, illogique (voire risqué) et peu efficace : j’ai vite abandonné.

J’ai ensuite tenté de configurer un proxy sur ma machine pour accéder à mon environnement local depuis mon téléphone. Même si j’ai bien pu me connecter au proxy, j’ai eu bien du mal ensuite à accéder à mes vhosts (de type « projet.local ») : j’ai abandonné aussi.

ngrok : youpi

Après une petite session de recherche Google j’ai fini par tomber sur un excellent outil : ngrok. Son concept est simple : créer un tunnel sécurisé entre Internet et un port sur votre machine en local. Ô joie, ça fonctionne du tonnerre et c’est on ne peut plus simple !

L’installation et la mise en place se fait en très peu de temps :

• Installer le package via NPM

npm install ngrok -g

• Créer le tunnel vers votre projet (ici un vhost)

ngrok http -host-header=projet.local 80

C’est tout ! ngrok ouvre un terminal dans votre console avec toutes les informations sur votre tunnel :

Je peux désormais accéder à mon environnement local depuis mon téléphone en passant par l’adresse : http://5add54d5.ngrok.io

Mon workflow revit : j’ai résolu le bug de la Google Map en dix minutes. CTRL+S sur mon éditeur, je rafraichis la page sur mon mobile et je vois mes modifications.

Note : pour optimiser encore davantage le debugging, je branche mon téléphone Android en USB sur ma machine. Ensuite, sur mon navigateur desktop via chrome://inspect/#devices, je peux voir directement l’écran de mon téléphone et accéder à la console pour modifier du CSS ou vérifier mes logs. Plus besoin de toucher à mon téléphone pour corriger les bugs natifs !

Aller plus loin avec ngrok

Les possibilités de ngrok sont nombreuses. En voici quelques unes :

Protéger son tunnel par un mot de passe

Pour avoir l’esprit tranquille pendant vos tests, l’argument auth permet d’ajouter un identifiant et un mot de passe pour accéder à votre tunnel :

ngrok http -auth="identifiant:mdp" quick.local:80

Vérifier ses requêtes

Lorsque ngrok démarre, il lance aussi sur votre machine un dashboard bien pratique qui donne tout un tas d’informations sur les requêtes qui passent dans votre tunnel : entêtes HTTP, données de formulaires, données JSON/XML…

Version payante de ngrok

ngrok dispose de plusieurs forfaits qui permettent notamment d’avoir des noms de domaines réservés, une whitelist ou des adresses TCP réservées. Par exemple, vous pouvez choisir le nom de domaine adfab.ngrok.io au lieu de 5add54d5.ngrok.io. Pratique pour se servir de ngrok comme outil de démo par exemple (ou si vous commencez à en avoir marre d’écrire des choses comme « 5add54d5 » avec votre clavier tactile).

À vous !

C’est tout pour cette revue de ngrok. Si vous avez d’autres solutions pour optimiser le debugging mobile, n’hésitez pas à commenter cet article !