Top 15 des extensions Google Chrome pour les concepteurs de sites Web 2020

Google Chrome est le navigateur Web le plus reconnu qui soit, et non pas parce qu'il est conçu uniquement par Google. C'est un solide leader dans les listes de parts de marché des navigateurs Web, avec plus de 45% d'avance sur son rival le plus proche : Mozilla Firefox. Il est à égalité en tête du marché des navigateurs Web mobiles avec WebKit (Safari), l'équivalent iOS de Chrome. Chrome est connu pour son moteur JavaScript solide et stable qui alimente des tonnes de technologies. Plus particulièrement, le framework Node.js est basé sur un moteur qui alimente Google Chrome.

Chrome obtient toutes sortes de réputation pour lui-même; quelques-uns choisissent de blâmer le manque de sécurité et d'outils approfondis. Mais en ce qui concerne la situation dans son ensemble, imaginer un meilleur navigateur que Chrome est difficile. La vitesse, l'évolutivité, les performances et des éléments tels que les outils de développement sont ce qui permet aux concepteurs Web et aux développeurs Web de s'en tenir à Chrome pour la stratégie à long terme.

Il y a eu beaucoup de discussions sur la sécurité et la confidentialité des extensions Google Chrome. Mais il s'agit d'un choix judicieux d'extensions de développeurs et de startups dignes de confiance qui souhaitent réellement offrir quelque chose de bien à la communauté. L'extension des capacités de Chrome a fourni aux développeurs les kits d'outils et les fonctionnalités nécessaires pour créer des extensions qui peuvent aider à cultiver plus de productivité et, plus important encore, plus d'accessibilité pour créer des éléments dans le navigateur.

Les développeurs frontaux sont parmi les plus grands gagnants de l'utilisation de Chrome, car il offre une expérience très fluide de type IDE lors de la création de sites Web et d'applications pour le navigateur et le Web mobile. Nous couvrirons les quinze meilleures extensions Google Chrome pour les concepteurs, dont certaines pourraient également être utiles aux développeurs. La liste est impartiale et basée sur des recherches que les concepteurs ont partagées sur certains des forums communautaires les plus populaires sur le Web aujourd'hui.

Sélecteur d'agent utilisateur

Un User-Agent est l'empreinte que vous envoyez dans chaque nouvelle demande que vous faites à une page. Le site Web peut alors détecter votre User-Agent et vous fournir la version appropriée du site Web, conformément aux capacités de votre navigateur. Il s'agit de la technique standard utilisée par les sites Web pour déterminer si quelqu'un navigue sur un site Web à partir d'un ordinateur de bureau ou d'un appareil mobile. L'extension User-Agent Switcher vous permet de remplacer votre User-Agent par n'importe quel autre navigateur ou appareil mobile, vous permettant ainsi d'expérimenter rapidement la façon dont vos conceptions apparaissent sur ces appareils et navigateur. C'est une petite extension qui a beaucoup de pouvoir pour aider les développeurs à augmenter leur productivité en leur évitant d'avoir à basculer.

GoFullPage

Lorsque vous travaillez sur une conception Web ou que vous souhaitez capturer le plein écran d'un site Web pour présenter votre client, GoFullPage est la voie à suivre. Cette extension Chrome simple à utiliser pour les concepteurs de sites Web est assez explicite. En bref, l'outil capture la page actuelle que vous visualisez dans son intégralité. Vous venez d'appuyer sur le bouton et c'est tout, pas besoin de vérifier d'autres options. En plus de cela, vous pouvez également utiliser le raccourci clavier pour faire fonctionner GoFullPage.

Vous verrez cette extension capturer la page, partie par partie, puis ouvrir un nouvel onglet à partir duquel vous pourrez télécharger une image (PNG, JPG) ou PDF. Bien sûr, vous pouvez simplement le faire glisser et le déposer sur votre bureau. Qu'il s'agisse d'un simple blog, d'un site Web complexe ou d'une boutique en ligne, GoFullPage capture tout sans transpirer.

Temps de sauvetage

Lorsqu'il s'agit de travailler sur la conception de sites Web, le temps est important. Après tout, vous ne voulez pas passer trop de temps à vous concentrer sur la distraction, alors que vous pouvez faire un travail tellement plus de qualité à la place. Grâce à RescueTime, une extension Chrome, vous pouvez suivre le temps que vous passez dans Chrome tout au long de la journée. Avez-vous été productif ou improductif ? RescueTime vous aidera à comprendre les choses, afin que vous puissiez gérer votre temps en conséquence.

