10 Top Chrome Extensions pour votre flux de travail de développement Web

L'industrie du développement Web est rapide et suivre la tendance n'est pas facile. Par conséquent, il est crucial d'utiliser pleinement les outils existants. Cet article introduira dix extensions de chrome conçues pour optimiser votre flux de travail de développement Web et améliorer l'efficacité.

Points de base:

• Les extensions chromées sont de petits logiciels qui améliorent l'expérience de navigation et la productivité des développeurs Web. Certains choix populaires incluent le développeur Web, votre Framework Developer Tools, Daily 2.0, Toggl Button, Lighthouse, OneTab, CSS Peeper, User CSS, Web Developer Liste de développeur et Tampermonkey.
• Le développeur Web est une extension incontournable qui fournit une gamme d'outils d'analyse Web, notamment la désactivation de JavaScript, les contours d'image, le redimensionnement des fenêtres du navigateur, la vérification HTML et la visualisation des informations de balise META.
• Daily 2.0 collecte les derniers articles de développement Web et techniques sur Internet et les affiche sur de nouveaux onglets dans une disposition conviviale pour aider les développeurs à comprendre les nouvelles de l'industrie.
• Tampermonkey est un gestionnaire de scripts utilisateur qui permet aux développeurs de modifier le comportement Web, d'ajouter des fonctionnalités supplémentaires, d'automatiser les tâches répétitives ou d'ajuster les dispositions de sites Web à leurs préférences personnelles.

Qu'est-ce qu'une extension chromée?

Comme indiqué dans le portail des développeurs Chrome, les extensions sont de petits logiciels qui personnalisent votre expérience de navigation. Cela peut être quelque chose d'un vérificateur d'orthographe et de grammaire pour vérifier ce que vous tapez, à un gestionnaire de mots de passe qui enregistre les détails de connexion de votre site Web préféré.

Chrome propose des milliers d'extensions, qui sont toutes disponibles gratuitement dans la boutique en ligne Chrome. Vous pouvez vérifier l'extension actuellement installée en visitant le lien suivant dans votre navigateur: chrome://extensions/.

Pourquoi choisir Chrome?

Cet article se concentre sur Google Chrome car il a une énorme part de marché (actuellement 65% et est toujours en croissance). Il existe également de nombreuses extensions de support de navigateur à base de chrome. Ceux-ci incluent Brave, Vivaldi et le prochain Microsoft Edge. Cependant, nous devons nous rappeler que Chrome n'est pas la seule option, et bon nombre des extensions mentionnées ici ont des équivalents Firefox et / ou Opera.

Enfin, avant de fouiller dans l'extension, prenez un moment pour vous rappeler que Chrome est un logiciel propriétaire publié par Google. Comme nous le savons tous, il y a des problèmes de confidentialité avec les produits Google, vous pouvez donc visiter GitHub et visualiser le projet de chrome non googlé. Comme son nom l'indique, il s'agit de Google Chromium et n'inclut pas l'intégration avec Google.

1.

Nous commencerons par le couteau suisse de l'extension de l'armée. Avec plus d'un million d'utilisateurs et une note de 4,5 étoiles dans le développeur Web Chrome est un incontournable. Il ajoute un bouton de barre d'outils à Chrome qui affichera un grand nombre d'outils qui peuvent être utilisés pour n'importe quelle page Web. Ces outils sont regroupés par catégorie (CSS, formulaires, images, etc.), vous permettant d'effectuer des opérations telles que la désactivation de JavaScript, le contournement des images avec des attributs ALT manquants, le redimensionnement des fenêtres du navigateur, la vérification de la page HTML, la visualisation des informations sur la balise META, et plus .

Vous pouvez le télécharger à partir d'ici.

2. Si vous utilisez JavaScript Framework pour développer votre application sans les outils de développeur qui utilisent le framework, vous pouvez faire quelque chose de mal. Permettez-moi de vous expliquer avec Vue comme exemple.

