• Home
  • Nous contacter

Le blog d'Adfab

Le blog d'Adfab

Le blog d'Adfab

Le blog d'Adfab
Mobile Outils

Inspecter un site sur Android depuis Chrome

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 😉

03/02/2014 16 MIN READ BY: Mikael L'HARIDON 0 COMMENT
SHARE
LIRE LA SUITE

Mikael L'HARIDON

Unité de mesure CSS : REM

Développer ses applications Phonegap sur son navigateur

VOUS POURRIEZ AIMER

Mobile Cordova et limites des web workers

Mobile La guerre des OS mobile

Outils Création d’une extension chrome simplissime « keyboardClicker »

Outils Créer un package pour Composer avec Github et Packagist – Partie 1

e-Commerce Outils Magento plugin for NetBeans IDE (part. 1)

Outils Les doublures de test dans PHPUnit

A propos d’Adfab

Nous sommes un studio de production digitales et d’innovation digitales au service des agences et des annonceurs
Nous recherchons le scintillement dans les regards et le plaisir de réalisations sur-performantes
Nous sommes techno-agnostiques
Nous sommes Adfab

Le blog d'Adfab
Copyright © 2018 Adfab Connect