Il ne s'agit pas seulement du suivi du temps de chaque site Web sur lequel vous passez. RescueTime classe également les pages comme « très productives » et « très distrayantes ». De plus, il reconnaît même lorsque vous vous éloignez de l'ordinateur - dans ce cas, il arrête le suivi. Si vous vous êtes déjà demandé ce que vous faites dans Chrome chaque jour, RescueTime vous aidera à avoir une meilleure idée du temps que vous passez à travailler et du temps « juste vérifier les choses ».

Vider le cache

Bien que Chrome ait sa propre fonctionnalité, vous pouvez accélérer les choses lors de l'effacement du cache avec, eh bien, l'extension Clear Cache. Vous pouvez l'ajouter à Chrome en un seul clic et commencer à l'utiliser immédiatement. Lors de la suppression du cache, l'outil ne demandera pas de confirmations supplémentaires, ne créera pas de fenêtres contextuelles et autres. Cependant, si vous souhaitez supprimer toutes les données globalement, une autorisation supplémentaire est nécessaire. Après tout, vous ne voulez pas tout nettoyer accidentellement.

De plus, vous pouvez facilement spécifier ce que vous souhaitez effacer exactement, comme le cache de l'application, les cookies, les téléchargements, les données de formulaire, l'historique, le stockage local, la liste est longue. Vous pouvez également définir le domaine à inclure ou à exclure lors de l'effacement des données. Clear Cache prend également en charge les périodes. Rapide et simple, et c'est ce qui compte le plus pour booster votre flux de travail à travers le toit.

Règle

Souhaitez-vous avoir une règle virtuelle qui aide à mesurer les éléments sur les sites Web ? Si tel est le cas, Ruler est l'extension Chrome pratique qui fera la magie. En tant que concepteur de sites Web, cet outil peut s'avérer très utile pour déterminer la taille de chaque élément, car vous pouvez mesurer tout et n'importe quoi sur chaque page, en utilisant uniquement vos compétences de souris.

Vous pouvez ajouter la règle au site et mesurer les éléments en pixels. De plus, vous pouvez également utiliser le curseur de votre souris comme règle, ce qui vous permet de dessiner des formes spécifiques que vous souhaitez mesurer. Vous trouverez toutes les informations nécessaires sur la taille et la dimension sur la page elle-même en pixels. Ajoutez simplement les extensions et cliquez sur le bouton qui apparaît dans le coin supérieur droit. Ça y est, vous avez maintenant une règle virtuelle qui mesure les pages, les éléments et les composants.

Redimensionneur de fenêtre

Avec plus de 500 000 utilisateurs actifs dans toutes les communautés technologiques, l'extension Window Resizer aide les concepteurs à usurper différents types de résolutions pour mieux comprendre comment ces résolutions interagissent avec vos conceptions. Construire un site Web qui fonctionne pour la majorité de la population est essentiel. Et cette extension vous aide à identifier où les erreurs peuvent commencer à se produire, afin que vous puissiez apporter rapidement les modifications de code nécessaires. Vous pouvez modifier rapidement la largeur et la hauteur de la fenêtre de votre navigateur, la position où elle se trouve, et il existe une fonction de code court intégrée qui augmentera considérablement votre capacité à vérifier différentes résolutions d'écran lorsque vous effectuez un codage en direct.

QuelleFont

Avec des millions de sites Web actifs et de nombreux nouveaux sites Web que nous visitons chaque jour, il y a toujours quelque chose qui attire notre attention, un widget particulier ou une fonction dynamique, ou une police particulière qui semble tout simplement exceptionnelle, mais nous ne sommes pas en mesure de précisez son nom. Avec l'extension WhatFont, vous pouvez examiner rapidement les polices sur n'importe quelle page de site Web et apprendre rapidement le nom de la police afin de pouvoir commencer votre recherche. En dehors de cela, WhatFont aide également à comprendre le type de services utilisés pour servir les polices, dans le cas où elles proviennent de services premium ou gratuits comme Google Fonts ou Typekit.

Conditionneur d'onglets

Les concepteurs, et même les développeurs, ont tous du mal à garder leurs onglets propres et organisés. Lorsque nous effectuons des travaux de conception, nous recherchons constamment d'autres sources, des éléments de recherche, des travaux d'inspiration et des exemples sur la façon de perfectionner nos conceptions, et ces onglets ont tendance à s'empiler assez rapidement ! Avec Tab Packager, vous pouvez désormais profiter d'un moyen simple de regrouper tous vos onglets dans une seule URL, puis d'y accéder à partir de cette URL. Cela améliore la productivité car nous pouvons revenir en permanence à notre liste et saisir rapidement ce dont nous avons besoin, plutôt que de parcourir les onglets en devinant en quoi chaque onglet se compose.

