Grâce aux nombreux plugins Chrome et Firefox, vous êtes en mesure de transformer votre navigateur préféré en véritable boîte à outils pour designer.

Le catalogue d’extensions de ces deux navigateurs reflète bien leur grande popularité, puisqu’ils offrent une grande multitude de plugins en tous genres.

Les professionnels du design et du développement front-end apprécieront ce petit tour d’horizon des meilleures extensions disponibles sur les Chrome & Firefox Web Store.

7 plugins Chrome pour designer

1. Web Developer

Web Developer est une extension que vous devez impérativement avoir dans votre trousse à outils. Il s’agit d’un socle solide sur lequel travailler le développement web sur Chrome.

En effet, le plugin vous permet :

Et tout cela en un clin d’œil.

2. CSS Peeper

CSS Peeper est une extension qui vous permet non seulement de visualiser le CSS de n’importe quelle page, mais aussi de l’extraire. Grâce à lui, vous n’êtes plus contraint de fouiller manuellement des centaines de lignes de code.

Ainsi, si vous tombez sous le charme du design d’une page web et que vous souhaitez vous en inspirer pour vos propres créations, cet outil est fait pour vous.

3. iMacros pour Chrome

Oubliez les actions répétées des centaines de fois au cours des phases de test de vos sites web. iMacros pour Chrome est un outil qui permet d’enregistrer ces actions et de les sauvegarder.

Grâce à lui, vous êtes en mesure de tester vos pages en un seul clic. Avec iMacros pour Chrome vous gagnez du temps en supprimant ces actions répétitives et très chronophages.

4. Sizzy

Sizzy fait partie de ces outils incontournables du responsive design. L’extension permet en effet de prévisualiser instantanément les pages de votre site sur de nombreux supports.

De cette façon, vous êtes certain de la lisibilité de votre site, tant sur un ordinateur que sur un smartphone ou une tablette.

5. Fontface Ninja

Pour commencer, Fontface Ninja est une extension Chrome qui vous permet de dénicher le nom de la police d’écriture utilisée sur un site web. Cerise sur le gâteau, l’outil vous permet également de la télécharger en un seul clic.

Seul petit bémol, vous devez prendre garde à ne pas télécharger de polices payantes.

6. Page Ruler

Page Ruler est une extension très populaire chez les webdesigners.

Elle permet en effet de mesurer les éléments d’une page Web. Grâce à cet outil, vous pouvez mesurer la largeur et la hauteur en pixels des éléments présents sur tous les sites Web.

7. Image Downloader

Image Downloader est un outil qui offre un véritable gain de temps puisqu’il permet de parcourir, filtrer et extraire instantanément toutes les images disponibles sur une page web, même si celles-ci sont présentes en grande quantité.

Cet add-on, vous évite de rechercher les images qui vous intéressent et de fouiller le CSS  durant des heures.

7 plugins Firefox pour designer

1. HTML Validator

L’extension Firefox HTML Validator est un outil particulièrement utile qui vous permet de détecter automatiquement toutes les erreurs présentes dans le code HTML d’une page web.

Le nombre d’erreurs est ainsi signalé de manière parfaitement visible, et leur détail est spécifié dans le code source de la page.

2. Window Resizer

Window Resizer est une extension Firefox également disponible sous Chrome. Très utile, elle permet de redimensionner vos fenêtres et de tester le rendu de vos pages web avec différentes tailles et résolutions d’écran.

Vous pouvez ici créer des dimensions personnalisées ou choisir parmi les 20 configurations prédéfinies.

3. ColorZilla

Disponible sur Firefox, mais aussi sur Chrome, l’add-on ColorZilla est un must have pour tous les designers.

Il s’agit d’une référence pour prélever n’importe quelle couleur sur une page web. L’extension vous permet également de créer des dégradés CSS et de générer des palettes de couleurs personnalisées à partir d’un site.

4 . CSSViewer

Comme son nom le laisse entendre, CSSViewer permet d’inspecter facilement l’ensemble des propriétés CSS d’une page web.

Un outil parfait pour analyser rapidement le code de la page, et comprendre les techniques employées pour concevoir le design d’un site afin de vous en inspirer par la suite pour vos propres créations.

5. Lizard

Le plugin Firefox Lizard vous permet de sélectionner n’importe quel élément d’une page web afin :

Malgré toutes ces fonctionnalités, l’outil est principalement utilisé par les webdesigners pour se débarrasser des éléments gênants ou inutiles d’une page.

6. Measure-it

L’outil Measure-it permet aux designers d’installer une règle sur une page web afin de mesurer la hauteur et la largeur en pixels de l’élément voulu.

Cette règle vous permet également d’en vérifier le bon alignement de manière simple et rapide. L’outil est rapidement accessible grâce à un simple raccourci clavier.

7. Font Finder

Font Finder est une extension Firefox qui vous permet de trouver et d’analyser la police d’écriture utilisée dans n’importe quel bloc de texte d’une page web.

Vous obtenez grâce à lui le nom de ladite police, mais aussi sa couleur, sa taille, son espacement, etc.