Comme vous, des millions de personnes utilisent Chrome au quotidien pour surfer sur internet, convaincues par sa rapidité et sa fiabilité. Mais ce que vous ne saviez peut-être pas, c’est que le navigateur de Google peut se transformer en véritable boîte à outils pour les web designers.

En effet, le catalogue d’extensions de Chrome reflète bien sa grande popularité : avec une multitude d’add-ons en tous genres, la plate-forme permet aux utilisateurs de personnaliser leur navigateur de manière très poussée. Et cela vaut aussi pour les professionnels du design et du développement front-end ! Voici un petit tour d’horizon des meilleures extensions du Chrome Web Store pour votre métier.

CSS Peeper

Vous êtes tombé sous le charme d’une page web et vous souhaitez vous inspirer de son design pour vos propres créations ? CSS Peeper est fait pour vous ! Ce plug-in vous permet de visualiser et d’extraire le CSS de n’importe quelle page, sans avoir besoin de fouiller des centaines de lignes de code “à la main”.

Browserling

Tous les web designers le savent : l’affichage d’une page peut varier considérablement selon le navigateur utilisé. Pour vérifier que votre design tient la route, vous pouvez tester manuellement avec différents navigateurs, ou bien utiliser Browserling : cet add-on permet de comparer instantanément l’apparence d’un site sur les navigateurs les plus populaires (Chrome, Firefox, Safari, Opera, Internet Explorer…)

Sizzy

Sizzy est un outil incontournable pour le responsive design, puisqu’il vous permet de prévisualiser instantanément un site sur de nombreux supports. De quoi vous assurer que vos pages web sont aussi lisibles sur un ordinateur que sur un smartphone ou une tablette.

WhatFont

Une police d’écriture vous a tapé dans l’œil lors de vos pérégrinations sur internet ? Avec WhatFont, vous n’avez qu’à survoler le texte qui vous intéresse avec votre souris pour connaître la police utilisée, sa taille, son style et bien d’autres informations.

PerfectPixel

Il y a parfois un décalage plus ou moins flagrant entre la maquette originelle d’un site web et le résultat final. Heureusement, PerfectPixel vous aide à développer vos pages “au pixel près” ! L’extension permet d’afficher une image semi-transparente au-dessus du site en développement, ce qui permet de reproduire à l’identique votre modèle de base.

Web Developer

Web Developer est en quelque sorte le b.a.-ba du développement web sur Chrome : cet outil vous permet de visualiser le code source d’une page, de désactiver Javascript ou encore de cacher les images, tout cela en en un clin d’œil.

ColorZilla

Le choix et l’association des couleurs font partie intégrante du métier de webdesigner. À ce titre, ColorZilla est un outil basique mais très pratique, qui permet de prélever n’importe quelle couleur sur une page, mais aussi de créer une palette ou un dégradé.

Image Downloader

Image Downloader vous permet de parcourir, de filtrer et d’extraire instantanément les images présentes sur une page web, même en grande quantité. Avec cet add-on, vous n’avez plus à rechercher les images qui vous intéressent pendant des heures, ni à fouiller le CSS pour trouver d’éventuels éléments cachés : un véritable gain de temps !

Designers Ruler

Simple mais néanmoins très utile, Designers Ruler permet de positionner des règles sur une page afin de mesurer des éléments (ou la distance entre plusieurs éléments) en pixels.

Spectrum

L’accessibilité est aujourd’hui un véritable enjeu de webdesign. Spectrum est justement un plug-in fort pratique pour concevoir des sites adaptées aux personnes atteintes d’une déficience visuelle, en simulant par exemple l’apparence d’un site vu par un daltonien.

Avec cette sélection d’extensions, vous pourrez faire de Google Chrome un outil de web design pratique, qui vous aidera au quotidien dans votre travail. Bien entendu, tout cela ne remplace pas les logiciels indispensables du webdesigner, mais un navigateur web personnalisé avec de bons add-on ne peut que vous simplifier la tâche.