Chrome Screencast : Déboguer le rendu mobile d'un site responsive

Chrome Screencast : Déboguer le rendu mobile d'un site responsive


Sommaire

Depuis quelques mois, le navigateur Google Chrome permet, dans ses fonctionnalités expérimentales, de profiter des DevTools pour les téléphones et tablettes Android.

Pour faire simple, voilà ce que j'ai sur ma tablette Nexus 7.

Screenshot Nexus 7

Sur mon ordinateur, après avoir activé le Chrome Screencast, je peux faire de l'édition live et contrôler le rendu sur la tablette :

Screenshot Google Chrome Screencast

Pour activer ces fonctionnalités :

  • Sur votre ordinateur, allez sur chrome://flags/ et cliquez :
    • Activer le débogage à distance sur USB et
    • Activer les expérimentations dans les outils de développement.
  • Sur la tablette, il faut avoir le Débogage USB activé. Pour ce faire :
    • allez dans Paramètres puis À propos de la tablette (ou du téléphone, je suppose) et tapez plusieurs fois sur Numéro de build. Un message indiquera que vous êtes/devenez développeur.
    • Apparait alors au dessus de À propos de la tablette une nouvelle ligne : Options pour les développeurs et vous y trouverez l'option à cocher : Débogage USB.
  • Ensuite, connectez votre tablette ou téléphone en USB, et ouvrez Google Chrome.
  • Sur la tablette, il faut accepter votre ordinateur en validant la fenêtre d'alerte.

Et c'est bon ! Il ne vous reste plus qu'à aller sur chrome://inspect/ pour voir apparaitre les pages ouvertes sur le périphérique :

Google inspect screencast

Google-toggle-screencast Et à cliquer sur inspect. Vous trouverez en bas à gauche de de la fenètre DevTools qui s'ouvre un bouton *Toggle Screencast *:

Retrouvez encore plus de fonctionnalités avancées dans cet excellent article de Paul Irish pour HTML5Rocks : Chrome DevTools for Mobile: Screencast and Emulation

Ce site n'a pas été évalué

Auteur(s)

Laurent Ghirardotti

Developer @ Eleven-labs

Voir le profil

Vous souhaitez en savoir plus sur le sujet ?
Organisons un échange !

Notre équipe d'experts répond à toutes vos questions.

Nous contacter

Découvrez nos autres contenus dans le même thème

À la découverte de l'Anchor positioning API

La nouvelle Anchor positioning API en CSS

L'Anchor positioning API est arrivée en CSS depuis quelques mois. Expérimentale et uniquement disponible à ce jour pour les navigateurs basés sur Chromium, elle est tout de même très intéressante pour lier des éléments entre eux et répondre en CSS à des problématiques qui ne pouvaient se résoudre qu'en JavaScript.