Environnement de debug de site web mobile avec Chrome

Je me suis mis en place un environnement de développement et de debug de sites web mobiles avec Chrome. Je ne suis pas arrivé au même résultat avec Firefox, je réessayerai plus tard.

Dans un premier temps, il faut que le mode "développeur" soit activé sur le téléphone portable (Android). Avec Android 7.0, il faut aller dans "à propos de l'appareil", puis "Infos logiciel", puis appuyer plusieurs fois sur "Numéro de version" pour activer le mode développeur. Ensuite, il faut aller dans les "Options de développement" et activer le "Débogage USB".

Ensuite, toujours sur le téléphone, dans les paramètres avancés du réseau Wifi, aller sur "Proxy", choisir "Manuel", entrer "localhost" et un numéro de port NDP à conserver précieusement. Si vous souhaitez utiliser votre téléphone normalement, il ne faudra pas oublier de supprimer ces réglages :)

Ensuite, sur votre machine de développement, en supposant que vous utilisiez Apache2, vous ajouter la directive Listen NDP au fichier /etc/apache2/ports.conf. Si vous avez déjà un hôte virtuel pour votre site, du genre dev.monsite, vous copiez-coller les règles en n'oubliant pas d'ajouter le port NDP. Ça peut donner quelque chose du genre

<VirtualHost *:80>
... Mes supers directives
</VirtualHost>
<VirtualHost *:NDP>
... Mes supers directives
</VirtualHost>

On redémarre Apache2... et on lance Chrome (ou Chromium, ça marche aussi) Dans les outils de développement, il y a "remote devices". On active le "Port forwarding". À gauche on met juste le NDP, et à droite dev.monsite:NDP... Et c'est parti !