Chrome dev tools

Tester facilement son site web pour mobiles et tablettes en local avec Chrome

Introduction

Il est devenu bien rare, et c'est une bonne chose, de développer un site web ayant une taille fixe à l'écran. En effet, avec l'avènement des smartphones et des tablettes telles l'iPad, on ne peut plus créer un site en ne ciblant que les écrans d'ordinateurs classiques.

D'une part, de plus en plus de personnes ‘consomment’ du web avec un appareil nomade. Si l'on en croit certaines études, quasiement la moitié des pages web vues le sont sur un mobile ou une tablette. D'ici 2014, ce sera devenu la majorité des cas. <!– more –>

Bien que les smartphones et tablettes soient parfaitement capables d'afficher un site classique, cela entraîne de nombreux désagréments. Le plus important étant les manipulations de zoom et dézoom que l'on est forcé d'effectuer pour naviguer dans une page conçue plus grande que l'écran sur lequel elle s'affiche.

Et aujourd'hui, les écrans, il y en des centaines de différents. On va d'un mobile basique chinois à bas prix affichant un portrait de 380x200 jusqu'à des tablettes affichant de superbes 1280x800, en passant par de multiples tailles, ratios et densités, jusqu'aux écrans 27 ou 30 pouces des PC ou iMac dernier cri, présentant des résolutions du type 2560x1600…

Est donc apparue récemment l'ère du ‘Responsive Web Design’, initiée par le développeur Ethan Marcotte, et qui dit en substance : au lieu de coder la taille des éléments en pixels il faut utiliser des valeurs relatives ou des pourcentages, et utiliser les Media Queries de CSS3 pour réorganiser ou reformater les éléments en fonction de la taille/densité de l'écran.

Il y a de nombreuses manières de procéder, et autant de noms pour les décrire : MultiCSS, Fluid, Elastic, etc.

Cela entraîne des difficultés pour le développement : il fallait déjà tester son site dans tous les navigateurs, il faut maintenant le tester dans les différents formats auxquels il devra s'adapter. Mais impossible d'acheter tous les appareils du marché… de plus, ces étapes de test seraient bien trop contraignantes et trop longues à mettre en oeuvre.

Il existe déjà des sites (ResponsivePx, RWDTool, QuirkTools, ScreenQueries, etc) permettant de redimensionner la fenêtre d'un navigateur de manière à simuler différents appareils référencés, comme les iPhones, iPads, Galaxy Nexus, etc. Mais il y a de nombreuses contraintes, comme l'obligation de leur fournir une URL pointant vers le site à tester.

Or tout le monde ne développe pas sur des serveurs accessibles de l'extérieur, et heureusement. Il est de toute façon très désagréable et somme toute illogique de devoir mettre son site en ligne pour pouvoir tester son affichage à de nombreux formats.

Je vais vous présenter aujourd'hui une fonction toute simple incluse dans le navigateur Chrome de Google, qui va vous permettre de tester votre site en local, sans passer par des services externes et sans manipuler d'appareils.

Chrome Dev Tools

Dans le désormais célèbre navigateur internet proposé par Google, Chrome, il y a une fonction bien connue des développeurs, ce sont les “Chrome Dev Tools”.

Similaires à ce que proposait FireBug pour Firefox, ils sont en fait présents dans Webkit, le moteur qui équipe Chrome mais aussi Safari, Safari Mobile et de nombreux navigateurs de smartphones. Ces outils sont extrêmement utiles et indispensables, déjà, en temps normal.

Mais une fonction nous intéresse particulièrement : la simulation de navigateur.

Grâce aux Dev Tools, Chrome peut donc simuler l'affichage de nombreux appareils, prédéfinis ou de la taille que l'on indique.

L'avantage, c'est que l'on peut ouvrir plusieurs fenêtres ou onglets, chacun à une taille différente.

Il faut se rendre dans le menu Afffichage, Options pour les développeurs, Outils de développement, ou utiliser le raccourci clavier ALT+COMMAND+I (et pour Windows ?).

Cliquer sur le symbole de roue dentée en bas à droite de la mini-fenêtre qui vient de s'ouvrir pour aller dans les préférences des Dev Tools, puis dans le panneau qui apparaît sélectionner l'onglet Overrides.

Vous pouvez choisir un “User-Agent” prédéfini tel un iPhone ou iPad, et vous pouvez également choisir vous-même la taille d'écran à simuler. Ensuite Chrome redimensionne sa fenêtre selon le format que vous avez choisi.

Associé à LiveReload et/ou Compass, c'est redoutable ! Voici ma proposition de fonctionnement.

Organisation

Outils : Chrome Dev Tools, MAMP, LiveReload (ou Live.js). Je recommande également Compass (ou Less, éventuellement).

Disons que vous utilisez un ensemble classique d'outils : éditeur de code + navigateur + serveur local (MAMP).

Vous avez probablement une fenêtre du navigateur pointant vers votre http://localhost:8888/monsite et votre éditeur à côté (ou par-dessus si vous êtes sur un écran de portable).

A chaque modification de votre code, vous allez sur le navigateur, rafraichissez la fenêtre et observez le résultat. Si vous avez d'autres fenêtres ouvertes à des tailles différentes il faut également aller sur chacune d'elle et rafraichir la page.

De plus, attention à ne pas accidentellement modifier la taille de la fenêtre d'un malheureux coup de souris… quand ce n'est pas le navigateur lui-même qui vous trompe et ne comptant pas (ou en les comptant par erreur) les scrollbars ou autres barres de recherche customisées.

Il y a une meilleure solution, réalisée en quelques clics :

Enjoy

C'est tout !

Dorénavant, à chaque fois que vous enregistrerez votre code (CMD+S), tous les onglets ouverts sur votre site, chacun de taille différente, se mettront automatiquement à jour, vous permettant d'observer le rendu de vos travaux sur une multitude de tailles d'écran différentes sans lever le petit doigt du clavier…

Auteur: Eric Dejonckheere