Les 25 meilleurs plugins Firefox pour développer un site Internet

Publié le 25 déc 07 à 07:10 | Catégorie : Développement Web | 28 commentaires

Firefox Le navigateur de Mozilla est un outil formidable pour le développement web. Il intègre en effet un mécanisme d’extensions autour duquel s’est développé tout un écosystème. Certains plugins sont d’ailleurs de véritables perles et offrent des fonctionnalités qui vont bien au-delà de ce que propose Firefox en standard. Voici donc une liste de ceux qui se révéleront vite indispensables si vous voulez concevoir un site Internet.

Aide au développement

  • FireBug : c’est le couteau Suisse ultime ! FireBug permet d’explorer et de modifier la structure d’une page (Javascript, CSS et HTML) et de consulter les échanges effectués avec le serveur (très pratique en Ajax). Si vous rencontrez des problèmes avec vos scripts, il pourra même vous aider grâce à un débuggeur très puissant.
  • Web Developer : ce plugin rajoute une barre d’outils au navigateur. Cette barre permet d’effectuer tout un tas de choses, comme gérer le cache, voir les cookies, mettre en valeur (c’est-à-dire surligner) certaines parties d’une page web, valider une page, mesurer précisément des éléments graphiques, etc.
  • Add N Edit Cookies : comme son nom l’indique, cette extension permet de créer et de manipuler des cookies. La fonction recherche est très intéressante, puisqu’elle permet de retrouver tous les cookies d’un domaine en particulier (sous-domaines inclus).
  • QuickJava : QuickJava permet d’activer et de désactiver à la volée le support du langage de programmation Java et du langage de script Javascript. Il s’utilise très simplement grâce à l’installation de deux boutons dans la barre de statut et est idéal pour vérifier l’utilisabilité d’un site dans ces conditions particulières.
  • Quick Locale Switcher : ce plugin rajoute lui aussi un bouton dans la barre de statut afin d’offrir la possibilité de contrôler facilement la langue du navigateur. Il se révèle donc très pratique - pour ne pas dire indispensable - dans le cadre du développement d’un site supportant plusieurs langues.
  • Server Switcher : il suffit d’installer cette extension pour pouvoir basculer d’un environnement à un autre d’un simple clic de souris. Dommage toutefois qu’elle ne puisse pas gérer plusieurs environnements à la fois (c’est-à-dire plusieurs serveurs : développement, staging, production, …).
  • CookieSwap : CookieSwap permet de définir des profils utilisateurs et de basculer là encore très facilement de l’un à l’autre. Chaque profil disposant de ses propres cookies, il est ainsi possible de tester un site rapidement avec des utilisateurs aux caractéristiques différentes.

Affichage d’informations supplémentaires

  • View Dependencies : ce plugin rajoute une section supplémentaire dans le panneau d’information qui liste tous les fichiers (images, scripts, feuilles de style, …) qui ont été chargés avec une page web. Elle comptabilise également le poids de chaque élément et le poids total de la page.
  • View Cookies : cette extension propose de la même manière un nouvel onglet dans le panneau d’information avec cette fois-ci la liste des cookies liés à la page qui vient d’être chargé. Les actions à disposition sont limitées, puisque seule la suppression d’un cookie est disponible.
  • Live HTTP Headers : comme son nom le laisse sous-entendre, cette extension est très pratique pour consulter les en-têtes des requêtes et des réponses échangées avec un serveur web. Il est même possible de définir des filtres pour restreindre le nombre d’en-têtes à analyser.
  • ShowIP : ShowIP affiche dans la barre de statut l’adresse IP du serveur qui héberge la page qui vient d’être chargée. Il propose également l’accès à des services supplémentaires (whois, traceroute, …) ainsi que la possibilité de copier cette adresse dans le presse-papier.
  • Server Spy : Server Spy est une extension qui analyse les en-têtes des réponses renvoyées par un serveur web et qui détermine (lorsque cela est possible) le type de serveur (et éventuellement d’autres informations comme le numéro de version ou le système d’exploitation) qui a servi la page web.
  • ColorZilla : ce plugin permet de manipuler les couleurs (et leur code au format RGB ou hexadécimal). Il embarque un sélecteur de couleur (color picker en anglais) et permet également de capturer la couleur d’un élément d’une page en la sélectionnant avec la souris.

