Firefox Je dois vous avouer que je n’ai jamais vraiment été emballé par Firefox. J’ai d’ailleurs toujours eu du mal à comprendre le succès du navigateur de Mozilla, sachant qu’il existait avant des alternatives viables à Internet Explorer qui étaient également gratuites et tout aussi riches. Malgré tout, je dois reconnaître que je l’utilise aujourd’hui de plus en plus pour une simple et bonne raison : ses plugins.

Un plugin (également appelé extension) ajoute de nouvelles fonctionnalités à Firefox. On en trouve de différentes qualités sur le site de Mozilla. Voici la liste des plugins pour développeurs que j’utilise tout le temps lorsque je travaille sur un site :

  • 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, jouer avec les CSS, mettre en valeur (surligner) certaines parties d’une page web, valider une page, etc. C’est une sorte de couteau suisse. Il vous demandera un peu de temps et d’investissement avant de pouvoir maîtriser toutes les fonctions disponibles, mais c’est vraiment LE plugin indispensable !
  • FireBug: permet d’explorer la structure d’une page (Javascript, CSS, HTML et Ajax) et d’en découvrir les moindres détails. Si vous rencontrez des problèmes avec vos scripts, il pourra vous aider grâce à un debuggeur Javascript très puissant.
  • View Dependencies: avec ce plugin, on peut maintenant voir tous les fichiers (images, scripts, …) qui ont été chargés avec une page web. Il en comptabilise même le poids total. C’est très pratique pour voir comment a été codé une page web.
  • IE Tab: lorsqu’on développe un site Internet, il faut s’assurer qu’il sera affiché de la même manière à la fois sur Firefox et sur Internet Explorer (puisque ce sont les navigateurs les plus utilisés aujourd’hui). Pour vous éviter d’avoir à alterner entre ces deux navigateurs, il est maintenant possible grâce à ce plugin d’ouvrir au sein même de Firefox un onglet qui utilise le moteur d’Internet Explorer.
  • UrlParams: affiche les paramètres envoyés dans une requête POST ou GET et permet de la rejouer en intervertissant ces deux méthodes d’envoi. C’est très utile pour s’assurer qu’un formulaire fonctionne bien.
  • 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 le pointant à la souris.
  • MeasureIt: comme son nom l’indique, MeasureIt est utile pour prendre des mesures en pixel. Il est ainsi possible de vérifier la taille ou l’alignement des images très facilement.

A noter - et comme vous vous en rendrez sûrement compte - certains plugins offrent parfois les mêmes fonctionnalités. Par exemple ColorZilla propose un inspecteur DOM tout comme FireBug (néanmoins beaucoup moins pratique que celui de FireBug).

Et vous, quels plugins utilisez-vous pour développer vos sites ?

A lire également

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

A savoir

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


