adobe edge inspect

L’affichage mobile sur vrai mobile, et sur un navigateur desktop qui se fait passer pour un mobile n’est pas toujours le même. Mais alors comment explorer et modifier le code source d’un site directement sur le mobile ?

Si les utilisateurs de Mac OSX et iPhone n’auront aucun mal à débuguer leur site mobile en lançant Safari et en utilisant l’option « développement » prévu à cet effet, pour les autres ce sera plus compliqué. Il faudra utiliser des outils spécifiques, comme « Adobe Edge Inspect CC ».

« Adobe Edge Inspect CC » permet de naviguer de façon synchronisée entre un site sur PC, et ce même site sur l’ensemble des mobiles ou tablettes que vous voudrez. La version gratuite n’inclue qu’un seul device, mais cela suffit pour des tests sur Android et iPhone.

Vous pourrez simplement accéder au code source et aux différents éléments de la page du mobile, mais également voir en un instant les bugs d’affichage sur une flotte complète de devices.

adobe edge inspect flotte

Comment installer « Adobe Edge Inspect CC »

Alors là, ce n’est pas tout simple… Mais ne vous en faites pas, je suis là. Il faudra installer 3 éléments :

Une fois tout ça installé, lancez les différents éléments de synchronisation :

  • Lancez l’application sur votre PC
  • Redémarrez votre navigateur (Chrome) et cliquez sur l’icône « In » en haut à gauche
  • Lancez l’application sur votre mobile (celui-ci doit être connecté soit par câble, soit sur le même réseau wifi).

Pour finir :

  • Trouvez l’adresse IP de votre PC
  • Sur votre mobile appuyez sur le « + » pour l’ajouter manuellement.
  • Une fois l’adresse ajoutée, une code apparaîtra sur le mobile
  • Sur votre ordinateur, l’extension Chrome a trouvé votre smartphone et affiche un champ pour renseigner le code du mobile.
  • Renseignez le et cochez la case pour valider
  • Vos deux complices sont maintenant « pairés »

Et voilà ! Il vous suffit maintenant de naviguer via votre ordinateur pour voir s’afficher les pages sur mobile.

adobe edge inspect extension chrome

Comment utiliser « Adobe Edge Inspect CC » pour l’inspection de code

Sur l’extension, il suffit de trouver la ligne correspondant à votre mobile, puis de cliquer sur le double chevrons (<>). Une page apparaît avec un onglet éléments. Cliquez dessus et commencez votre analyse. ;)

adobe edge inspect exemple

Vous aimez cet article ? Partagez le.

By TechRevolutions| No Comment | Tutoriaux
1