6 extensions Chrome pour les concepteurs web

6 extensions Chrome pour les concepteurs web

Partager cet article
Par December 06, 2019 06 décembre 2019

Google Chrome est l'un des navigateurs web les plus populaires au monde grâce à ses nombreuses fonctions, son interface élégante, et bien sûr sa connexion au puissant moteur de recherche et à ses logiciels et matériels. Mais beaucoup des meilleures fonctions de Chrome sont piégées derrière des couches d'étapes assez complexes pour donner une pause à Indiana Jones.

De nombreuses extensions de navigateur permettent aux concepteurs web et autres professionnels de gagner du temps en créant des raccourcis vers des fonctions telles que les captures d'écran et la visualisation des éléments/codes sources. D'autres introduisent des fonctionnalités tout à fait uniques, transformant le navigateur en quelque chose de plus qu'une simple interface pour naviguer sur le web.

Les extensions Chrome sont particulièrement utiles pour les concepteurs de sites web car nous passons de nombreuses heures à travailler avec des navigateurs web, et testons régulièrement les sites web sur tous les navigateurs (ou du moins ceux qui sont populaires). Lorsque vous passez huit heures ou plus par jour à travailler en ligne, il y a beaucoup de tâches banales qui prennent inutilement du temps. Les extensions peuvent faire en sorte qu'une tâche de cinq minutes prenne trente secondes, ou qu'il ne soit pas nécessaire d'utiliser un logiciel supplémentaire.

Bien qu'il existe de nombreuses extensions pour Chrome qui peuvent aider les concepteurs dans leur travail quotidien, en voici six que je trouve particulièrement utiles.

ColorZilla

ColorZilla Google Chrome extension
ColorZilla est probablement l'extension qui me fait gagner le plus de temps, que je travaille sur la conception web ou un autre projet qui implique la couleur. ColorZilla peut récupérer le code hexadécimal depuis n'importe quel élément visible de la page, en le copiant dans le presse-papiers en un seul clic. Sans cette extension, obtenir un code hexadécimal d'une couleur inconnue nécessite le téléchargement ou la capture d'écran de la page, puis le chargement de l'image dans un logiciel qui peut extraire le code.

Ce serait suffisant pour faire de ColorZilla mon plugin préféré sur cette liste, mais le petit monstre introduit encore plus de fonctionnalités dans le navigateur. Il dispose également d'une palette de sélection de couleurs et d'un générateur de dégradés intégrés, et peut analyser toutes les couleurs utilisées sur une page et les fournir dans un format accessible.

En d'autres termes, si vous avez du mal à trouver les bonnes combinaisons de couleurs pour votre site ou si vous passez beaucoup de temps à télécharger des images pour obtenir leurs codes hexadécimaux, ColorZilla peut être votre nouveau meilleur ami.

Parfois, vous devez faire passer la pipette près d'un élément plutôt que directement au-dessus pour détecter la bonne couleur. Si vous avez de la difficulté à obtenir l'ombre que vous voulez, essayez de cliquer autour de son périmètre.

FireShot

FireShot Google Chrome extension
Fireshot est une magnifique extension pour tous ceux qui créent des tutoriels, des rapports ou des notes de conception sur des photos de leur site web. Plutôt que de passer par la procédure angoissante de Chrome pour prendre une capture d'écran ordinaire, FireShot vous permet de capturer une zone sélectionnée de la page, ou la page entière, ou juste la zone actuellement visible.

C'est un outil incroyablement pratique pour créer des maquettes de sites web, ou pour obtenir une image sur laquelle vous pouvez dessiner/écrire quelques notes et la transmettre à un collègue ou un employé. En quelques clics, vous pouvez capturer ce que vous voulez et y copier dans le presse-papiers ou l'enregistrer au format PNG, JPG ou PDF.

La version premium de cette extension introduit encore plus de fonctionnalités, mais tout ce qui est mentionné ci-dessus est disponible gratuitement. Si vous naviguez régulièrement sur Chrome pour n'importe quel type de travail, avoir FireShot ou une extension comparable installée est tout à fait logique.

Dans les options de FireShot, vous pouvez personnaliser si les images sont au format JPG ou PNG, le dossier dans lequel elles seront enregistrées, les raccourcis clavier et quelques autres fonctions pratiques.

Fonts Ninja

FontFace Ninja Google Chrome extension
Fonts Ninja est un outil génial pour les concepteurs qui s'inspirent d'autres sites web. Si vous voyez une police que vous aimez, vous devriez normalement inspecter l'élément et/ou vérifier le code source pour savoir de quoi il s'agit, ce qui peut être un processus fastidieux et long. Avec Fonts Ninja, il suffit de quelques clics pour découvrir, expérimenter et télécharger les polices qui vous plaisent.

Si vous n'êtes pas particulièrement à l'aise pour chercher dans le code source ou si vous passez beaucoup de temps à penser aux polices, c'est certainement une extension pour vous.

L'une des plus grandes caractéristiques de Fonts Ninja est le fait qu'elle est complètement gratuite ; il n'y a aucune fonction cachée derrière un paywall, ce qui est une vérité frustrante de nombreux plugins.

