Découvrez l'inspecteur d'élément responsive de Google Chrome

Astuce par (Intégrateur du Dimanche, Strasbourg)
Créé le (42802 lectures)
Tags : outil, responsive, rwd, inspecteur

Google vient de sortir la version 38 de son navigateur Chrome il y a quelques jours et celle-ci s'annonce déjà palpitante pour nos intégrations responsives : outre les supports de <picture> et du couple "srcset + sizes", son inspecteur d'élément fait un énorme pas en avant et se dépasse à présent les fonctionnalités offertes par la vue responsive de Mozilla Firefox.

chrome responsive 1

Activation

Il suffit d'activer l'Inspecteur d'élément de Google Chrome de la façon habituelle (touche F12 ou clic droit + "inspecter l'élément"), puis de cliquer sur le bouton "Toggle device mode", juste à côté du bouton "Elements".

Cette action déclenche la vue responsive de Chrome avec toutes ses nouvelles fonctionnalités bien pratiques.

Chrome responsive activation

Fonctionnalités

La liste des fonctionnalités offertes par cette nouvelle mouture de l'inspecteur d'éléments est vraiment intéressante. 

Outre le fait de disposer d'une poignée permettant de redimensionner la page au sein de son navigateur, avec - bien entendu - toutes les règles et mesures associées, il est à présent possible de bénéficier de trois avancées importantes :

  • Throttle (vitesse de connexion)
  • Choix du device
  • Media Queries

Throttle

Cette option permet de simuler des vitesses de connexion généralement plus faibles afin de tester la rapidité d'affichage dans diverses conditions réelles.

Il est même possible de tester ses pages en mode offline.

chrome throttle

Choix du device

La liste des périphériques est pour le moins impressionnante, même s'il ne s'agit que d'une simulation et non une véritable émulation.

De plus, en choisissant un device, Chrome vous informera de ses dimensions utilisables (pixels CSS) ainsi que de son pixel-ratio, un peu comme le fait l'outil mydevice.io

chrome device

Media Queries

Sur la gauche de l'outil, un bouton "Media Queries" permet d'afficher les breakpoints (points de rupture) actuellement employés sur la page, mais aussi de passer d'un breakpoint à un autre en un simple clic.

chrome media queries

Une vidéo pour finir

Parce que rien ne vaut une démonstration (même rapide), voici une vidéo concoctée par Stéphanie Walter :

voir la vidéo

Plutôt pas mal, non ?

Qu'en pensez-vous ? Est-ce suffisamment convaincant pour tourner le dos à d'autres navigateurs (je ne cite personne) pour vos tests rapides en responsive ?

Commentaires

jumarcial a dit le

Bonjour !
Quel est le theme / mode d'affichage de votre navigateur chrome ?

En tout cas voilà une màj intéressante !

oopinou a dit le

Appréciais bien la fonctionnalité mais je la trouvais un peu planqué dans les options et pas pratique à l'utilisation.
Cette nouvelle interface est une révolution, et le coup de la vitesse du réseau, c'est vraiment génial !

TFraquet a dit le

Je change officiellement de navigateur, GO pour Chrome, la gestion des media queries, du choix du smartphone, c'est génial, tout est mieux que Firefox.

Raphael a dit le

@jumarcial : Bonjour, je n'ai aucun thème ni aucun mode d'affichage spécifique sur Chrome.

Stéphanie W. a dit le

@jumarcial @Raphael : si la question concerne la video elle a été prise avec un thème graphique noir sur Chrome, mais ça n'a rien à voir avec le nouvel outil ^^

erwan21a a dit le

C'est un bien bel outil, bien complet. J'y ai déjà repéré des bugs mais Google est proche d'avoir créé un outil indispensable pour le dev.

Contrairement à toi TFraquet, je vais malgré cet outil continuer à utiliser en priorité FF. Ma préoccupation essentielle est le couple HTML/CSS et l'ergonomie du débogueur de FF est vraiment encore largement au dessus. Je trouve d'ailleurs étonnant que l'équipe de Chrome ne se penche pas sur ce sujet sur leur outil. Ils auraient peu de chose à modifier pour mettre la concurrence totalement hors-jeu. ^^

jmr a dit le

Merci pour l'astuce, c'est vrai que maintenant la question se pose de favoriser FF ou Chrome pour le dev... dans le doute les deux !

fantomette a dit le

Le seul problème est que google chrome 38 est incompatible avec YouCam de Cyberlink...

Neitsabes a dit le

Bonjour et merci pour l'astuce.
Pour ceux qui ne souhaite pas nourrir les BDD de Ggle, cet outils est il disponible ou intégrable à Chromium ?
Sinon j'attendrai une maj de Ff...
Superbes ressources qu'Alsacréation !

designer1959 a dit le

Merci Neitsabes de pointer cette question si importante et qui le deviendra plus encore plus nous nous livrerons pieds et poings liés à la plus grande entreprise de surveillance et de contrôle jamais conçue. Un bel outil pour le développement, c'est une bonne chose, mais à quel prix en termes de liberté ?