24 commentaires à propos de “7 plugins Firefox indispensables pour développer un site web” :

  1. J’utilise depuis un bon moment FireFox…
    Mais sans plugin
    J’ai jete un coup d oeil sur le premier, Web Developer. Et en effet,
    ce plugin est assez interessant… Je vais le regarder d’un peu plus pres…

    Merci encore pour cette liste d’outils.

  2. Salut Stéphane,

    Y’a déjà une sorte de règle dans WDT (Miscellanous -> Display Ruler).

    Sinon, pour compléter la liste (je me limite aux plugins de dev non listés) :
    - ChickenFoot: pas eu le temps de bien tester, mais permet de créer des scripts js a appliquer sur la page en cours.
    - Form Saver: sauver des formulaires, + léger et pratique que RobotForm
    - HTML Validator: validation HTML
    - Leak Monitor : pour les fuites mémoire javascript
    - Live HTTP Header : un HTTPWatch pour Firefox
    - Pearl Crescent Page Saver Basic : screenshot d’une page entière
    - Reload Every: pratique pour éviter les session timeout
    - Tamper Data : édition des données envoyées par un formulaire en live (après la validation js par exemple)

    Et je pense qu’une partie du succès de Firefox est du aux développeurs web, fatigués d’être limités dans leurs créations par IE (Avant, Maxthon etc… dans le même panier evidemment), et qui ont un peu drivés le buzz.
    Et à part Opera, à l’époque payant ou avec des grosses pub, sous Windows y’avait pas vraiment d’alternative à ma connaissance.

    +,
    JB

  3. Bienvenue dans la secte du panda rouge.
    Firefox est à mon sens le navigateur le plus abouti du web.
    D’une part grâce à l’immense communauté de développeurs qui fournissent toutes ces extensions mais surtout parce que firefox est LE navigateur qui respecte le plus les standards du W3C (ce qui est loin d’être le cas pour IE) ce qui en fait un outil privilégié pour les concepteurs web qui cherchent à faire du bon travail.

    J’ai aussi écrit un article avec quelques extensions firefox utiles et quelqu’un m’a donné l’adresse d’un document très bien fait hébergé chez framasoft voici le lien :

    http://www.framasoft.net/IMG/h.....ction.html

    Perso avec la magique wevdevelopper toolbar, je vous conseil HTML validator et Mozilla Accessibility Extension.

  4. Merci Jean-Baptiste pour tous ces nouveaux plugins, je vais étudier ça tout de suite ! Tu vois, la Web Developer Toolbar propose tellement de trucs que je n’avais même pas fais attention à la règle. Sinon ChickenFoot c’est pas un peu comme Greasemonkey ?

    David, je suis absolument d’accord avec toi : les standards web c’est super important et heureusement que Firefox est là. C’est vrai que maintenant j’ai pris l’habitude de développer d’abord pour Firefox à cause des plugins mais aussi parce qu’il respecte un tant soit peu ces standards. D’ailleurs je suis assez déçu que IE7 n’ai pas pu (ou voulu) rattraper son retard dans ce domaine. Sinon il est pas mal ton document, c’est une bonne introduction au développement sous Firefox.

    Bon c’est pas tout ça mais j’ai des plugins à tester moi…

  5. Pour ChickenFoot, je crois que tu as raison en disant que c’est proche de Greasemonkey.

    Cependant, il me semble que c’est complémentaire en fait. ChickenFoot te facilite la tache pour écrire des scripts Greasemonkey (entre autres, et si j’ai bien compris, car je l’ai très peu utilise pour le moment).

    Pratique aussi (mais pas encore compatible Firefox 2), Aardvark permet de modifier une page a la volée. Surtout utile pour faire du ménage avant l’impression.

    A, et j’oubliais la nouvelle version de resizeTextarea (rebaptisée Resizeable Form Fields), et disponible ici:
    http://justinsomnia.org/2006/1.....r-firefox/

    +,
    JB

  6. Firebug 1.0 Beta est sorti :
    http://www.getfirebug.com/blog/?p=7

    Ca fait mal. C’est tout simplement exceptionel.

    +,
    JB

  7. Très bon. Je vais l’essayer de ce pas.

  8. A ce propos il y a un défaut d’affichage sur le 3eme navigateur le plus populaire (dois je vraiment le nommer?) Safari. Le cadre foncé qui fait le tour de la section du bas (ou il y a articles recents, categories etc) n’est pas aligné sur le coté droit d’environ la moitié de l’epaisseur du cadre…

  9. Merci pour ta remarque Goliv. Il me semblait bien avoir remarqué ce problème lorsque j’ai testé ce blog avec Browsershots, mais je n’ai pas eu le temps de m’en occuper. Ce n’est pas vraiment évident lorsqu’on n’a pas de Mac (et donc Safari bien sûr) sous la main. Ca serait vraiment super si on pouvait tester tous ces navigateurs dans une espèce de machine virtuelle ou de sandbox.

  10. J’ajouterais à cette liste l’indispensable CSSViewer, qui en plus est réalisé par un développeur Français. Encore quelques petites choses ici et là optimiser mais c’est déjà fonctionnel.

    Sinon bien que je ne l’aie jamais utilisé moi-même (il est pourtant installé, mais je n’ai pas eu le temps de regarder de près) Selenium IDE m’a tout l’air d’être un outil incontournable pour tout ce qui touche aux tests côté client.

  11. j’ai envie de rajouter ca aussi: http://performancing.com/firefox

  12. et

    - fireFTP : http://buakaw.blogspot.com/200.....d-ons.html
    - des extensions dédiées au référencement / SEO : http://www.outil-referencement.....erencement

    et deux que je viens de découvrir mais que je n’ai pas encore essayé :
    - save as lmage : https://addons.mozilla.org/firefox/3408/
    - capture web page : http://pearlcrescent.com/products/pagesaver/

    ;-)

  13. Même si cet article a déjà quelques mois, je laisse quand même un commentaire pour dire que l’extension “View Dependencies” n’est plus vraiment utile vu que Firebug propose les mêmes fonctions (et en plus avec possibilité de tri) par son onglet “Net” :)
    De même, l’extension MeasureIt n’est pas vraiment utile lorsque l’on a WebDevelopper puisqu’il possède aussi un outil de mesure plus performant dans Divers > Afficher l’outil de mesure.
    Quand à UrlParams, je ne sais pas si Firebug le fait pour les envoi GET et POST classiques, mais il le fait pour les requetes Ajax en tout cas ;)

  14. URLParams présente quand même de nombreux avantages, surtout si l’on veut manipuler les paramètres (ajouter, modifier, supprimer, GET POST).

    Sur le genre d’appli web que je développe, nous avons parfois plus de 50 paramètres a envoyer. Je ne peux plus me passer de cette extension. Et Firebug ne remplit pas du tout ce role la (a part en read-only pour les requêtes ajax).

    +,
    JB

  15. Est-ce que quelqu’un aurai un tuto a me filer pour développer une extension FF (pour mon site), du genre, les moteurs de recherche Google, Yahoo, et consort qui sont implanté d’office dans la bar de navigation ?

    Merci d’avance :-D

  16. Bonjour, j’aimerais savoir où télécharger le plugin Live HTTP Header.

    Merci
    Niko

  17. Niko, tu le trouveras ici.

  18. @ Badoux C : Il existe un très bon plug-in qui répondra certainement à ta demande, il s’agit de SEOpen. C’est selon moi LE plug-in ultime en termes de référencement. Voilà ;)

  19. je souhaiterais pouvoir “exporter” mes plug-in préférés depuis un poste afin de les “importer” en une seule fois vers un autre poste. Je profite ce ce billet pour lancer un appel au cas ou quelqu’un connaitrait un mode opératoire … ou un plug-in qui permette cet import/export.

  20. Je crois que Google est tom ami :
    http://www.google.com/search?q.....0extension

    Le recherche d’add-on est aussi tom ami :
    https://addons.mozilla.org/en-US/firefox/search?q=backup&status=4

    et hop, on trouve quoi ? FEBE : Firefox environment backup extension.

    Par contre j’ai pas essayé :
    https://addons.mozilla.org/en-US/firefox/addon/2109

  21. “Now you can easily synchronize your office and home browsers.”
    Un grand merci JB ( et désolé pour l’aspect “forum” ) qu’a entrainé cet échange …
    Je vais l’essayer ; si ça ne marche pas je le “ra-posterai ” ici ;o)

  22. Bonjour,

    merci beaucoup pour cette page. Un bravo pour avoir regrouper tous ces outils.
    je recherche un outil qui permet d’enregistrer les actions faites sur une page et de pouvoir les relancer par la suite. Je sais qu’il existe un plugin pour firefox mais je n’ai connait pas le nom.

    Merci

    argaze

  23. Bonjour à tous, je développe une plate-forme de management des processus QSE php+mysql+ajax et j’aime particulièrement ce plugin qui permet de capturer illico des vues d’écrans et même d’y ajouter des commentaires : Fireshot… redoutable et particulièrement utile pour illustrer un manuel d’utilisation… Avis aux amateurs !

    Benoit.

  24. Bonjour,
    en lieu et place de URLParams, j’utilise plutot
    LiveHTTPHeaders, qui permet bien plus qu’URLParams.

    Par contre, ancien utilisateur du plugin Webdevelopper, avec toutes ces évolutions de firebug (qui est maintenant tres poussé) je m’en passe totalement !
    mes plugins se résument à firebug (équipé de Yslow qui s’avère tres intéréssant), measureit et colorzilla =)
    Library detector est pas mal aussi pour le curieux que je suis, il affiche dans la barre de status les framework JS utilisés.

Ajouter un commentaire

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



Par contre, il y a encore des trucs qui ne marchent pas. Par exemple il a compris 'DesignS' au lieu de 'Design'.

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…