10 principales extensions de Chrome pour votre flux de travail de développement Web –

En tant que développeurs Web, nous travaillons dans un secteur très dynamique et il peut parfois être difficile de rester à la pointe de la technologie. C’est la raison pour laquelle je pense que nous devrions tirer pleinement parti des outils dont nous disposons pour garder notre tête hors de l’eau. Aujourd'hui, je vais vous présenter dix extensions Chrome conçues pour optimiser votre flux de travail de développement Web, ce qui vous rendra un peu plus productif.

Que sont les extensions Chrome?

Comme on peut le lire sur Développeur de Chrome portail les extensions sont de petits logiciels qui peuvent personnaliser votre expérience de navigation. Cela peut être un vérificateur d'orthographe et de grammaire qui vérifie votre écriture lors de la frappe, ou un gestionnaire de mots de passe qui enregistre les informations de connexion de vos sites favoris.

Il existe littéralement des milliers d'extensions disponibles pour Chrome. téléchargé gratuitement à partir du Chrome Web Store . Vous pouvez vérifier les extensions que vous avez actuellement installées en visitant le lien suivant sur votre navigateur: chrome: // extensions / .

Pourquoi Chrome?

Cet article porte sur le navigateur Google Chrome en raison de son énorme part de marché (actuellement de 65% et en hausse). De nombreux navigateurs basés sur Chrome prennent également en charge les extensions. Ceux-ci incluent Brave, Vivaldi et, prochainement, Microsoft Edge. Cependant, nous devons nous rappeler que Chrome n'est pas le seul spectacle en ville et que beaucoup des extensions mentionnées ici ont un équivalent Firefox et / ou Opera .

Enfin, avant Lorsque nous plongeons dans les extensions, prenez une minute pour vous rappeler que Chrome est un logiciel propriétaire publié par Google. Comme nous le savons tous, l'utilisation des produits Google soulève des problèmes de confidentialité pour . Vous pouvez donc vous rendre sur GitHub et consulter le projet à chrome non saturé . Comme son nom l'indique, il s'agit de Google Chrome, sans intégration avec Google.

1. Développeur Web

Commençons par le couteau à rallonges de l’armée suisse. Avec plus d'un million d'utilisateurs et 4,5 étoiles sur le Chrome Web Store, Web Developer est un must. Il ajoute à Chrome un bouton de la barre d’outils qui, lorsque vous cliquez dessus, affiche une multitude d’outils pouvant être utilisés sur n’importe quelle page Web. Celles-ci sont regroupées par catégorie (CSS, formulaires, images, etc.) et vous permettent, par exemple, de désactiver JavaScript, d'attribuer les attributs manquants alt aux images, de redimensionner la fenêtre du navigateur, de valider le code HTML d'une page, d'afficher celui d'une page. balises méta et bien plus encore.

Vous pouvez le télécharger ici .

Si vous développez une application avec un cadre JavaScript et vous n'utilisez pas les outils de développement de ce framework, alors vous le faites probablement mal. Laissez-moi vous expliquer en prenant l'exemple de Vue.

Si vous avez une application Vue que vous devez déboguer, ou si vous voulez juste voir ce qui se passe sous le capot, que faites-vous? L’inspection du code source de la page vous montrera le code HTML rendu par Vue, mais une application Vue représente bien plus que cela. Qu'en est-il des accessoires, des données ou des propriétés calculées d'un composant? Ou l'état ou le routage de votre application? Comment inspectez-vous l'un d'entre eux?

La bonne nouvelle est que les outils de développement de Vue.js vous ont couvert. Installez simplement l'extension et ouvrez-la sur une page exécutant une version de développement de Vue pour voir exactement ce qui se passe dans votre application.

Vous trouverez ci-dessous des liens permettant de télécharger les outils de développement pour les trois grands frameworks.

3. Daily 2.0 – Source for Developer Occupé

Alors que nous travaillons dans une industrie en pleine effervescence, se tenir au courant de l'actualité peut parfois s'avérer un défi. Entrez Daily Daily, une extension qui rassemble les dernières publications en matière de développement Web et de technologies sur Internet et les présente sous une forme de maçonnerie attrayante sur votre nouvel onglet.

Cette extension est facile à utiliser. Lorsque vous l'installez, il vous est demandé de choisir parmi un ensemble de catégories qui vous intéressent et Daily 2.0 fait le reste. En survolant la barre latérale de la nouvelle page à onglet, vous pouvez filtrer votre flux en fonction des balises et des sources.

Vous pouvez accéder à cette source . ].

4. Bouton Toggl: Suivi de la productivité et du temps

Si vous êtes un pigiste occupé, si vous travaillez à distance ou si vous avez juste besoin de suivre le temps que vous passez sur un projet, Toggl est fait pour vous.

Cette extension nécessite que vous créiez un compte avant de pouvoir l'utiliser. Une fois connecté, il permet un suivi rapide et facile de la productivité en temps réel avec toutes les données stockées dans votre compte Toggl. Il est livré avec une minuterie Pomodoro intégrée, ainsi que des intégrations pour une multitude de services Internet (tels que GitHub, Trello et Slack). Une de mes fonctionnalités préférées est qu’une notification s’affiche lorsque vous êtes inactif et que le chronomètre était en marche, ce qui vous permet d’écarter l’heure.

[19659004] Toggl peut être téléchargé ici .

5. Lighthouse

