Boostez la productivité de votre développeur Web

Dernière mise à jour le 13 octobre 2020

Si vous aimez faire du développement Web comme moi, vous devez connaître l'importance d'avoir d'excellents outils dans votre navigateur Web qui simplifient votre travail et augmentent votre productivité. C'est le cas de Google Chrome et de l'offre complète des extensions Chrome qui augmentera la productivité de votre développeur Web.

Oui, Firefox est un excellent navigateur pour le développement Web, et Firefox Developer Edition est fantastique pour le débogage et les tests CSS. Cependant, Chrome a une longue liste d'extensions d'outils qui prennent en charge les dernières fonctionnalités Web et les outils de développement qui en font un favori parmi de nombreux développeurs Web pour augmenter la productivité des développeurs Web.

Chrome Marketplace propose certaines des meilleures extensions, anciennes ou nouvelles, pour aider les développeurs à développer et tester un site Web ou une page de destination. Ci-dessous, vous connaîtrez certaines des meilleures extensions que je suggère comme "incontournables" dans votre boîte à outils de développement Web.

Extensions Chrome qui augmentent la productivité de votre développeur Web

Assistant de balise

Tag Assistant aide à dépanner l'installation de diverses balises Google, y compris Google Analytics, Google Tag Manager, etc. Tag Assistant vous permet de vérifier que vous avez correctement installé différentes balises Google sur votre page. Accédez simplement à n'importe quelle page et Tag Assistant vous indiquera les balises présentes, signalera les erreurs détectées et suggérera des améliorations pouvant être apportées à votre mise en œuvre. La plupart des balises Google sont vérifiées, y compris Google Analytics, Adwords Conversion Tracking, Google Tag Manager, etc.

WhatRuns

Découvrez ce qui gère un site Web - frameworks, outils d'analyse, plugins WordPress, polices - vous l'appelez. L'extension WhatRuns est à un clic pour vous permettre de trouver les technologies utilisées sur n'importe quel site Web que vous visitez. Il détecte même les outils et services nouveaux et à venir, des outils de développement et des réseaux publicitaires aux plugins et thèmes WordPress. Non seulement cela - vous pouvez suivre des sites Web afin d'être averti lorsqu'ils utilisent de nouvelles technologies ou suppriment des technologies existantes.

Outils de développement Vue.js

Son nom est très explicite. Il s'agit d'une extension Chrome et Firefox DevTools pour le débogage des applications Vue.js. Il vous permet d'inspecter les hiérarchies des composants Vue.js dans les outils de développement Chrome. Vous obtiendrez un nouvel onglet dans vos Chrome DevTools : "Vue".

Outils pour les développeurs React

En tant que Devtools Vue.js, React Developer Tools est une extension Chrome et Firefox DevTools pour la bibliothèque JavaScript open source React. Il vous permet d'inspecter les hiérarchies des composants React dans les outils de développement Chrome. Vous obtiendrez deux nouveaux onglets dans vos Chrome DevTools : "Composants" et "Profiler". L'onglet Composants vous montre les composants React racine qui ont été rendus sur la page et les sous-composants qu'ils ont fini par rendre. En sélectionnant l'un des trois composants, vous pouvez inspecter et modifier ses accessoires et son état actuels dans le panneau de droite. Dans le fil d'Ariane, vous pouvez inspecter le composant sélectionné, le composant qui l'a créé, le composant qui l'a créé, etc.

Visionneuse JSON géniale

Cette extension vous aide à visualiser la réponse JSON de n'importe quel site Web ou demande d'API dans votre navigateur. Il vous présente de superbes expériences d'embellissement JSON. Il possède de nombreuses caractéristiques uniques qui le rendent génial. Il aide les développeurs à formater ou à embellir JSON et à parcourir les propriétés dans une vue graphique. Il comporte un graphique convivial et interactif représentant la réponse de votre serveur ou votre JSON fourni dans la section d'entrée de la vue graphique.

Inspecteur META SEO

