Google Chrome : un inspecteur d’élément responsive avancé

Depuis quelques temps, la version 38 de Chrome est fonctionnelle. A première vue, cette version devrait être plus qu’à la hauteur pour les intégrations responsives.
Eh oui ! L’inspecteur d’élément a fait un grand pas en avant et dépasse même les fonctionnalités proposées par la vue responsive de Firefox.
D’autant plus qu’il y a les supports du couple « srcset + sizes » et .
Ça en fait des bonnes nouvelles pour le responsive.

L’activation

De la même façon que pour les versions précédentes, l’activation de l’inspecteur d’élément de Chrome se fait par la touche F12 du clavier ou un clic droite sur la souris puis « inspecter l’élément » et enfin un clic sur le bouton « Toggle device mode » qui est juste à côté du bouton « Elements ».

Cela déclenche la vue responsive de Chrome avec toutes les nouvelles fonctionnalités offertes par la version38

Toggle device mode

Les fonctionnalités

Très intéressant cette liste de fonctionnalités que nous propose cette nouvelle mouture de l’inspecteur d’éléments.
Hormis celles qui permettent le redimensionnement d’une page au sein du navigateur avec bien évidemment toutes les mesures et règles associées, on note trois avancées importantes qui nous sont offertes :

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

Throttle

Concernant cette option, celle-ci permet la simulation des vitesses de connexion qui sont en général plus faibles dans le but de tester la rapidité d’affichage dans diverses conditions réelles.
Il est même possible de tester les pages en mode « Hors ligne » ou « Offline » si vous le préférez.

Media Queries

On peut trouver sur la gauche de l’outil, un bouton portant le nom de « Media Queries ».
Celui-ci permet l’affichage des points de rupture ou Breakpoints qui sont actuellement utilisés sur la page.
Le bouton offre également la possibilité de passer d’un Breakpoint à un autre avec un simple clic.

media query avec chrome

Voir ici la video

Répondre