Tester Son Responsive Design Facilement Avec Chrome ou Firefox

tester-responsive-design

Si vous ne savez pas ce qu’est le responsive design, ou que vous n’utilisez pas Chrome ou bien Firefox, vous pouvez passer votre chemin. Vous êtes encore là ? Bien, je vais vous faire découvrir une petite fonctionnalité peu connue de ces deux navigateurs.

Tout développeur web front (également appelé intégrateur) digne de ce nom sait ô combien il est important de nos jours d’offrir une version de son site web qui s’affiche aussi bien sur ordinateur que sur tablette ou téléphone. Le responsive design est une des meilleures façon de s’en assurer, mais cela nécessite de pouvoir tester son site web dans chaque résolution. Et Il y a pléthore de façons d’y parvenir:

  • la méthode barbare, à savoir redimensionner à la main son navigateur
  • utiliser un service en ligne dédié. Ces services permettent de simuler l’affichage de votre site sur différents appareils. Les plus connus sont The Responsinator, et le Responsive Tester de Matt Kersley. Ces sites sont pratiques mais nécessitent que votre site soit en ligne et accessible depuis internet
  • tester directement sur votre téléphone, tablette. Mais le problème du point précédent revient ici, donc pas moyen si vous travaillez localement
  • Utiliser une extension navigateur, comme le très bon Responsive Tester (pour Chrome)

Mais il y a plus simple. Une solution qui va vous permettre de tester votre responsive design directement dans votre navigateur, sans installer d’extension ou d’avoir à passer par un autre site, et qui fonctionne même si vous travaillez en local.

Tester son Responsive Design avec Chrome

Il vous faut ouvrir la console développeur (F12 sous Windows) et cliquer sur l’icône des paramètres:

Cliquez pour agrandir

Puis sélectionnez le menu Overrides et cochez Device metrics.

Cliquez pour agrandir

Vous pourrez ainsi modifier les valeurs dans les champs correspondant à la longueur et la hauteur de votre viewport (zone de visibilité). Le changement est instantané.

Tester son Responsive Design avec Firefox

Dans les versions pas trop anciennes de Firefox (pour l’exemple j’ai utilisé la 19), est intégré un outil similaire à celui de Chrome (je dirai même un peu mieux fait). Pour l’activer, il suffit d’appuyer sur Alt, si vous êtes sur Windows pour afficher le menu, et d’aller dans Outils > Développeur web et de sélectionner Vue Adaptative.

Cliquez pour agrandir

Vous verrez alors l’espace d’affichage du site se redimensionner, et vous pourrez choisir des résolutions standard depuis une liste déroulante ou modifier la résolution manuellement à l’aide de votre souris.

Cliquez pour agrandir


Voilà, vous pouvez virer de vos favoris les sites pour tester votre responsive design et désinstaller les extensions devenues inutiles à présent. Enfin sauf si vous êtes maniaque et que vous voulez tester votre responsive design sous toutes les coutures et de toutes les façon possible !


Sources: Hongkiat – MDN

Un commentaire à propos de ““Tester Son Responsive Design Facilement Avec Chrome ou Firefox”

  1. Murielle

    Merci de nous avoir partagé ces astuces. Comme on est de plus en plus nombreux à choisir des templates responsive pour nos sites, c’est toujours mieux de les tester et faire des améliorations si nécessaire. C’est une étape importante pour tous les entrepreneurs qui souhaitent un site performant.

Laisser un commentaire

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