Utile pour inspecter les métadonnées trouvées dans les pages Web, généralement non visibles lors de la navigation. Les métadonnées ne sont pas seulement les balises méta HTML habituelles, mais les balises XFN, divers microformats, l'attribut canonique récemment introduit, les liens sans suivi, etc. Cette extension s'adresse principalement aux développeurs Web qui ont besoin de vérifier le code HTML de leur site pour suivez les directives de Google pour les webmasters, mais même pour ceux qui sont curieux de connaître le contenu d'une page qui n'est généralement pas visible mais qui peut révéler des propriétés de site intéressantes. Il dispose également d'une option d'impression/exportation qui vous permet d'imprimer ou d'enregistrer au format PDF le rapport ou de copier/coller les données dans votre outil préféré.

Visionneuse rapide de style HTML

Visualiseur rapide de style d'élément HTML DOM. Déplacez simplement votre souris et elle affiche les styles de la cible.

CSSViewer

CSSViewer est un simple visualiseur de propriétés CSS pour Chrome et Firefox. Pour activer CSSViewer, cliquez sur l'icône de la barre d'outils, puis survolez tout élément que vous souhaitez inspecter dans la page actuelle.

Polices Ninja

Identifiez les polices de n'importe quel site Web, ajoutez-les à vos favoris, essayez-les et achetez-les. Il analyse les fichiers de polices pour obtenir des résultats plus précis. Survolez n'importe quel texte pour obtenir le nom de la police et les propriétés CSS. La fenêtre principale de l'extension affichera également un résumé de toutes les polices utilisées sur un site Web. Vous pouvez obtenir plus d'informations sur les polices. Vérifiez combien de styles sont disponibles, leur fonderie et leur prix.

J'aime l'adaptatif - Tests mobiles/réactifs

Outil pour tester des sites Web réactifs. L'extension Chrome ILOVEADAPTIVE ajoute un bouton à votre barre d'outils. Lorsque vous cliquez sur le bouton, il ouvrira l'URL sur laquelle vous vous trouvez dans l'onglet actuel. Les fonctionnalités principales incluent la prévisualisation d'une URL sur plusieurs appareils à la fois, le filtrage des appareils, le filtrage du système d'exploitation, la modification de leur quantité, le zoom, l'affichage du panneau ios, le passage en mode paysage et portrait.

Web Vitals

Mesurez les métriques d'un site sain. Les Web Vitals sont des signaux de qualité essentiels pour fournir une excellente UX sur le Web (https://web.dev/vitals). Cette extension mesure les Core Web Vitals, fournissant un retour instantané sur les métriques de chargement, d'interactivité et de changement de mise en page. Cela correspond à la façon dont ces mesures sont mesurées par Chrome et communiquées à d'autres outils Google.

Règle de page Redux

Une règle Web Developer\Designer pour obtenir des dimensions et un positionnement en pixels parfaits pour mesurer les éléments sur n'importe quelle page Web. Page Ruler Redux est un outil de développement et de conception Web de base qui vous permet d'obtenir des mesures parfaites au pixel près des éléments Web. Il est conçu pour le développement frontal de sites Web, la conception Web ou toute tâche dont vous pourriez avoir besoin pour obtenir des mesures de pixels parfaites de tous les éléments Web.

Grille Règle

Créez des grilles et mesurez leur distance facilement. Il permet de créer des grilles verticales et horizontales, style Photoshop. Il a une règle pour mesurer la distance entre vos grilles aussi.

Décrivez-le

Cette extension décrit chaque élément HTML d'une page Web, vous permettant de voir les bordures des éléments. L'extension prend en charge toutes les couleurs arc-en-ciel (rouge, orange, jaune, vert, bleu, indigo et violet). Il a également la fonctionnalité de supprimer le contour après son application.

Émulateur de navigateur mobile

Testez des pages Web mobiles et réactives sur votre bureau. Sélectionnez les résolutions d'écran mobiles les plus courantes en un seul clic de souris. La page de l'onglet actif s'ouvrira dans une fenêtre séparée.

Eh bien, c'est ma liste d'extensions Chrome que je suggère que vous devriez avoir dans votre navigateur Chrome pour augmenter la productivité de votre développeur Web. Oui, oui… Il existe d'autres extensions utiles et intéressantes que je n'ai pas incluses dans la liste ci-dessus. Mais, le moment venu, je continuerai à explorer d'autres extensions fantastiques qui seront probablement répertoriées dans un futur blog.