Si vous êtes designer dans le besoin de quelque chose d’utile
outils pour accélérer, de collaborer ou de l’audit de votre site web à des projets de développement, Chrome
l’extension a une multitude d’outils.
Cette liste comprend certains des plus populaires – et certains diront nécessaire – les outils et les extensions de Chrome à chaque utilisateur de réaliser des travaux de conception devraient avoir dans leur sac.
1. DomFlags
DOM Flags est un simple pour utiliser l’extension Chrome
qui offre une nouvelle façon pour les développeurs de travailler avec des outils de votre navigateur. Il permet
les développeurs afin d’accélérer la tâche des éléments de style.
À l’aide de raccourcis clavier pour chaque élément que vous
mettre en signet votre navigation.
Nous avons tous expérimenté la difficulté de
l’inspection très détaillée des éléments, et il est facile de se perdre.
DOM Drapeaux de vous permettre de suivre des éléments de style
inclut une fonction pour inspecter les composants avec précision automatiquement. Ce, dans
son tour, aidera à accélérer DevTools de flux de travail et la mise en œuvre.
DOM Drapeaux vous permet de suivre les changements. Et
maintenir votre attention sur les éléments que vous travaillez avec.
2. Sizzy
Sizzy permet aux concepteurs et aux développeurs un simple
moyen de tester leurs sites dans plusieurs fenêtres.
Sizzy fournit une manière simple de vérifier votre
la conception en temps réel. Il offre une vue interactive de n’importe quel nombre d’appareils et de
les tailles d’écran. Vous pouvez même simuler un clavier de l’appareil, puis de basculer entre les
les modes paysage et portrait.
L’installation d’une extension Chrome va ajouter un bouton à votre barre d’outils, qui, lorsqu’il est cliqué va ouvrir l’URL dans le Sizzy plate-forme. L’extension va bloquer tous les “x-frame-options” en-têtes de sorte que vous serez en mesure de prendre un coup d’oeil à n’importe quel site web en ligne.
Sizzy est un projet open source, et vous pouvez voir le code ici.
3. Checkbot
Checkbot pouvez tester votre site pour la sécurité
questions et aussi l’audit de votre site web de la vitesse de chargement des pages. Il fournira
les concepteurs d’un moyen d’identifier les erreurs typiques et de recommander des améliorations
dans la sécurité du site, moteur de recherche, et de la vitesse du site.
À l’aide de plus de 50 meilleures pratiques métriques, il
procédera à la vérification d’un site web pour les meilleures pratiques SEO, liens cassés, la duplication de contenu et
plus. L’outil permettra également de valider CSS, JS et HTML.
Checkbot ramasse sur les designer et coder les erreurs
en temps réel, vous évitant ainsi d’avoir à revenir en arrière et vérifier votre travail
à plusieurs reprises.
Si vous êtes à la recherche d’un bon outil de qualité qui
va fixer rompu les liens de page, de s’assurer du contenu unique et les titres de page et de les éliminer
rediriger les chaînes de cet outil pourrait être utile.
Pour les concepteurs, il peut vous aider à réduire votre
Le CSS et le JS ainsi que de fournir des recommandations sur la façon de rapetisser votre CSS et
levier de mise en cache du navigateur.
4. GistBox Clipper
GistBox est l’un des plus utiles Chrome
extensions pour les concepteurs web.
GistBox pouvez créer un GitHub Gist partir de n’importe quel bloc de code sur la page web que vous consultez.
En haut à droite de n’importe quel code
bloc, vous verrez un petit bouton qui, lorsqu’il est pressé, va permettre un pop-up qui
vous avez la possibilité d’enregistrer le code de l’Essentiel.
Vous pouvez créer de nouveaux Gist avec un droit de la souris
cliquez et enregistrer des blocs de code pour plus tard, d’inspection et d’utilisation.
L’intégration avec GitHub permet aux concepteurs et
les développeurs de recueillir des blocs de code et de les manipuler ou de les classer pour
utiliser plus tard. Cela en fait un moyen pratique et efficace de Chrome extension de l’outil.
5. ColorZilla
ColorZilla Est incroyablement utile Chrome
extension pour la collecte des codes hex qui peuvent être marqués, étiquetés et classés
pour les individuels, des projets de web design.
Il vous permet de sélectionner un compte-gouttes outil
qui va extraire la couleur de n’importe quelle page web et l’enregistrer à l’ColorZilla
presse-papiers.
Avec lui, vous pouvez rapidement développer de couleur
les palettes pour les utiliser plus tard et comme un moyen de s’assurer que vous êtes en utilisant de la couleur
constamment dans la conception et le développement web.
ColorZilla agit également comme un analyseur couleur et
CSS editeur de dégradé, de sorte que vous pouvez convertir une image en CSS.
6. WhatFont
Cette
Extension Chrome est un vrai gain de temps pour ceux qui veulent utiliser leur
favori des polices Et de les intégrer dans
leurs propres projet de conception web.
WhatFont extension Chrome permet aux développeurs de
rapidement analyser et d’identifier presque n’importe quelle police sur n’importe quelle page web.
L’extension est bien développé et plutôt
que d’avoir à ouvrir les outils d’inspection de l’extension fonctionne simplement en agitant
la souris sur la police.
Non seulement cela, mais l’extension permettra également d’identifier le service qui est utilisé pour servir un Pages est allé de police et de soutien de Google font API et Typekit.
7. LightShot
LightShot est un moyen rapide de capture d’écran de l’outil
vous permet de capturer tout ou partie de la page, et soit de les télécharger ou
télécharger ou de l’envoyer à un tiers de destination.
Les captures d’écran prises par LightShot peuvent être utilisés et
partagé sur les médias sociaux ou imprimé.
Vous pouvez annoter et d’ajouter du texte, des flèches et des plus
pour la partie sélectionnée de l’écran. Mais peut-être l’un des plus brillants
les caractéristiques de ce simple outil pour les concepteurs web, c’est que par la sélection d’une image
vous pouvez alors procéder pour faire une recherche d’images de Google pour les images similaires
en ligne.
LightShot peut être configurée de plusieurs
les langues.
L’extension est écrit en JavaScript, et aussi le travail pour Windows, Chromebook, Linux et Mac OS. Il peut également être consulté comme une application de bureau qui en fait un excellent choix pour les concepteurs web qui sont à la charge sur plusieurs appareils.
8. Awesome Screenshot
Comme Lightshot, Génial Capture d’écran est un écran
et de capture d’image de l’extension.
Il ne diffèrent de Lightshot, cependant, dans un
certain nombre de façons. Génial Capture d’écran peut être configuré pour se connecter à tous vos
des captures d’écran avec votre Google drive.
Il permet la capture d’écran de ces éléments
qui sont au-delà de votre point de vue dans le but de capturer la page entière. Il a
d’édition supplémentaires et des outils d’annotation virgule permet de recadrer et de l’image
l’édition de tous au sein de l’extension.. ou avec l’utilisation d’autres Génial
Capture d’écran des applications
Vous pouvez étendre ses fonctionnalités en installant le
Chrome application pour ordinateur de bureau ainsi. L’extension permet également pour la vidéo
la capture et le partage de sorte que vous pouvez collaborer avec d’autres développeurs ou
les concepteurs lorsque l’on travaille sur un site.
Vous pouvez ajouter des images à une capture d’écran
ainsi que le bleu ou effacer des éléments que vous préféreriez ne pas montrer aux autres.
9. Vider Le Cache
L’effacement de la mémoire Cache de Chrome Extension Est rapide et
outil simple qui vous permet d’effacer les cookies et le cache de la page, vous êtes
en la regardant. Il élimine le besoin pour naviguer vers la page des paramètres de votre
navigateur afin de dégager quelques éléments de la page.
Pour les concepteurs web qui effectuent plusieurs
les modifications et souhaitez les voir en temps réel, c’est un excellent outil qui va
éliminer la plus grande partie de la frustration, de regarder les anciennes données.
Il y a des fois vous avez besoin de vider votre cache
et les cookies, mais la navigation pour les paramètres de google Chrome est fastidieux. Effacer la mémoire Cache permet d’
effacer la mémoire cache ainsi que des locaux ou globaux des cookies au clic d’un bouton.
Vider le Cache vous permettra de configurer les
les éléments que vous souhaitez effacer de la page. Les Variables comprennent la Trésorerie, les téléchargements,
tous les systèmes, données de formulaire, à la Trésorerie, l’indice de base de données, les données du plugin, les mots de passe et
plus.
10. Développeur Web Google Chrome
Extension
Le Développeur Web Google Chrome Extension
permet aux développeurs et aux concepteurs de facilement contrôler, d’analyser et de vérifier leur site web
des pages pour les violations des meilleures pratiques de conception, de codage, de la convivialité et de la recherche
l’optimisation des moteurs.
C’est un excellent tout-en-un outil qui n’est pas lourd
sur parcourez nos ressources, mais lui offre une tonne d’informations utiles pour la conception web
est également responsable de l’optimisation des moteurs de recherche les éléments à l’intérieur d’un site web ou
page.
L’
l’extension s’installe la barre d’outils avec plusieurs web developer tools.
L’outil vous donnera des indications sur la page
la taille, la largeur, et les dimensions qui font de conflit avec les meilleures pratiques d’utilisation sur
plusieurs appareils. Il permet de vérifier le JavaScript intégré et afficher votre
le site grâce à une simulation de différents appareils.
L’extension fonctionne bien sur Windows, Linux
et Mac OS. En plus du codage et des problèmes de conception, il fournira également à l’
aperçu de la balise meta informations, en-têtes de réponse, les informations de couleur, et
l’information topographique.
Vous pouvez passer en revue les principales caractéristiques de l’outil ainsi que c’est plein de capacités de développeur Chris Pedericks’ site web.
Sans doute, il existe une pléthore de haute
la qualité et utile Chrome extensions web designer ou développeur pourrait
utiliser.
Cette liste met en valeur quelques-uns des plus populaires
et des outils utiles. Avez-vous des recommandations pour les outils qui vous pensez que je suis
plus utile ou supérieures à celles de cette liste? Laissez-nous savoir.