Lighthouse est un outil automatisé à source ouverte pour améliorer les performances et la qualité de vos pages Web. Vous pouvez l'installer via le Chrome Web Store ou, à partir de la version 60 de Chrome, vous pouvez l'exécuter directement à partir de l'onglet Audits de l'outil de développement du navigateur (appuyez sur F12 et sélectionnez . ] Audits ).

Une fois que vous avez ouvert Lighthouse, cliquez sur Générer un rapport et sélectionnez éventuellement les catégories d'audit à inclure. Lighthouse exécutera les audits sélectionnés sur la page et générera un rapport sur l'état de la page. À partir de là, vous pouvez utiliser les audits défaillants comme indicateurs pour améliorer la page. Chaque audit comprend également des liens vers des lectures supplémentaires et des solutions potentielles.

Le phare est produit par Google et utilise vraisemblablement les mêmes facteurs de classement que leur moteur de recherche. Cela signifie qu'il peut vous offrir les meilleurs conseils pour optimiser votre site.

Vous pouvez le saisir ici .

6. OneTab

Voici donc la situation. Vous travaillez sur votre application Web lorsque, soudainement, vous vous heurtez à un bogue inattendu. Vous passez quelques heures à rechercher un correctif et lorsque vous avez terminé, de nombreux onglets sont ouverts dans votre navigateur. Ajoutez ceux-ci aux onglets du projet sur lequel vous travailliez hier, ainsi que tous les articles que vous n'avez pas encore appris à lire, et vous vous retrouverez bientôt dans le chaos des onglets.

l'extension OneTab peut vous aider à retrouver une mesure de santé mentale. Chaque fois que vous vous retrouvez avec trop d'onglets, cliquez sur l'icône OneTab pour convertir tous vos onglets en liste. Lorsque vous devez à nouveau accéder aux onglets, vous pouvez les restaurer individuellement ou tous à la fois. Utilisée correctement, cette extension peut vous donner un avantage considérable en termes de productivité.

OneTab peut être téléchargé à partir d’ici .

7. CSS Peeper

CSS Peeper se présente comme un visualiseur CSS adapté aux concepteurs, ce qui vous permet d'extraire du CSS et de créer de superbes guides de style. Pour ce faire, il vous permet d’examiner les règles CSS pour n’importe quel élément d’une page et de présenter toutes les informations de style de manière simpliste, mais bien organisée. Elle répertorie également toutes les couleurs et images d'une page, qui peuvent être copiées dans votre presse-papiers ou exportées par simple pression sur un bouton.

Cette extension est considérablement plus simple à utiliser que le navigateur intégré Inspect Element le seul inconvénient est que vous ne pouvez pas modifier les styles d'un élément à la volée.

Vous pouvez trouver CSS Peeper ici .

8 . Utilisateur CSS

Cette extension va de pair avec CSS Peeper, offrant un moyen simple et rapide d’ajouter une feuille de style CSS personnalisée à une page Web. Une fois installé, User CSS est facile à utiliser: vous cliquez sur l'icône des extensions et entrez vos styles dans le panneau latéral qui s'ouvre.

Une fonctionnalité intéressante de cette extension est la persistance de vos styles CSS personnalisés. Cela signifie que vous pouvez également l'utiliser pour masquer de manière permanente les fonctionnalités gênantes sur les sites Web que vous fréquentez, par exemple le widget de tendances sur Twitter.

Vous pouvez télécharger l'utilisateur CSS ici .

9. Liste de contrôle du développeur Web

Vivre un nouveau projet peut être stressant dans le meilleur des cas – il y a toute une série de choses à retenir et à coordonner. Par exemple, avez-vous pensé à valider le code HTML du site? Avez-vous vérifié le référencement? Qu'en est-il des contrôles d'accessibilité? L'avez-vous exécuté via Google Page Speed? La liste est longue.

C’est là que l’extension Web Developer Checklist peut aider. Il analyse une page Web à la recherche de violations des meilleures pratiques et vous permet de découvrir les problèmes sur votre site Web avant de les transmettre à votre client. L'extension est un compagnon de l'excellente WebDevChecklist.com .

La liste de contrôle du développeur Web peut être téléchargée ici .

dix. Tampermonkey

Les scripts d'utilisateurs sont de petits programmes informatiques permettant de modifier le comportement d'une page Web. Celles-ci peuvent être utilisées pour diverses tâches, telles que modifier la disposition d'un site en fonction de vos préférences, ajouter des fonctionnalités supplémentaires à une page ou automatiser des tâches répétitives.

Tampermonkey est un gestionnaire de scripts d'utilisateurs, une extension qui vous permet de gérer et d'exécuter usercripts, ainsi que créer votre propre. Et c’est cette dernière fonctionnalité qui lui a valu une place dans la liste, car vous pouvez utiliser Tampermonkey à bon escient pour rationaliser votre processus de développement Web. Par exemple, je travaillais récemment sur un grand formulaire que je devais tester. Au lieu d'entrer manuellement les valeurs à chaque fois, j'ai écrit un script Tampermonkey pour le faire pour moi, ce qui m'a évité d'innombrables frappes au clavier.

Tampermonkey peut être trouvé ici .

Conclusion

Dans cet article, nous avons examiné dix de mes extensions Chrome préférées pour dynamiser votre flux de travail de développement Web. J'espère que cela vous a inspiré, mais n'oubliez pas que cette liste n'est en aucun cas exhaustive.

Si j'ai raté votre extension préférée ou si vous avez un joyau à partager avec d'autres lecteurs, je serais ravi de vous entendre dans les commentaires ci-dessous.

Merci d'avoir lu.