CSS-Shack

Photoshop n'est pas le seul outil qui traite les calques. En fait, chaque développeur front-end doit gérer des couches dans ses configurations CSS. Cette extension Chrome pour les concepteurs Web vous aide à créer des calques de style, puis à exporter ces calques vers vos fichiers CSS pour un accès plus facile. Vous pouvez rapidement créer des conceptions, des wireframes ou des éléments simples comme des boutons en quelques clics. Qu'il s'agisse d'expérimentations aléatoires et de tests sandbox, ou d'un guide de style complet que vous essayez de créer, CSS-Shack offre les outils pour vous aider dans ces départements.

Guide des couleurs plates

Construire une nouvelle conception Web à l'aide du guide de style FLAT, mais vous n'êtes pas sûr des bons codes de couleurs à utiliser ? Avec l'extension Flat Colors Guide simple à utiliser, l'inquiétude disparaît rapidement. Installez l'extension et cliquez simplement sur le bouton des extensions pour charger les couleurs qui entrent généralement dans les conceptions FLAT.

CouleurZilla

ColorZilla compte des millions d'utilisateurs actifs sur le navigateur Mozilla. Et enfin, une extension Google Chrome est également disponible, qui a déjà accumulé plus de 800 000 utilisateurs actifs. Avec ColorZilla, vous pouvez rapidement évaluer les couleurs d'une page donnée. Et vous pouvez utiliser ces couleurs pour les optimiser et les charger dans tout autre outil que vous utilisez pour créer vos conceptions. Accédez facilement aux couleurs des pixels singuliers de la page, vous donnant la bonne profondeur pour vos couleurs dans n'importe quelle situation. Les raccourcis permettent une manipulation et une optimisation plus rapides des couleurs.

Robot de style

Stylebot est un outil d'édition en direct permettant de manipuler le code CSS de tout site Web et élément que vous parcourez actuellement. Vous pouvez rapidement sélectionner des éléments individuels et apporter des modifications d'apparence à l'aide de CSS. Modifiez tout ce que vous aimez à l'aide d'outils intégrés automatisés ou écrivez votre propre CSS. Cela vous aide à en savoir plus sur CSS. Il vous donne également un aperçu du fonctionnement de l'édition en direct et de la rapidité avec laquelle vous pouvez créer les modifications souhaitées pour vos conceptions. Avec plus de 150 000 utilisateurs, c'est l'extension que chaque concepteur de sites Web devrait avoir dans sa boîte à outils.

Profitez de CSS

EnjoyCSS est un studio de web design directement dans votre navigateur ! C'est un générateur CSS3 direct qui vous permet de gérer les paramètres d'interface utilisateur de n'importe quel élément de votre choix. Créez des transitions, transformez des éléments, travaillez avec des dégradés, des ombres et bien plus encore. EnjoyCSS dispose également d'une bibliothèque de transformations prédéfinies que vous pouvez appliquer directement à vos éléments.

Emmet LiveStyle

Emmet LiveStyle met à jour instantanément votre feuille de style de page Web pendant que vous modifiez le fichier CSS, LESS ou SCSS dans votre éditeur de texte. Pas de sauvegarde de fichier ni de rechargement de page : pure expérience en temps réel ! Et c'est le premier outil qui transfère correctement les mises à jour de DevTools dans le code source. De nombreuses critiques pour cette extension mentionnent qu'ils ne peuvent pas imaginer leur flux de travail de conception Web sans cet outil.

Développeur web

Mozilla Firefox a ses propres outils de développement, tout comme Google Chrome. Ce qui s'est passé ces dernières années, c'est que de nombreux utilisateurs de Firefox sont passés à Chrome. Mais on a toujours l'impression qu'une certaine fonctionnalité manque ou fait défaut dans des départements spécifiques. L'une des pertes les plus importantes pour les personnes qui changent est la perte des outils de développement de Mozilla. Et comme il y avait une telle demande pour cela, quelques développeurs se sont réunis et ont construit un miroir exact de Firefox Dev Tools pour Chrome. Avec plus d'un million d'utilisateurs actifs déjà, cette extension est un succès fulgurant pour les concepteurs établis et en herbe qui souhaitent étendre leur boîte à outils de navigateur pour travailler avec des conceptions Web dans un environnement réel.