👨🏼‍🚀 🎽 👼🏾 Extensions de navigateur requises par chaque développeur Web 👩🏼‍🤝‍👩🏻 🕴🏼 ℹ️

Les navigateurs modernes ne sont pas seulement d'excellentes applications de navigation Web.

Les navigateurs sont également des plates-formes qui offrent aux développeurs Web une tonne d'outils pratiques pour les aider à créer d'excellents sites. À la disposition du développeur, en plus des outils intégrés, il existe un grand nombre d'extensions de navigateur. L'auteur de l'article, dont nous publions aujourd'hui la traduction, a sélectionné, à son avis, les meilleures extensions conçues pour aider les programmeurs à résoudre une variété de tâches auxquelles ils sont confrontés. Ce sont principalement des extensions pour Google Chrome.

Outils de développement pour React / Redux et Vue.js

React et Vue.js sont des outils de développement frontaux bien connus. Afin de travailler avec eux aussi efficacement que possible, il vaut la peine d'installer les extensions de navigateur appropriées.

L'extension React Developer Tools améliore les capacités des outils de développement. En l'utilisant, vous pouvez examiner les composants React, les propriétés transmises aux composants et l'état des composants. Cela peut apporter de réels avantages à un développeur React.

React Developer Tools

Si vous rencontrez des problèmes lors de l'utilisation de l'état de l'application, l'extension Redux DevTools peut vous être utile . Il peut être utilisé pour travailler avec des états organisés de différentes manières; il fonctionne particulièrement bien lorsqu'il est utilisé avec Redux. Au fait, voici un conseil pour vous. Installez cette extension et visitez un site comme airbnb.com. Il utilise React / Redux, vous pourrez donc, avec l'aide de Redux DevTools, découvrir comment fonctionne la gestion de l'état des pages de ce site. Pour moi - c'est donc très instructif.

Vue.js devtools est le même que React Developer Tools, mais pour Vue.js. Cette extension est très pratique pour déboguer les composants Vue et est utile à tous ceux qui utilisent ce framework.

Vue.js devtools

Jsonview

Avez-vous déjà compris que dans les navigateurs d'autres programmeurs, les données JSON semblent claires et précises, mais pas dans les vôtres? Peut-être que le fait est que d'autres utilisent l'extension JSONView . Cette extension formate très rapidement et avec précision les données JSON. JSONView est certainement l'une de mes extensions de navigateur préférées.

Jsonview

Renifleur de bibliothèque

Library Sniffer est un excellent outil pour tous ceux qui veulent découvrir rapidement quels outils, bibliothèques ou frameworks ont été utilisés pour créer les pages qu'ils consultent. Par exemple, avec l'aide de Library Sniffer, vous pouvez découvrir avec quoi un site a été créé avec: WordPress, Drupal, React, Vue.js, AngularJS ...

Renifleur de bibliothèque

CSS Scan 2.0

CSS Scan 2.0 est une extension utile qui permet à un développeur d'explorer et de copier CSS simplement en survolant des éléments de page. Certes, il a un moins. Le fait est que pour travailler avec, vous devez acheter une licence.

CSS Scan 2.0

Cette extension a une alternative gratuite - CSS Peeper . Il est conçu principalement pour les concepteurs et non pour ceux qui écrivent du code.

développeur web

L'extension Web Developer vous permet d'équiper votre navigateur d'un panneau contenant de nombreux outils différents. Avec leur aide, par exemple, vous pouvez désactiver JavaScript sur les pages, contrôler l'emplacement de la page et travailler avec des images. Cette extension est disponible pour Chrome et Firefox.

développeur web

Whatfont

WhatFont est une jolie petite extension qui vous permet d'identifier les polices utilisées sur les pages Web. Pour savoir à quelle police le fragment de texte est destiné, il suffit d'activer l'extension et de déplacer le pointeur de la souris sur ce fragment. Comme vous le voyez, travailler avec lui est extrêmement simple. Comme l'extension précédente, elle peut être utilisée par ceux qui travaillent dans Chrome et ceux qui travaillent dans Firefox.

Whatfont

Colorzilla

L' extension ColorZilla peut être utilisée à la fois dans Chrome et Firefox. Il donne au développeur un outil pour prendre des épreuves couleur, un outil pour choisir les couleurs, un générateur de dégradé et d'autres outils utiles pour travailler avec la couleur. Par exemple, vous pouvez l'utiliser pour découvrir la couleur d'un pixel d'une page Web. Il stocke l'historique du travail avec la couleur et contient un outil pour visualiser les palettes.

Colorzilla

Spectre

L'accessibilité du contenu est un aspect important du développement Web moderne. Le fait est que de nombreuses personnes ont une capacité limitée d'interagir avec les pages Web. L'une de ces limitations est le déficit de vision des couleurs (CVD). Il affecte la capacité d'une personne à distinguer certaines couleurs. L'extension Spectrum vous permet de rechercher des sites pour leur pertinence pour les personnes atteintes de différents types de CVD.

Spectre

Palette de sites

L'extension Site Palette vous permet d'extraire les couleurs utilisées sur le site à partir du site et de les organiser comme une palette de couleurs. Il prend en charge plusieurs façons de générer des palettes, vous permet d'émettre des palettes en émettant un lien spécial, prend en charge la possibilité d'imprimer des palettes et est capable de les convertir en fichiers PDF. Et cela ne se limite pas à la palette de sites.

Palette de sites

Toby

L'extension Toby est conçue pour organiser les onglets du navigateur de manière à ce qu'au cours du travail, vous n'ayez pas à garder un grand nombre d'onglets ouverts. Il s'agit d'une sorte de panneau de configuration à onglets facile à utiliser avec la souris. Cette extension peut affecter positivement la productivité du développeur Web.

Toby

Testeur d'API Talend

Talend API Tester est une excellente extension qui vous permet de travailler à partir d'un navigateur avec différentes API. Il peut s'agir d'API basées sur les technologies REST, SOAP et HTTP. C'est similaire, par exemple, à Postman. La version gratuite de l'extension prend en charge l'exécution de tous types de requêtes HTTP, l'échange sécurisé de données, l'authentification.

Testeur d'API Talend

Capture d'écran pleine page

Avez-vous déjà voulu prendre rapidement et sans mouvements inutiles une capture d'écran complète de la page que vous consultez? Si c'est le cas, l'extension de capture d'écran en pleine page peut être utile . Avec lui, vous pouvez obtenir des captures d'écran de l'intégralité du contenu des pages au format PDF ou sous forme d'image. Il peut même fonctionner avec des éléments qui prennent en charge le défilement et avec des éléments iframe.

Capture d'écran pleine page

Sommaire

Nous avons examiné une douzaine d'extensions de navigateur pour les développeurs Web. Nous espérons que vous y trouverez quelque chose qui vous sera utile.

Chers lecteurs! Quelles extensions de navigateur utilisez-vous pour le développement Web?

Extensions de navigateur requises par chaque développeur Web