Si la police que vous admirez n'est pas gratuite, Fonts Ninja fournit un lien pour l'acheter. Il fournit même une interface slick dans le navigateur que vous pouvez utiliser pour expérimenter avec les polices avant de décider de les obtenir ou non. Dans l'ensemble, si vous voulez améliorer votre jeu de polices, ce plugin vous rendra la vie beaucoup plus facile.

Fonts Ninja est disponible pour Chrome et Firefox, donc le navigateur que vous choisissez ne devrait pas limiter votre capacité à en bénéficier. Si vous n'êtes pas sûr d'une police, vous pouvez l'ajouter à vos signets pour une inspection ultérieure.

CSS Scan

FontFace Ninja Google Chrome extension
CSS Scan est une puissante extension payante qui se décrit comme "Inspecteur d'élément sous stéroïdes". Entre cela et le nom, vous pouvez probablement deviner ce qu'il fait, mais voici un bref aperçu de ses meilleures caractéristiques.

Lorsque CSS Scan est activé, passer la souris sur n'importe quel élément de la page web active affichera les données de la feuille de style en cascade (CSS) et permettra de copier le code dans le presse-papiers en un seul clic. Cela rend l'apprentissage du code utilisé sur d'autres sites beaucoup plus facile, et vous pouvez trouver d'autres utilisations pour cette extension en fonction de vos responsabilités.

Checkbot

FontFace Ninja Google Chrome extension
Checkbot est doté de nombreuses fonctions, mais d'un point de vue visuel, c'est facile à comprendre ; cette extension testera un site web par rapport à de longues listes de meilleures pratiques en matière de référencement, de vitesse et de sécurité. Il recherche les liens cassés, le code non optimisé, l'accès facile aux zones restreintes, et bien plus encore.

Ce plugin vous sera utile que vous soyez débutant en conception web et que vous travailliez uniquement sur votre propre site web, ou que vous soyez un concepteur expérimenté avec de nombreux projets clients à gérer. Bien que la version gratuite de cette extension ait quelques limitations intégrées, la version Premium peut vérifier jusqu'à 10 000 URL par site web et exporter des rapports PDF et CSV.

Si vous êtes nouveau dans le domaine des sites web, cet outil vous aidera à trouver les problèmes qui pourraient vous échapper et vous aidera à adopter les meilleures pratiques. Si vous êtes plus expérimenté, cela pourrait vous aider à faire évoluer votre entreprise en réduisant le temps nécessaire pour trouver et résoudre les problèmes.

Pour une liste complète des fonctions de Checkbot, consultez la page de la boutique en ligne de Chrome ou jetez un coup d'œil à leur site web. Même si vous venez de tester la version gratuite, vous pouvez trouver des problèmes faciles à résoudre avec un site sur lequel vous travaillez.

Block Yourself from Analytics

FontFace Ninja Google Chrome extension
Block Analytics est une extension pratique qui empêche Google Analytics, un outil de statistiques de site populaire, d'inclure vos propres visites et tendances de navigation dans les statistiques des sites web sur lesquels vous travaillez. Cela peut être utile si vous voulez vous assurer que les statistiques de votre site web sont celles de vos visiteurs actuels, et non les vôtres.

Bien qu'il existe d'autres moyens d'accomplir la même chose (comme la création d'un filtre IP dans Google Analytics), il existe de nombreuses situations où une extension comme Block Analytics est une solution plus facile. Si votre adresse IP change régulièrement, ou si vous travaillez à partir de différents endroits, ou si vous n'avez pas accès à Analytics pour tous les sites sur lesquels vous travaillez, Block Analytics peut être exactement ce dont vous avez besoin.

Il est à noter que cette extension n'est pas destinée à masquer votre présence sur tous les sites web - le créateur l'indique expressément dans sa description.

Notes de fin sur les extensions de navigateur

Chrome est un navigateur web puissant, mais certaines de ses meilleures fonctions sont cachées derrière une série d'étapes ennuyeuses ou nécessitent une connaissance plus approfondie du développement web. Si vous passez beaucoup de temps à travailler en ligne et que vous avez l'impression que trop de temps est consacré à des tâches répétitives et banales, vous voudrez peut-être envisager d'ajouter quelques extensions au navigateur.

Entre la demi-douzaine d'extensions que j'utilise quotidiennement ou hebdomadairement, j'estime qu'elles me font économiser au moins cinq ou six heures par mois. C'est assez de temps pour éliminer un petit projet, ou passer une demi-journée de détente. Mais le temps n'est pas le seul avantage de ces extensions ; elles permettent aussi d'économiser beaucoup de frustration qui peut résulter des aspects plus ennuyeux du travail de conception web. Plus vous gardez l'esprit clair, plus vous pouvez rester créatif et concevoir de beaux sites web.

Utilisez-vous d'autres extensions Chrome utiles au quotidien? Faites-le moi savoir, ainsi qu'aux autres lecteurs, dans les commentaires ci-dessous!



À propos de l'auteur : Alex Tucker

Alex est un écrivain et spécialiste du marketing numérique qui exerce ses activités à partir de l'Ontario, au Canada. Il est passionné par la santé et le bien-être, l'autodéfense et la création de sites web WordPress.

Voir tous les articles de cet auteur Intéressé à écrire pour Hébergement Web Canada ?
Hébergement Web Canada propose une infrastructure rapide, fiable et disponible 24/7. En savoir plus sur WHC