Déboguer une page web sur un appareil mobile

On se rend parfois compte qu'une application web s'exécute parfaitement sur ordinateur mais pas sur son appareil mobile. Malheureusement, les navigateurs mobiles n'offrent pas de console développeur. Ce qui est compréhensible vu la taille réduite des écrans.

Que faire pour comprendre d'où vient le bug, qu'il s'agisse d'un problème d'affichage ou d'autre chose ?

Il est possible sous Android (4.0 et plus) de débugger le site web lorsqu'il s'affiche sur le téléphone. Pour cela, il faut :

1. Un appareil Android qui autorise le débogage USB, option activable dans le menu développeurs dans les réglages (pour activer les options développeurs, Aller dans Réglages -> A propos du téléphone -> Cliquer plusieurs fois sur le numéro de build, un message indiquera alors que le mode développeur a été activé)
2. Connecter le téléphone à l'ordinateur avec un câble USB. Il faut s'assurer que le téléphone est bien reconnu. Selon le modèle il arrive parfois qu'il faille installer un driver spécifique.
3. Lancer Chrome (version 32 au moins) sur son ordinateur et se rendre à la page chrome://inspect
4. Un message devrait alors s'afficher sur le téléphone demandant si l'on veut bien autoriser le débogage USB avec l'ordinateur. Il faut cliquer sur OK.

Il est dès maintenant possible d'accéder à la console des pages web visitée par le téléphone à travers Chrome depuis son ordinateur :

Il existe un outil similaire permettant de déboguer ses applications web avec Firefox mais la prédominance du navigateur Chrome sur les téléphones Android rend le déboguage avec Firefox un peu moins pertinent.