Si vous avez besoin de déboguer une application Vue, ou si vous voulez simplement connaître la situation dans les coulisses, que devez-vous faire? La vérification du code source de la page affichera le HTML que Vue rend, mais l'application Vue est bien plus que cela. Qu'en est-il des accessoires, des données ou des propriétés de calcul du composant? Ou qu'en est-il de l'état ou du routage de votre application? Comment vérifiez-vous ces contenus?

La bonne nouvelle est que les outils de développeur Vue.js peuvent répondre à vos besoins. Installez simplement l'extension et ouvrez-la sur la page exécutant la version Vue Development pour voir exactement ce qui se passe dans l'application.

Ce qui suit est un lien pour télécharger les trois outils du développeur Framework:

vue

• react
• Ember

3.

parce que nous travaillons dans une industrie au rythme rapide, suivre les nouvelles et la dynamique peut parfois être un défi. Daily 2.0 a vu le jour, une extension qui collecte les derniers articles de développement Web et techniques d'Internet et les affiche sur de nouveaux onglets dans une disposition de maçonnerie attrayante. Cette extension est facile à utiliser. Lorsque vous l'installez, il vous sera demandé de choisir parmi un tas de catégories qui vous intéressent, et Daily 2.0 fera le reste. Volez votre souris sur la barre latérale de la nouvelle page d'onglet pour filtrer votre flux par des balises et des sources.

Vous pouvez l'obtenir à partir d'ici.

4.

Si vous êtes un pigiste occupé, si vous travaillez à distance, ou si vous n'avez qu'à suivre le temps que vous passez sur votre projet, Toggl est pour vous.

Cette extension vous oblige à créer un compte avant de l'utiliser. Une fois connecté, il permet un suivi de productivité rapide et facile en temps réel, toutes les données sont stockées dans votre compte Toggl. Il est livré avec une minuterie Pomodoro intégrée, ainsi que des intégrations de nombreux services Internet tels que Github, Trello et Slack. L'une de mes fonctionnalités préférées est que lorsque vous êtes inactif et que la minuterie est en cours d'exécution, il apparaît des notifications vous permettant de rejeter l'heure.

Toggl peut être téléchargé à partir d'ici.