Analyse des performances

  • YSlow : cette extension conçue par Yahoo! analyse la page en cours et fournit différentes indications sur sa vitesse de chargement et les points qu’il serait nécessaire de retravailler pour l’optimiser. Attention, il faut avoir installé FireBug pour pouvoir utiliser YSlow.

Modification et sauvegarde des requêtes

  • UrlParams : UrlParams est une extension très facile à utiliser qui affiche les paramètres envoyés dans une requête POST ou GET. Elle permet en outre d’intervertir ces deux méthodes d’envoi ou de modifier ces paramètres avant de renvoyer une nouvelle requête.
  • Tamper Data : ce plugin est très proche en termes de fonctionnalités du précédent, sauf qu’il permet de modifier également les en-têtes envoyées au serveur web et donne plus d’informations sur ces échanges. En revanche, il n’est pas possible de rajouter des nouveaux champs à la requête par son intermédiaire.
  • Form Saver : une extension originale qui permet de sauver dans ses favoris le contenu d’un formulaire (sous la forme d’un bookmarklet). Il suffit ensuite de sélectionner ce favori pour remplir tous les champs du formulaire avec ces informations. Très pratique.

Optimisation pour les moteurs de recherche (SEO)

  • SearchStatus : cette extension permet d’afficher dans la barre de statut plusieurs types d’information sur la page en cours : pagerank, classement Compete et classement Alexa. Elle propose ensuite des raccourcis pour accéder à d’autres données (tendance, nombres de liens entrants, détail du trafic, …).
  • Alexa Sparky : à l’inverse de la précédente extension, celle-ci se focalise uniquement sur les données fournies par Alexa. Son principal avantage est de proposer dans la barre de statut un graphique qui fournit la tendance générale en terme de trafic pour la page en cours.
  • KGen : KGen est un plugin capable d’analyser une page et d’en extraire une liste de mots clés en les classant suivant différents facteurs (comme le nombre d’occurrences ou leur importance). Entièrement paramétrable, KGen est donc très utile pour optimiser le contenu de ses pages.

Outils annexes

  • Html Validator : un incontournable ! Cette extension permet de vérifier que la page courante respecte bien la spécification HTML (et ses différentes déclinaisons). La validation est effectuée au sein même du navigateur et permet donc de valider le contenu d’une page suite à la modification du code par une fonction Ajax.
  • LinkChecker : LinkChecker est une extension capable d’analyser le contenu d’une page et de vérifier pour chaque lien trouvé si le site correspondant est accessible. Les liens sont alors surlignés avec une couleur précisant leur état (fonctionnel, invalide, …).
  • Regular Expressions Tester : une extension - certes basique - mais qui permet toutefois de tester rapidement le résultat d’une expression régulière sur une chaîne de caractères. Elle est livrée avec quelques expressions prédéfinies (emails, adresses IP, …).
  • Unicode Converter/Input Tool : cette extension est très complète. Elle permet de manipuler et de convertir des chaînes de caractères dans différents types d’encodage. Une véritable boite à outils pour tous ceux qui doivent concevoir un site avec des jeux de caractères pouvant supporter plusieurs langues.
  • SecurePassword Generator : un générateur de mots de passe bien pratique lorsqu’il faut créer un compte utilisateur. Il dispose de nombreuses options (il est même possible de n’utiliser les lettres que d’une certaine partie du clavier). L’animation lors de la génération du mot de passe est en revanche un peu fastidieuse.

Et en bonus

  • Tab Mix Plus : une extension indispensable qui améliore grandement la gestion des onglets dans Firefox. Grâce à elle, tout devient vraiment configurable (affichage d’une nouvelle fenêtre, clic de souris, menu contextuel, fermeture d’un onglet, etc). Elle propose même une fonction undo très pratique.
  • Organize Status Bar : ce plugin ne propose pas beaucoup de fonctionnalités, mais il remplit bien son objectif : offrir un moyen simple de réarranger le contenu de la barre de statut. De cette manière, il est possible de trier les informations affichées par d’autres extensions dans cet espace restreint.

