Découvrez les 15 meilleures extensions de navigateur pour les développeurs

Si vous vous abonnez à un service à partir d'un lien sur cette page, Reeves and Sons Limited peut gagner une commission. Voir notre déclaration éthique.

Le changement le plus important pour 2018 a été la refonte majeure de FireFox et, partant, la manière dont les modules complémentaires fonctionnent dans ce navigateur. En conséquence, de nombreux add-ons populaires ne sont plus mis à jour ou sont devenus indisponibles.

La plupart des modules complémentaires pour Firefox sont également disponibles en tant qu'extensions pour Google Chrome. Dans cet article, nous allons essayer de privilégier navigateur croisé add-ons / extensions, ce qui, dans ce contexte, signifie qu'ils fonctionneront sur Firefox, Chrome et Chromium. Nous donnerons également la préférence aux extensions gratuites qui ne sont pas connues pour vous transmettreformation à des tiers et ne sont pas soutenus par des revenus publicitaires. Nous nous concentrerons davantage sur les extensions qui ne vous limitent pas à une technologie de développement particulière.

Peu de développeurs voient un avantage à utiliser Microsoft Edge en tant que navigateur de développement, mais cela convient parfaitement pour les tests post-développement. Seul un peu plus de 4 dans chaque site 100 peut s’attendre à ce que les visiteurs l’utilisent, bien que ce nombre puisse augmenter légèrement à mesure que davantage d’utilisateurs abandonnent Internet Explorer.

Même s'il y a beaucoup plus d'utilisateurs de Chrome que d'utilisateurs de Firefox, les informaticiens ont tendance à préférer Firefox. C'est pourquoi il existe de plus en plus d'extensions destinées aux développeurs dans Firefox.

Examinons maintenant les meilleures extensions de navigateur pour les développeurs et pourquoi vous souhaiterez peut-être les ajouter à votre navigateur.

1. Construit avec

Lorsque vous vous trouvez sur un site vraiment bien fait et que vous voulez savoir comment ils l'ont fait, cette extension vous fera gagner beaucoup de temps et d'effort à fouiller dans le code source. Liens de téléchargement: Chrome / Chrome, Firefox

2. hache

Il s'agit d'un outil d'audit d'accessibilité. Il est toujours préférable d'essayer de rendre vos pages aussi accessibles que possible, et hache vous aidera à éviter d'exclure accidentellement un segment d'utilisateurs de votre site. Liens de téléchargement: Chrome / Chrome, Firefox

3. ColorZilla

Cette extension vous permet d’échantillonner les couleurs directement à partir d’une page, d’extraire des codes de couleur, de générer des dégradés, et plus encore. Liens de téléchargement: Chrome / Chrome, Firefox

4. Développeur web

Ajoute quelques extras utiles à votre navigateur pour le contrôle des CSS, des formulaires, des images et dansformation. L'une des extensions les plus populaires jamais réalisées. Liens de téléchargement: Chrome / Chrome, Firefox

5. Woo Rank

Analyser une page Web pour les données de référencement. Fournit un rapport puissant vous montrant tous les éléments internes du référencement, y compris un score global en référencement, des suggestions d'amélioration, le nuage de mots-clés et bien plus encore. Liens de téléchargement: Chrome / Chrome, Firefox

6. Tab2QR

Générez un code QR de la page sur laquelle vous vous trouvez et vous pourrez visiter la page avec votre téléphone simplement en scannant le code QR. Bon pour tester responsive sites, même si vous ne les avez pas créés. Liens de téléchargement: Chrome / Chrome, Firefox

7. Requête HTTP

