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

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é modules complémentaires/extensions, ce qui dans ce contexte signifie qu'ils fonctionneront sur Firefox, Chrome et Chromium. Nous privilégierons également les extensions gratuites qui ne sont pas connues pour transmettre vos informations à des tiers et qui ne sont pas financées 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 souhaitez 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

Ceci est un outil d'audit d'accessibilité. Il est toujours préférable d'essayer de rendre vos pages aussi accessibles que possible, et ax 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 des extras utiles à votre navigateur pour contrôler les CSS, les formulaires, les images et les informations. L'une des extensions les plus populaires jamais créé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 pouvez visiter la page avec votre téléphone en scannant simplement 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 de formulaire PHP lorsque vous ne voulez pas vraiment soumettre le formulaire (ce qui peut 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 bien que les extensions Chrome et Firefox portent le même nom et fassent la même chose, 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 dans votre navigateur. C'est un peu comme une version plus avancée de tracert. Celui-ci est uniquement disponible 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 directives en matière de développement Web avec cet outil qui indiquera les domaines dans lesquels vos normes pourraient avoir glissé. 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 niveau de démarrage correspond le mode actuel. Bien entendu, vous n’avez besoin de cette extension que si vous travaillez réellement dans Bootstrap. La version Chrome est développée par Jonathan Defraiteur et la version Firefox 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 simplement faire 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 un montage rapide et sale sans la peine d'ouvrir une application séparée, le travail est fait. Liens de téléchargement: Firefox

15. Lunettes à rayons X

Techniquement, celui-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. Bien que conçu par Mozilla, il fonctionne tout aussi bien dans Chrome, car les deux navigateurs sont entièrement conformes aux normes. Pour l'utiliser, vous devez 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 X-Ray sur la barre de favoris. Ensuite, il vous suffit de visiter n’importe quel site, d’activer votre marque-page X-Ray Goggles, de sélectionner un élément sur la page et de modifier le code correspondant. Liens de téléchargement: Chrome / Chrome, Firefox

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