10 extensions Chrome indispensables pour les Web Designers
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.
Merci pour le partage de ces extensions. J’en connaissais plusieurs mais j’en ai découvert d’autres très intéressantes. Par exemple Browserling va me changer la vie 🙂
Super pratique. Merci !
Sizzy ne semble pas fonctionner (il ne se passe rien au clic ou c’est moi ?) et Spectrum c’est pareil, il ne se passe rien… Sinon merci pour la liste, quelques découvertes intéressantes, notamment sur l’accessibilité, je suis en pleine recherche sur le sujet justement !
Personellement pour developper ren reponsive je prefere utiliser le navigateur Blisk. Il permet de voir les modification ala fois en version mobile ET Desktop, et ce en live en autre
Hello Eva, laisse tombé Sizzy, c’est 5€/mois et c’est bof. Je te conseille Browsersync. Il te permet d’afficher plusieurs navigateurs simultanément (avec des tailles différentes pour tester le responsive bien sur). Il faut juste entrer ton IP locale sur l’URL.
Et si tu entre l’IP sur ton smartphone connecté au même Wifi, Browsersync syncronise le scroll de ton smartphone et de ton ordi! 🤯
Et en plus c’est gratuit.
https://www.browsersync.io/
Et merci à BDW pour ces extensions Chrome. Je rajouterait juste CSSViewer.
https://chrome.google.com/webstore/detail/cssviewer/ggfgijbpiheegefliciemofobhmofgce?hl=en
Un peu moins dépassé que browserling, il y a le site http://browsershots.org/
Je viens de tester CSS Peeper, et il ne permmet en rien d’extraire le CSS, juste de donner les spec d’un elements. Et encore pas toutes les spec.
Moé bof, j’avais deja souvenir l’avoir utiliser, L’inspecteur Chrome au final est bien plus pratique :p