Retour

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

10 févr. 2014
1mn

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é


Articles sur le même thème

Découvrez Eleven Labs

L'ESN qui fait décoller vos projets web, mobile & data !

Voir le site web

Contact

Eleven Labs - Paris

102, rue du Faubourg Saint Honoré

75008 Paris

Eleven Labs - Nantes

40, rue la Tour d'Auvergne

44200 Nantes

Eleven Labs - Montréal

1155, Metcalfe St Suite 1500

Montréal, QC H3B 2V6, Canada