web-dev-qa-db-fra.com

Comment inspecter un élément dans un navigateur Android?

Je souhaite inspecter les éléments CSS/HTML de mon site Web dans mon Android.

Cependant, ce sera via un smartphone ou le Android SDK.

Quelle est la meilleure façon de le faire?

firebuggoogle-chrome-devtools
41
alnassre

Chrome sur Android permet d'utiliser les outils de développement Chrome sur le bureau pour inspecter le code HTML chargé à partir de l'application Chrome sur la console Android périphérique.

Voir: https://developers.google.com/chrome-developer-tools/docs/remote-debugging

22
Michael Aaron Safyan

J'ai dû déboguer un site pour le navigateur natif Android et je suis arrivé ici. J'ai donc essayé weinre sur un OS X 10.9 (en tant que serveur weinre) avec Firefox 30.0 (client weinre) et un Android 4.1.2 (cible). Je suis vraiment très surpris du résultat.

  1. Téléchargez et installez le noeud d'exécution à partir de http://nodejs.org/download/
  2. Installez weinre: Sudo npm -g install weinre
  3. Découvrez votre adresse IP actuelle dans Paramètres> Réseau.
  4. Configurez un serveur Web sur votre machine: weinre --boundHost YOUR.IP.ADDRESS.HERE
  5. Dans votre navigateur, appelez: http://YOUR.IP.ADRESS.HERE:8080
  6. Vous verrez un extrait de script, placez-le sur votre site: <script src="http://YOUR.IP.ADDRESS.HERE:8080/target/target-script-min.js"></script>
  7. Ouvrez le client de débogage dans votre navigateur local: http://YOUR.IP.ADDRESS.HERE:8080/client
  8. Enfin sur votre Android: appelez le site que vous voulez inspecter (celui avec le script à l'intérieur) et voyez comment il apparaît comme "Cible" dans votre navigateur local. Vous pouvez maintenant ouvrir "Elements" ou ce que vous voulez.

Peut-être que 8080 n'est pas votre port par défaut. Ensuite, à l'étape 4, vous devez appeler weinre --httpPort YOURPORT --boundHost YOUR.IP.ADRESS.HERE.

Et je ne me souviens pas exactement quand c'était, peut-être quelque part après l'étape 5, j'ai dû accepter les connexions entrantes Prompt, bien sûr.

:) Bon débogage

P.S. Je suis toujours dépassé par la qualité des résultats. Même les éléments mettant en évidence le travail O_O °

34
leymannx

Vous pouvez inspecter les éléments d’un site Web dans votre Android appareil à l’aide de Chrome.

Ouvrez votre navigateur Chrome et accédez au site Web que vous souhaitez inspecter.

Allez dans la barre d'adresse et tapez "view-source:" avant le "HTTP" et rechargez la page.

Tous les éléments de la page seront affichés.

10
maa