Lors du développement d’un site, que ce soit du côté front-end ou back-end, on ne peut se passer de l’« inspector » de nos navigateurs favoris. Mais quid de l’utilisation de ces outils depuis votre Smartphone ? C’est ce que nous vous proposons de découvrir au travers de cet article.
Il y a toujours des alternatives pour inspecter votre site sur mobile :
- Simuler l’affichage mobile en changeant l’user-agent et les dimensions du viewport dans votre navigateur desktop.
- Weinre, un « web inspector » issu du projet cordova (ou phonegap) pour mobile qui nécessite l’ajout d’un fichier javascript dans votre code et dont la manipulation peut paraitre complexe pour les novices.
- Edge inspect
- …
Apple, depuis quelques temps, permet d’inspecter votre « iDevice » en le branchant directement sur votre mac et en l’inspectant depuis Safari.
Depuis Aout 2013, Google a répondu en sortant son propre inspecteur dédié à Android. Et ça, ça fait plaisir !
Installation
Prérequis:
- Avoir Chrome 28+ sur votre desktop et votre mobile Android
- Installer les drivers USB spécifiques à votre mobile (http://developer.android.com/tools/extras/oem-usb.html)
- Installer l’extension Chrome ADB (https://chrome.google.com/webstore/detail/dpngiggdglpdnjdoaefidgiigpemgage)
- Activer l’option « débogage USB » sur votre android (paramètres > Options pour les développeurs)
Après avoir connecté (usb) votre mobile Android sur votre poste de développement, ouvrez Chrome sur votre mobile et activez l’option:
paramètres > Outils de développement > Débogage USB pour le Web
Attention: Il s’agit bien des paramètres de Chrome sur votre mobile pour ce dernier point, pas du système Android!
Utilisation
Sur votre poste de développement, démarrez ADB depuis l’extension Chrome. L’icone android de l’extension ADB devrait s’afficher en vert si votre mobile est correctement détecté.
Toujours dans l’extension ADB, cliquez maintenant sur « View Inspection Targets ».
Vous pouvez désormais inspecter le site affiché dans votre navigateur Chrome de votre Android directement dans l’inspecteur desktop! C’est pas génial ?
Il se peut que l’inspecteur soit légérement plus lent que d’habitude, mais vous pourrez utiliser tous les onglets de l’inspecteur Chrome (éléments, network, timeline, console, etc). Ainsi il vous sera désormais très facile de corriger les dernier calage de votre Web App 😉
