Tester du responsive sous Chrome sans plugin : 2 astuces

Stéphanie Walter

Senior UX Designer - Mobile Expert

Senior UX Designer. Mobile Expert. Public speaker. Blog writer. Google Dev Expert Product Design (GDE)

Follow on Twitter

Ce contenu a été rédigé il y a 6 années. Il se peut qu'il ne soit plus à jour.

Beaucoup connaissent déjà le CTRL + SHIFT + M pour passer en mode « teste responsive » sur Firefox, mais saviez vous que Chrome propose plus ou moins un équivalent natif sans avoir à installer un seul plugin ? Ce qui suit à été testé sur Chrome 28+.

Astuce 1: l’inspecteur et le mode « règle »

Lorsque vous ouvrez un site et que vous ouvrez l’inspecteur, si vous redimensionnez votre fenêtre vous voyez désormais apparaitre une petite règle horizontale et verticale sur les côtés de votre écran. Elle vous permet de donner à votre navigateur la taille exacte que vous souhaitez tester.

Tester le responsive sur Chrome avec l'inspecteur et la règle

L’inconvénient de ce mode par contre, est qu’il faut redimensionner tout le navigateur, et donc rendre la barre d’adresse illisible et l’accès à vos plugins impossible. Ce qui m’amène à l’astuce 2.

Astuce 2 :  l’option « Device metrics » dans overrides

En restant toujours dans l’inspecteur cliquez sur la petite roue en bas à droite. Vous avez alors accès aux options générales, mais aussi aux options d’overrides. La première case permet de change le UserAgent de votre navigateur et vous faire passer pour un iPhone par exemple.

C’est la seconde option qui va nous intéresser à savoir « Device metrics ». En cochant cette option, vous passez dans un mode « responsive » qui vous permet de tester votre site sur une largeur et hauteur donnée, tout en gardant la taille complète du navigateur. Le bouton à droite permet de passer du mode paysage au mode portrait, le tout sans plugin supplémentaire.

Le mode "Device Metrics" de Chrome

Conclusion

Ces deux petites astuces sont bien pratiques, mais pour moi elles sont loin d’égalées pour le moment l’option proposée par Firefox. Avec le « Device metrics », impossible (pour le moment ?) de jouer avec la taille comme on peut le faire dans Firefox à l’aide d’une poignée sur le côté, il va vous falloir donner des valeurs fixes. L’utilisation dans Chrome est également moins « rapide » d’accès, on est loin du CTRL+SHIFT+M, mais c’est un bon début pour faciliter les tests de site responsive sous Webkit  Blink :)

Enfin si vous souhaitez émuler de « vrais » appareils je vous conseil Mobile Emulators & Simulators: The Ultimate Guide.

Le mode CTRL + SHIFT + MAJ sur Firefox

 

Vous souhaitez des conseils en ergonomie ou en expérience utilisateur ? Un design de site, d’interface ou d’application mobile ? Envie de travailler ensemble ou de m’inviter à donner une conférence ? Consultez mes réalisations ou contactez moi directement.

17 réflexions au sujet de « Tester du responsive sous Chrome sans plugin : 2 astuces »

  1. Bonjour,

    article franchement intéressant ! J’ai quand même une petite question : la deuxième solution que tu proposes sous Chrome est-elle réellement fiable ? Je demande ça car on m’a souvent dit que le mieux était de directement tester via une tablette et / ou un smartphone. Logique, certes, mais on n’a pas tous les moyens de s’acheter les deux appareils uniquement pour tester ses sites web en responsive. :)

    Sinon, merci pour l’astuce sous Firefox.

    Au plaisir de relire des articles de ce genre.

    • Bonjour Clément :)

      Oui, il vaut mieux tester sur une vrai tablette ou mobile le produit final. Mais lors de la phase d’intégration par exemple, ça peut-être très vite laborieux de changer une ligne de CSS, mettre en ligne, tester sur l’appareil, rajouter une ligne, etc. Même s’il est possible par exemple d’avoir un serveur local, ou d’utiliser des outils pour le faire, c’est souvent plus rapide de faire des premiers tests pour la mise en page, les icônes depuis un navigateur avec le code ouvert à côté, avant d’ensuite tester sur un vrai appareil. Les deux sont donc complémentaires :)

      • Avec le peu de responsive que j’ai fait, je suis un débutant dans ce domaine, je suis entièrement d’accord sur le fait que c’est plus « simple » de directement tester depuis son / ses navigateur(s) web plutôt que de d’uploader sur le ftp, ckecker sur sa tablette / smartphone, corriger, etc.
        On est bien d’accord que ce genre d’outil : http://screenqueri.es/index.php n’est pas vraiment adapté ? Si tu n’as ni tablette et ni smartphone (mon cas, honte à moi :p), tester avec l’outil natif de Firefox semble être la meilleur option ?

        • Screenqueri.es est pas mal du tout je m’en servait pour tester sur webkit avant. L’avantage des systèmes dans la console c’est qu’en plus tu as accès au CSS. Ensuite, l’essentiel est de tester, quelque soit le moyen au final, ça reste des outils, le meilleur est celui avec lequel on est le plus à l’aise, quoi qu’en disent les 150 articles qui présentent différents outils ;)
          Pour tester du « natif » au pire tu peux installer le SDK Android (long, fastidieux) et émuler un téléphone, tu peux en faire de même avec le SDK Apple (mais il faut un mac). Opera propose lui carrément un simulateur mobile. Si les simulateurs intéressent je dois avoir au fin fond des liens de la semaine quelques liens utiles

  2.  » mais c’est un bon début pour faciliter les tests de site responsive sous Webkit (Blink bientôt?) »

    Juste pour info avec la version 28 de Chrome on est bien sous Blink : chrome://version/

    Sinon, le fait de redimensionner la fenêtre marche déjà pour avoir un aperçu du responsive, non ?

    • Oui ça marche, mais si tu veux placer tes points de rupture il te faut bien avoir une règle pour savoir à quel combien de pixel il faut placer la media-querie (astuce 1) et surtout, ça veut dire réduire la barre d’adresse, les plugins, etc. C’est pour ça que je garde une préférence pour la version de Firefox pour le moment

  3. Bonjour Stéphanie et merci pour cet article.
    Je me permets de conseiller un autre outil dans le même genre : ↔ Resizer.
    C’est en fait un petit script JS qui est à placer en bookmark, sur lequel il suffit de cliquer pour voir s’afficher une barre avec pas mal d’options. Au delà du fait que celle-ci soit relativement jolie, je trouve l’outil assez pratique;

    • Merci Christophe. En fait le but était justement d’éviter de devoir utiliser un plugin, bookmarklet etc. et voir ce que les navigateurs nous proposent en « natif » :)

  4. Ping : Tester du responsive sous Chrome sans plugin : ...

  5. Ping : Des pixels et du code #72 - Stéphanie Walter, Graphiste - Designer web et mobile

  6. Merci Stéphanie pour cette prez !! Merci d’ailleurs en général pour tout le boulot que tu fais dans ce blog !
    C’est vrai que ces outils sont utiles dans une première approche, après je dirai que pour le moment rien ne vaut le test sur l’appareil en lui même.