Cela peut être très utile pour tester les réponses au formulaire PHP lorsque vous ne souhaitez pas vraiment soumettre le formulaire (ce qui pourrait déclencher un traitement supplémentaire que vous n'avez pas besoin de tester). Avec cet outil, vous pouvez forger des requêtes HTTP sans effort. Notez que même si les extensions Chrome et Firefox portent le même nom et font les mêmes choses, elles sont créées par des développeurs différents et ne sont pas exactement les mêmes. Liens de téléchargement: Chrome / Chrome, Firefox

8. Test de performance de la page

Obtenez rapidement un rapport sur les performances de votre page à différentes étapes de son parcours vers votre navigateur. C'est un peu comme une version plus avancée de tracert. Celui-ci n'est disponible que sur Firefox pour l'instant. Il existe des extensions similaires pour Chrome et Chromium, mais elles ne sont pas aussi riches en fonctionnalités que celle-ci. Liens de téléchargement: Firefox

9. Outil de comptage de mots

Celui-ci peut en réalité faire plus que son nom ne l'indique, car il vous indiquera également le nombre de caractères et le nombre de phrases contenues dans un bloc de texte sélectionné (ou la page entière). Liens de téléchargement: Chrome / Chrome, Firefox

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

Assurez-vous de suivre les meilleures pratiques de développement Web avec cet outil qui indiquera où vos normes ont pu déraper. Liens de téléchargement: Chrome / Chrome, Firefox

11. Image Map Editor

Un des trois excellents extensions du développeur allemand Heinz-Jürgen Boms, celui-ci fait exactement ce que son nom dit. Vous pouvez générer une carte-image directement dans le navigateur en traçant simplement les zones d'une image que vous souhaitez mapper. Liens de téléchargement: Firefox

12. Éditeur de cadre avancé

Une autre extension de Heinz-Jürgen Boms, c’est vraiment un outil de style CSS dans lequel vous pouvez créer un cadre directement dans le navigateur en spécifiant ses attributs. Il vaut la peine de vérifier le Documentation avant de commencer à l'utiliser. Liens de téléchargement: Firefox

13. Amorçage Responsive Auxiliaire

Il s'agit d'une petite extension très simple qui vous aide à voir rapidement si vos points d'arrêt fonctionnent correctement et quel est le niveau d'amorçage du mode actuel. Bien sûr, vous n’aurez besoin de cette extension que si vous travaillez réellement dans Bootstrap. La version Chrome est développée par Jonathan Detraiteur et la version Firefox est développée par Kevin Bon. Liens de téléchargement: Chrome / Chrome, Firefox

14. Essayez-le vous-même HTML5 Editor

Si vous préférez garder les choses simples et effectuer tout votre travail à partir d’un seul endroit, cette extension est faite pour vous. Riche en fonctionnalités, cet éditeur contextuel fonctionne directement dans le navigateur et prend en charge HTML, CSS et JavaScript. C'est loin d'être parfait, mais pour une modification rapide et sale sans avoir à ouvrir une application distincte, le travail est fait. Liens de téléchargement: Firefox

15. Lunettes à rayons X

Techniquement, celle-ci n'est pas une extension, c'est en fait un bookmarklet. Mais cela fonctionne si bien que nous ne pouvions pas le laisser de la liste. Même s'il est créé par Mozilla, il fonctionne également bien dans Chrome car les deux navigateurs sont entièrement conformes aux normes. Pour l'utiliser, vous devrez rendre votre barre de favoris visible. Visitez ensuite la page de téléchargement, accessible via les liens ci-dessous, et faites glisser le bouton Lunettes à rayons X sur la barre de favoris. Ensuite, visitez n’importe quel site, lancez votre signet de lunettes à rayons X, sélectionnez un élément sur la page et vous pourrez en modifier le code. Liens de téléchargement: Chrome / Chrome, Firefox

image d'en-tête avec la permission de Monika Pola

Bogdan Rancea

Bogdan est un membre fondateur d’Inspired Mag, ayant accumulé près de 14 années d’expérience 6 au cours de cette période. Dans ses temps libres, il aime étudier la musique classique et explorer les arts visuels. Il est également obsédé par les fixies. Il possède déjà 5.

Commentaires Réponses 0

Soyez sympa! Laissez un commentaire

Votre adresse email n'apparaitra pas. Les champs obligatoires sont marqués *

Note *

Ce site utilise Akismet pour réduire les spams. Découvrez comment sont traitées les données de vos commentaires..