5. Lighthouse est un outil d'automatisation open source pour améliorer les performances et la qualité des pages Web. Vous pouvez l'installer via le Chrome Web Store, ou commencer avec Chrome 60 et l'exécuter directement à partir de l'onglet Audit des Devtools dans votre navigateur (appuyez sur

F12

et sélectionnez l'audit). Lorsque le phare est ouvert, cliquez sur Générer le rapport et sélectionnez la catégorie d'audit à inclure. Lighthouse exécutera l'audit sélectionné contre la page et générera un rapport sur l'exécution de la page. Vous pouvez utiliser des audits ratés comme métrique pour améliorer votre page. Chaque revue contient également des liens vers d'autres lectures et correctifs potentiels.

Le phare est fabriqué par Google et utilise probablement les mêmes facteurs de classement que leurs moteurs de recherche. Cela signifie qu'il peut vous donner quelques-uns des meilleurs conseils sur la façon d'optimiser votre site Web.

Vous pouvez l'obtenir à partir d'ici.

6.

C'est le cas. Vous avez affaire à votre application Web et rencontrez soudainement une erreur inattendue. Vous passez des heures à suivre le correctif et lorsque vous avez terminé, il y a beaucoup d'onglets dans votre navigateur. Ajoutez-les à la page onglet du projet sur lequel vous travailliez hier, et tous les articles que vous n'avez pas eu le temps de lire, et bientôt vous vous retrouverez dans une confusion de tag. C'est là que l'extension Onetab peut vous aider à récupérer votre santé mentale. Chaque fois que vous vous retrouvez à avoir trop d'onglets, cliquez sur l'icône OneTab pour convertir tous les onglets en liste. Lorsque vous devez accéder à nouveau aux onglets, vous pouvez les récupérer individuellement ou à la fois. S'il est utilisé correctement, cette extension peut considérablement améliorer votre productivité.

Onetab est disponible en téléchargement à partir d'ici.

7.

CSS Peeper se positionne comme une visionneuse CSS conçue pour les concepteurs, vous permettant d'extraire CSS et de construire de beaux guides de style. Il vous permet de vérifier les règles CSS pour n'importe quel élément de la page et de présenter toutes les informations de style de manière simple et claire. Il répertorie également toutes les couleurs et images de la page qui peuvent être copiées dans le presse-papiers ou exportées en un clic sur un bouton.

Cette extension est plus facile à utiliser que la fonctionnalité "Check Elements" intégrée du navigateur, le seul inconvénient est que vous ne pouvez pas modifier dynamiquement le style des éléments.

Vous pouvez trouver CSS Peeper ici.

8. Cette extension fonctionne avec CSS Peeper et offre un moyen rapide et facile d'ajouter CSS personnalisé à vos pages Web. L'utilisateur CSS est facile à utiliser après l'installation - cliquez sur l'icône d'extension et entrez votre style dans le panneau latéral coulissant.

Une belle fonctionnalité de cette extension est qu'elle conserve votre style CSS personnalisé. Cela signifie que vous pouvez également l'utiliser pour masquer en permanence des fonctionnalités distrayantes sur les sites Web que vous visitez fréquemment, comme le widget Trend sur Twitter.

Vous pouvez télécharger CSS utilisateur à partir d'ici.

9.

Les nouveaux projets en ligne peuvent être stressants à tout moment - il y a beaucoup à retenir et à coordonner. Par exemple, vous souvenez-vous de vérifier le HTML du site Web? Avez-vous vérifié le référencement? Qu'en est-il des vérifications des fonctions auxiliaires? L'exécutez-vous via la vitesse de la page Google? La liste continue. C'est là que l'extension de la liste de contrôle du développeur Web peut vous aider. Il analyse les violations des meilleures pratiques dans une page Web et vous permet de découvrir les problèmes du site Web avant de remettre la page Web à un client. Cette extension est un excellent programme compagnon pour webdevchecklist.com.

La liste de contrôle du développeur Web est disponible en téléchargement à partir d'ici.

10.

Les scripts utilisateur sont de petits programmes informatiques qui vous permettent de modifier le comportement des pages Web. Ceux-ci peuvent être utilisés pour diverses tâches, telles que l'ajustement de la disposition du site Web à vos préférences, l'ajout de fonctionnalités supplémentaires à la page ou l'automatisation des tâches répétitives.

Tampermonkey est un gestionnaire de scripts utilisateur - une extension qui vous permet de gérer et d'exécuter des scripts utilisateur et de créer vos propres scripts utilisateur. C'est la dernière fonctionnalité qui en fait une place dans la liste, car vous pouvez utiliser efficacement Tampermonkey pour simplifier votre flux de travail de développement Web. Par exemple, je travaille sur une grande forme qui doit être testée récemment. Au lieu de saisir manuellement des valeurs à chaque fois, j'ai écrit un script Tampermonkey pour ce faire pour moi, en enregistrant d'innombrables pressions de touches.

Tampermonkey peut être trouvé ici.

Conclusion

Dans cet article, nous introduisons dix de mes extensions chromées préférées pour améliorer votre flux de travail de développement Web. J'espère que cela vous donne une inspiration, mais rappelez-vous que cette liste n'est nullement exhaustive.

Si vous avez manqué votre extension préférée, ou si vous avez un joyau à partager avec d'autres lecteurs, j'aimerais avoir de vos nouvelles dans les commentaires ci-dessous.

Merci d'avoir lu.

FAQ (FAQ) pour les extensions de chrome pour les workflows de développement Web

Quelles sont les principales extensions chromées pour les workflows de développement Web?

Il existe plusieurs extensions chromées qui peuvent améliorer considérablement votre flux de travail de développement Web. Certaines des principales extensions incluent le développeur Web, le Resizer Window, Colorzilla, CSSViewer et JSONView. Ces extensions fournissent une gamme de fonctionnalités, de la vérification des éléments HTML et CSS sur n'importe quelle page Web à la redimensionnement des fenêtres du navigateur pour simuler diverses résolutions d'écran.

Comment utiliser le développeur Web Chrome Extension pour améliorer mon flux de travail?

Extension de développeur Web ajoute un bouton de barre d'outils à votre navigateur qui contient divers outils de développeur Web. Cela peut vous aider à accéder rapidement aux fonctionnalités telles que la désactivation de JavaScript, la visualisation du CSS et la vérification des éléments. Il vous aide également à vérifier votre code et à vérifier les erreurs ou les incohérences, ce qui rend votre processus de développement Web plus efficace.

Comment l'extension de la fenêtre Resizer améliore-t-elle le développement Web?

Window Resizer vous permet de redimensionner les fenêtres de votre navigateur pour simuler diverses résolutions d'écran. Ceci est particulièrement utile pour les tests de conception réactifs, car il vous permet de voir à quoi ressemble votre site Web ou votre application sur différents appareils. Vous pouvez choisir parmi la liste des résolutions d'écran prédéfinies ou créer votre propre taille personnalisée.

Comment Colorzilla aide-t-il au développement Web?

Colorzilla est un outil pratique pour les développeurs Web et les graphistes. Il comprend des pailles, des sélecteurs de couleurs, des générateurs de gradient et de nombreux autres outils liés aux couleurs. Avec Colorzilla, vous pouvez obtenir des lectures de couleurs à partir de n'importe quel point de votre navigateur et l'ajuster rapidement ou le coller dans un autre programme.

Quel est le but de CSSViewer dans le développement Web?

CSSViewer est une simple visionneuse de propriétés CSS. Il vous permet de survoler votre souris sur n'importe quel élément sur une page Web et d'afficher ses propriétés CSS. Ceci est utile lorsque vous essayez de comprendre comment implémenter une conception spécifique ou déboguer votre propre code CSS.

Comment JSONView améliore-t-il le flux de travail de développement Web?

JSONVIEW est une extension Chrome qui aide à afficher les documents JSON dans votre navigateur. En règle générale, les documents JSON sont affichés uniquement en texte brut. JSONVIEW Formats et met en évidence ces documents pour les rendre plus faciles à lire. Ceci est particulièrement utile lorsque vous utilisez l'API ou toute autre données de format JSON.

Quelles sont les extensions chromées utilisées pour déboguer JavaScript?

Oui, il existe plusieurs extensions de chrome qui peuvent être utilisées pour déboguer JavaScript. Le plus populaire d'entre eux est le notificateur d'erreurs JavaScript. Il vous informe des erreurs JavaScript via une icône ou une fenêtre contextuelle de notification dans la barre de barre d'outils.

Comment utiliser les extensions de chrome pour améliorer mon efficacité de codage?

Les extensions de chrome comme Clear Cache et Session Buddy peuvent considérablement améliorer votre efficacité de codage. Clear Cache vous permet d'effacer les caches, les cookies et autres données de navigation en un seul clic, tandis que Session Buddy vous permet de gérer les séances de navigateur, de vous gagner du temps et de vous aider à rester organisé.

Quelles sont les extensions chromées pour la conception Web?

Oui, il existe plusieurs extensions de chrome disponibles pour la conception Web. Certaines des extensions les plus importantes incluent WhatFont, qui vous permet d'identifier les polices utilisées sur une page Web, et un compte-gouttes, qui vous permet de sélectionner les couleurs à partir d'une page Web.

Comment trouver et installer des extensions de chrome?

Vous pouvez trouver et installer des extensions chromées à partir de la boutique de Web Chrome. Recherchez simplement l'extension souhaitée et cliquez sur "Ajouter à Chrome" pour l'installer. Vous devrez peut-être redémarrer votre navigateur pour faire fonctionner l'extension.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!