Pour les spécialistes en optimisation des moteurs de recherche, il sera peut-être préférable d’installer SeoQuake à la place de SearchStatus et d’Alexa Sparky. Cette extension est en effet bien plus puissante, mais aussi plus complexe à prendre en main et véritablement destinée à cette activité particulière.

Et si vous êtes web designer, sachez qu’il existe un générateur de Lorem Ipsum.

A lire également

Vous pouvez continuer votre lecture sur des sujets similaires en consultant les articles suivants :

Les visiteurs qui ont vu cette page ont consulté ensuite :

A savoir

La rédaction de cet article a nécessité 4 heures et 35 minutes. Si vous le souhaitez, vous pouvez être prévenu de la parution de nouveaux articles en vous abonnant par RSS ou par email.

19 commentaires à propos de “Les 25 meilleurs plugins Firefox pour développer un site Internet” :

  1. Merci!
    Ceci peut est très intéressant

    Fabrice le 25 décembre 2007 à 13:49 (#1)

  2. Beaucoup de ces extensions sont certes très intéressantes du point de vue d’un développeur Web mais je si vos souhaitez les installer toutes je conseille quand même de créer un nouveau profil dans Firefox : un pour le surf quotidien et un autre pour les “développement” car mine de rien, autant d’extensions ça ralentit Firefox.

    Un autre truc qu’il faut avoir en tête c’est que certains de ces extensions sont peut-être passablement abandonnée et ne seront donc pas compatible avec Firefox3.

    Thomas le 25 décembre 2007 à 14:53 (#2)

  3. Merci pour ce cadeau de nowel :)

    Bouctoubou le 25 décembre 2007 à 18:26 (#3)

  4. Je rejoins l’avis de Thomas. L’ajout de nombreuses extensions à Firefox en fait un ogre en mémoire, sans compter les risques d’instabilité et les failles de sécurité éventuelles de plugins non maintenus ou à la cadence de développement trop longue. Et puis certains outils ont des fonctionnalités redondantes. Pour finir, ne cédez pas à l’envie de tout installer pour tout tester. Analyser vos besoins, faites un tour sur les sites des plugins afin de vous assurer de leur fraicheur, finalement installez que ce dont vous êtes sur de vous servir.

    Cordialement,

    Fred Blanc le 26 décembre 2007 à 01:14 (#4)

  5. Très juste. J’utilise couramment toutes ces extensions (à des degrés divers bien sûr) et je suis fréquemment obligé de redémarrer Firefox à cause de fuites mémoires. Cette idée de double profil semble donc une très bonne solution pour minimiser ce problème. Au fait, vous connaissez d’autres extensions qui pourraient être intéressantes dans le cadre du développement de sites web ?

    Stéphane le 26 décembre 2007 à 09:31 (#5)

  6. Tiens tiens ; à la lecture des commentaires de viens de comprendre pourquoi Firefox plantait quand il restait en mémoire trop longtemps ( merci Fred Blanc ).
    J’ai pris connaissance également de la possibilité d’avoir plusieurs profils ( merci Thomas ).
    Pour le coup les commentaires du post ont vraiment une valeur ajoutée et c’est vraiment bénéfique.

    Domi le 26 décembre 2007 à 09:57 (#6)

  7. Bonjour,

    Je suis moi-même développeur d’extensions (au passage, merci pour avoir cité KGen, n’oubliez pas la page officielle http://www.elitwork.com/kgen.html avec KGen 0.3 compatible FF3 bientôt dispo. pour tester en exclu, allez sur Babelzilla).

    Je suis d’accord pour les fuites de mémoire, mais cela dépend des extensions. Une extension comme KGen qui ne se charge que lorsqu’on l’active n’utilise pas de mémoire pendant le surf normal.

    Les extensions les plus gourmandes en mémoire sont celles qui exécutent du JS à chaque chargement de page et qui “oublient” de désinitialiser leur variables ou utilisent les variables globales au sein de fonctions qui n’en ont pas besoin.

    Bref, ce n’est pas le nombre, mais la qualité des extensions qui fait que vous aurez des problèmes, ou non. Voilà :)

    Froidure Nicolas le 26 décembre 2007 à 12:40 (#7)

  8. Pour ceux que cela intéresse la Debugbar regroupe pas mal de fonctionalités mais sur IE (très utile pour debugger)

    Martin le 26 décembre 2007 à 15:11 (#8)

  9. Humm…. tres interessant…. Joyeux Noel.. Eh oui le 26, on peut encore le feter :)

    Corinne le 26 décembre 2007 à 15:17 (#9)

  10. Excellent ses extensions

    aiglestates le 28 décembre 2007 à 01:56 (#10)

  11. merci pour Yslow !

    alex le 28 décembre 2007 à 18:35 (#11)

  12. > Tamper Data : [.. ]En revanche, il n’est pas possible de rajouter
    > des nouveaux champs à la requête par son intermédiaire.

    Faux :-)
    Click droit > Add Element

    +,
    JB

    JB Hurteaux le 31 décembre 2007 à 09:45 (#12)

  13. Autant pour moi. Je corrige l’article tout de suite…

    Stéphane le 31 décembre 2007 à 18:33 (#13)

  14. Pour aider ceux qui comme je l’ai dit avant veulent créer un profil pour Firefox différent pour le développement, je viens de publier un article à ce sujet. Rien de neuf mais deux astuces qui peuvent être intéressante : changer le thème de ce nouveau profil pour le repérer plus vite et installer l’extension Firesomething pour aussi changer le nom de l’application et par exemple remplacer “Mozilla Firefox” par “DevelopFox” ou autre truc dans le genre.
    L’article en question : http://navigosaure.net/carnet/.....pement-web
    A+

    Thomas le 1 janvier 2008 à 20:26 (#14)

  15. il faut pas oublier aussi le SEO FOR Firefox

    harena le 3 janvier 2008 à 23:08 (#15)

  16. Au fait, est-ce que certains d’entre vous ont eu l’occasion d’essayer l’extension Dust-Me Selectors ? Elle permet de faire du code coverage au sein des feuilles de styles et de mettre ainsi en évidence les règles CSS qui ne seraient pas utilisées.

    Stéphane le 12 janvier 2008 à 09:45 (#16)

  17. oui ,j’ai deja essayé le dust-me selectors , mais je trouve un peu compliqué pour les newgies

    zobibi le 21 janvier 2008 à 12:02 (#17)

  18. Merci pour cette excellente liste. Dernièrement j’ai préparé une liste plus généraliste des plugins indispensables pour firefox, voila le lien http://www.tunibox.com/firefox.....ables.html

    bitsfx le 28 mai 2008 à 13:24 (#18)

  19. Article très instructif.
    Je vais de ce pas installer les extensions qui me manque.
    Merci.

    Infoslibres.fr le 16 octobre 2008 à 21:21 (#19)

Ajouter un commentaire

Les informations obligatoires sont indiquées par une étoile rouge *.


9 rétroliens à propos de “Les 25 meilleurs plugins Firefox pour développer un site Internet” :

  1. le blog à Ollie
    Le 26 décembre 2007 à 14:08
  2. Plugins pour FireFox « FireFox
    Le 27 décembre 2007 à 02:05
  3. Hot Links for 30/12/2007 | Nowhere Else 2.0
    Le 30 décembre 2007 à 17:07
  4. DotMana » »
    Le 1 janvier 2008 à 21:10
  5. DyBlog
    Le 11 février 2008 à 19:36
  6. Pi-debugger un code javascript pour tester vos sites
    Le 10 avril 2008 à 06:56
  7. Gagner du temps en surfant avec Firefox : les meilleures extensions, plugins, et autres conseils | Geekly News Astuces
    Le 28 avril 2008 à 14:36
  8. Le conseil en or pour devenir très productif sur internet : Firefox
    Le 8 septembre 2008 à 11:37
  9. Quel outil pour bloguer ? | Le blogue d'Infoglobe
    Le 6 octobre 2008 à 02:37
sympa ces nouveaux bureaux. Il y a même la place pour un billard ;)

Articles Récents

Les derniers articles publiés

A Propos

Je m’appelle Stéphane Thomas et je suis Ingénieur Senior expert dans le développement d'applications web complexes. Etant également un peu Entrepreneur, j'ai tenté l'aventure de la création d'un nouveau service Internet appelé Loomiz. Je suis maintenant le cofondateur d'Hitomi Studio, un studio de développement spécialisé dans la réalisation de sites ecommerce haut de gamme pour de jolies marques.

Lire la suite…