Google Chrome était un retardataire dans la guerre des navigateurs, mais était un succès du jour au lendemain qui devint instantanément le favori des utilisateurs de Mac et de Windows. Tout ce qui concerne Chrome, de son interface minimale et extrêmement pratique à son solide Webkit Core et à son système d'extension robuste, en fait l'un des meilleurs moyens d'accéder au Web.
Pour tous les amoureux de Chrome, nous avons une collection impressionnante de 25 extensions Google Chrome extrêmement utiles pour les concepteurs et les développeurs. Que vous cherchiez un moyen rapide de valider votre page ou de créer une incrustation de grille personnalisée, nous avons l'outil pour vous.
Firebug Lite
Firebug Lite fournit la riche représentation visuelle à laquelle nous sommes habitués dans Firebug en ce qui concerne les éléments HTML, les éléments DOM et les ombrages de modèle de boîte. Il fournit des fonctionnalités intéressantes telles que l'inspection d'éléments HTML avec votre souris et l'édition en direct de CSS.
Élégant
Cette extension facilite la refonte complète du style visuel d’une page Web ou d’un site. Vous voulez créer une version grise de YouTube ou une version noire de Google? Élégant est votre réponse.
Élégant, vous permet de gérer facilement les styles des utilisateurs. Ajoutez, supprimez, activez, désactivez et organisez en quelques clics de souris, aucun code à modifier, aucune configuration obscure à rechercher. Le site Web compagnon de Stylish, userstyles.org, héberge des dizaines de milliers de styles utilisateur créés par d'autres utilisateurs stylés que vous pouvez essayer.
Reloader CSS
CSS Reloader est une extension de navigateur qui vous permet de recharger du CSS sans recharger la page elle-même. Appuyez simplement sur un raccourci rapide et la page se mettra à jour avec les changements de style.
Traceur de vitesse (par Google)
Speed Tracer est un outil qui vous aide à identifier et à résoudre les problèmes de performances de vos applications Web. Il visualise les métriques prises à partir de points d'instrumentation de bas niveau dans le navigateur et les analyse au fur et à mesure de l'exécution de votre application. L'interface utilisateur est un tableau de bord convivial contenant des informations et des graphiques applicables qui vous aidera à optimiser vos applications.
Live CSS Editor
Cette extension fournit une zone de texte sur n'importe quelle page HTML afin que vous puissiez écrire du CSS librement et voir immédiatement les résultats. C'est un outil simple mais très utile pour élaborer des idées et résoudre les problèmes.
Capture d'écran de la volière
Il s'agit d'un petit outil vraiment génial qui capture toute page Web et l'ouvre automatiquement dans l'un des nombreux outils professionnels d'Aviary.com pour les créations. Vous aurez accès à des outils de type Photoshop vous permettant de manipuler votre image comme bon vous semble: rogner, redimensionner, faire pivoter, etc.
Lorem Ipsum Generator
Juste un simple générateur Lorem Ipsum intégré directement dans votre navigateur. Extrêmement utile pour créer des maquettes et avoir besoin de texte de remplissage.
Rafraîchir le singe
Actualiser automatiquement une page à un intervalle défini. Surveiller la page pour un changement et être averti en cas de changement. C'est évidemment l'outil idéal pour les développeurs Web qui souhaitent garder un œil sur les modifications de code dans le navigateur sans actualiser manuellement et manuellement la page.
Fenêtre Resizer
Cette extension redimensionne la fenêtre du navigateur afin d'émuler diverses résolutions. Si vous prenez le train de conception Web réactif, vous aurez envie de vérifier cette extension pour pouvoir évaluer rapidement vos conceptions dans différentes tailles populaires.
Google Font Previewer pour Chrome
Je suis un grand fan de Google Fonts, l'outil gratuit permettant d'appliquer des polices Web personnalisées via CSS. Cette extension vous permet d’appliquer rapidement des polices Google à des sélecteurs CSS spécifiques, ce qui vous permet d’obtenir un aperçu rapide de l’aspect de cette police dans votre conception avant de mettre à jour vos fichiers.
ruul
ruul - une règle incroyablement simple à l'écran pour aligner et mesurer le type, la hauteur de ligne, les traits et presque tout ce qui est sur le Web. Parfait pour analyser les conceptions existantes.
Vérifier mes liens
"Vérifier mes liens" trouve rapidement tous les liens sur une page Web et les vérifie pour vous. Il met en évidence ceux qui sont valides et ceux qui sont cassés. Je ne peux pas vous dire combien de fois j'ai commis des erreurs stupides, comme oublier de vérifier mes liens pour s'assurer qu'ils fonctionnent tous. Cet outil simple automatise ce processus gênant et vous aide à identifier ce que vous devez réparer.
Comps
Si vous aimez coder des sites Web à partir de compositions Photoshop, vous devrez constamment comparer les deux pour voir si vous êtes sur la bonne voie. Cette extension vous permet de charger des images à partir de votre ordinateur local et de les superposer facilement sur votre site Web afin de comparer votre code à une conception donnée.
Les grilles
Cette extension vous aide à créer une superposition de grille personnalisée pour n'importe quelle page. Il a pas mal d'options et est très utile pour créer des mises en page basées sur une grille parfaitement pixelisée.
Niveaux de gris
Avec cette extension, vous pouvez afficher vos pages en niveaux de gris. Cela vous aidera à voir les problèmes potentiels liés aux couleurs insuffisamment contrastées. Le contraste est un élément majeur de la conception qui améliore l’esthétique et la convivialité pour les utilisateurs daltoniens ou daltoniens.
Règles, guides, compte-gouttes et sélecteur de couleurs
Pour les développeurs d'interface utilisateur. Choisissez n'importe quelle couleur de la page Web à l'aide de l'outil compte-gouttes; afficher les règles, les guides et la grille sur la page.
Pendule
Pendule est une vaste collection d’outils de développement pour Chrome. Vous pouvez afficher et valider le code, désactiver les styles, afficher les couleurs utilisées, masquer les images, afficher les mots de passe, etc.
WhatFont
WhatFont est un outil génial que vous pouvez trouver sur de nombreux navigateurs. C'est rapide, facile, très attrayant et vous indique non seulement le nom de la police, mais également sa taille et sa hauteur.
Palette pour Chrome
Un petit outil soigné qui récupère rapidement les couleurs de toute image et vous aide à créer instantanément des couleurs unies.
Des guides
Gardez vos éléments en ligne avec les guides! Vérifiez les distances, les alignements et plus pour vous assurer que vos sites Web sont au pixel près.
HTML Instantané
HTML Instant est un éditeur de texte à double volet agréable et simple qui vous permet de saisir du code HTML, CSS ou JavaScript à droite et de voir instantanément un aperçu en direct à gauche.
Validation HTML
Un moyen rapide et facile de valider la page en cours à l’aide de w3.org.
SEO et analyse de site Web
SEO et analyse de site Web par WooRank est une extension pour Google Chrome qui fournit une analyse de référencement approfondie qui couvre plus de 50 critères de référencement et d’utilisabilité.
Détecteur de compatibilité de navigateur
La compatibilité entre navigateurs est la plus grande difficulté que vous rencontrerez lors du développement de sites Web. Cet outil peut vous aider à identifier rapidement les problèmes potentiels dans votre code.
Neo Vision
Neo Vision fournit une coloration syntaxique lors de la visualisation des fichiers source. La partie intéressante est qu’il existe plusieurs thèmes personnalisables, ce qui vous permet de donner au code l’apparence que vous voulez.
Quelle est votre extension Google Chrome préférée?
Maintenant que vous avez vu notre collection d'extensions Google Chrome pour les concepteurs et les développeurs, laissez un commentaire et indiquez-nous quelles sont vos extensions préférées. Aussi, avez-vous essayé l'une des extensions ci-dessus? Qu'as-tu pensé d'eux?