Inspecter les éléments d’un site depuis votre iPad

Le responsive, quelle histoire…

On le promet à nos clients et on donne tout pour aboutir à un site qui l’est parfaitement.
Heureusement, c’est une chose aisée si on utilise les bons outils.
Ces derniers, nous ne les avions pas avant d’être confrontés à un petit soucis de CSS.

Voici ce que notre navigateur (Chrome) nous montrait en se mettant à la place d’un iPad:
chrome macbook
Et voici ce que notre iPad nous montrait (en étant lui même ^^)
chrome ipad
Bizarre, n’est ce pas? Et plutôt ennuyeux à régler…
Nous nous sommes donc mis en quête d’un moyen d’afficher un inspecteur d’éléments sur iPad.
Deux choix s’offraient à nous:
  • Diet Coda (19,99€)
          Travaillant avec Coda sur nos ordinateurs, nous nous sommes d’abord penchés vers cette alternative… Malgré tout, nous nous sommes posés la question s’il n’existerait pas une solution gratuite 🙂
  • L’inspecteur web de Safari
          Oh joie! Voici une solution gratuite, facile à mettre en place et super à utiliser. Voici la marche à suivre:
  1. Sur votre iPad, activez l’inspecteur web dans Réglages / Safari / Avancé / Inspecteur web
  2. Branchez votre iPad à votre ordinateur
  3. Ouvrez Safari sur votre ordinateur
  4. Dans les préférences de Safari / Avancées cochez « Afficher le menu Développement dans la barre des menus » si cela n’est pas déjà fait
  5. Ouvrez votre page web à débugger depuis votre iPad
  6. Sur votre ordinateur, dans le menu Développement, sélectionnez votre iPad
  7. Et voilà, votre inspecteur web apparaît sur votre ordinateur
Grâce à l’outil « inspecter » vous pouvez sélectionner l’élément qui a un problème directement sur votre iPad! Génial non?

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *