Les 20 meilleures extensions Firefox pour développeurs web

Actualitédesign

Publié par le (105019 lectures)

design développement navigateur extension Firefox

Firefox est actuellement un des navigateurs préférés des développeurs, non seulement de par son rendu plus que correct des pages, mais également par la multitude d'extensions qui ont vu le jour pour l'aide quotidienne à la conception web. Certaines sont bien sûr déjà connues et utilisées couramment par la plupart des lecteurs d'Alsacréations.

Firebug

S'il fallait n'en posséder qu'une, ce serait Firebug. Manipulation du DOM HTML, des feuilles de style CSS, et du Javascript en direct live, c'est un must.

Firebug en action

Sans compter l'onglet des requêtes réseau, l'inspection très pratique des éléments par le curseur de la souris, l'affichage en sur-impression des marges, l'exécution de code JavaScript au vol et sa console.

Firebug peut être complété par 3 "sous-extensions" :

  • YSlow : développé par Yahoo, pour améliorer la vitesse de chargement des pages en se basant sur les best practices (cache, compression des pages, requêtes HTTP...)
  • Firescope : intègre une documentation HTML et CSS avec tableaux de support par les navigateurs
  • SenSEO : à la YSlow, mais pour analyser la structure sémantique des pages et améliorer leur référencement selon des critères prédéfinis

WebDeveloper Toolbar

Vénérable extension plébiscitée depuis les débuts de Firefox, Web Developer Toolbar regroupe en une barre d'outils la plupart des opérations facilitant l'intégration et le diagnostic d'un document : activation/désactivation/édition des CSS, du JavaScript, consultation et modification des cookies, et affichage de nombreuses informations concernant les formulaires, les images et la source ; redimensionnement de la fenêtre du navigateur, ou encore menu de validation W3C directe, il est bien difficile de résumer tout ce que permet ce best-of-all-in-one, chaque menu est à explorer.

Webdeveloper Extension

Validateurs

Html Validator procède à une validation automatique de chaque page consultée, affichant les résultats dans la barre d'état du navigateur en les détaillant lors de la consultation du code source. RSS Validator possède un but similaire pour les flux RSS.

HTML Tidy Validator Extension

IEView / IE Tab

IE View lance une vue de la page actuelle dans une nouvelle fenêtre d'Internet Explorer tandis qu'IE Tab permet son affichage à l'intérieur même d'un onglet Firefox.

IE Tab

Colorzilla

Colorzilla est indispensable pour cibler un élément avec une pipette et déterminer sa couleur. L'option "copier la couleur dans le presse-papier" est également très utile, pour les formats hexadécimaux et RGB. Sans oublier la palette de couleurs intégrée .

Colorzilla

Colorzilla

Fireshot

Fireshot permet d'effectuer des captures d'écran de sites, de les copier dans le presse-papier, de les enregistrer en image ou de les retoucher (un peu). On peut prendre en compte la partie visible uniquement (celle dans la zone d'affichage du navigateur) ou l'intégralité de la page (masquée selon la résolution de l'écran). Existe aussi pour Internet Explorer.

Fireshot menu

Fireshot

Notons la présence de deux autres extensions de ce type : Pearl Crescent Page Saver Basic qui est plus léger (pas de retouche) mais qui n'inclut pas le contenu visuel généré par Flash (les zones apparaissant vides), et Abduction qui capture l'intégralité de la page ou une zone précise que l'on sélectionne à la souris.

Dust-me Selectors

Dust-Me Selectors trouve les sélecteurs CSS inutilisés dans vos feuilles de style, d'après la page consultée en cours ou un ensemble de page au cours d'une visite.

Dust Me Selectors

MeasureIt

Measure It aide à la mesure précise des dimensions des éléments d'un page, à l'aide de la souris.

Measure It

SmushIt

SmushIt est le pendant du site éponyme pour re-compresser au maximum de leurs possibilités les pages contenues dans une page. Efficacité maximale.

Smush It

FirePHP / FirePython

FirePHP et FirePython sont des outils complémentaires à Firebug pour la traque de bugs en PHP et Python, envoyant les messages d'erreur choisis à la console de Firebug.

Live HTTP Headers

Live HTTP Headers est pour les développeurs un moyen rapide de consulter les requêtes HTTP émises par le navigateur pour toute consultation de page ainsi que les réponses complètes du serveur.

Live HTTP Headers

X-Ray

X-Ray révèle en clair dans la page les balises (X)HTML utilisées pour chaque bloc. Utile pour diagnostiquer un site, son DOM et sa structure sémantique.

X-Ray Extension

Greasemonkey

On ne présente plus Greasemonkey qui permet via une immense quantité de scripts de modifier le contenu ou le comportement des pages visitées, en fonction de leur adresse. Le champ d'application est bien trop vaste pour pouvoir être résumé en quelques lignes tant les possibilités sont infinies.

Et vous ?

Quelles extensions vous semblent absolument indispensables ? Lesquelles feraient votre bonheur si elles voyaient le jour ?

Commentaires

Super cet article o/ ça m'a permis de découvrir colorzilla et flashot :)
En ce qui me concerne, je ne peux pas me passer de web developer tool et de firebug. Ils sont super utile. Bah si y avait un plugin à la façon de IE view marchant avec toutes les versions de IE ainsi que des autres navigateurs, ça serait génial, j'aurais plus besoin d'installer un tas de navigateur sur mon pc :D

Excellent article. Je n'avais jamais entendu parler de X-Ray.
Parmi les add-ons non cités, j'utilise fréquemment CSS Viewer qui permet de consulter rapidement les propriétés CSS d'un élément.

Très bon article, merci !
Je connaissais la majorité des extensions, mais j'ai découvert X-Ray et Dust-me Selectors qui semblent intéressants.

Pour moi Yslow et HTMLValidator sont devenus des indispensables, plus d'infos ici : lien supprimé par Felipe, ne rajoute rien à l'article

Merci beaucoup pour cet article très utile, je ne connaissais pas Dust-me Selectors.
Deux autres extensions que j'utilise : Fangs (http://www.standards-schmandards.com/projects/fangs/) qui permet la visualisation d'une page du point de vue d'un lecteur d'écran, et dans la continuité de ColorZilla, Palette Grabber (https://addons.mozilla.org/fr/firefox/addon/2290) qui permet de créer une palette de couleur pour Photoshop, Gimp, etc ... de la page courante.
Et pour gérer toutes ces extensions ainsi que les thèmes et plugins, Infolister (http://mozilla.doslash.org/infolister/) .

Toujours très intéressant de découvrir quelques extensions. Merci !
Pour les développeurs web un peu attentifs au design, je suggère Font Finder qui permet de connaitre les propriétés typographique d'une portion de texte sélectionné.
J'avoue que c'est pratique mais pas totalement satisfaisant. Ce qu'il me manque vraiment c'est le nom du fichier de police réellement utilisé par le navigateur (les infos de font-family sont un peu courtes je trouve).

<mode troll="on">
Eh bin moi je préfère IE, Les standards de Bill Gates tuent. Pfff, faut télécharger des plug in en plus.
</mode>
Merci Dew pour cet excellent article. Il y en a certains que je ne connaissais pas du tout. Toutefois, Fireshot me parait inutil puisqu'avec son clavier et paint, on peut faire à peu près la même chose.
Merci encore :)

Super. Le truc que je ne pige pas c'est que lorsqu'on cherche de bons plugins developer dans les Addons de Mozilla, on ne tombe pas direct sur les bons comme ceux présentés ici.
Sinon je citerai moi aussi Fangs (voir plus haut) il n'est pas top top, en particulier avec les tableaux avancés (summary, caption, scope, abrr, id, headers...) mais c'est déjà pas mal pour avoir une idée d'une page lue par un lecteur d'écran.
Un grand merci! vais télécharger senSEO, Fireshot, RSS Validator, Colorzilla , Fireshot, Dust-Me Selectors, Measure It & X-Ray: bonnes amplettes! en espérant une compatibilité Mac...

Bonne liste, mais un gros oublie selon moi : UrlParams. Indispensable pour bidouiller les paramètres d'url (particulièrement utile en method POST)

Pour les extensions de copie d'écran (ou plutôt de copie de page ou portion de page), l'article cite Fireshot (excellent, mais disponible seulement pour Windows), Perl Crescent Page Saver (bon, mais le problème du Flash est un handicap), ou encore Abduction (facile à prendre en main, mais le mécanisme de sélection peut être difficile à gérer).
Je mentionne juste, pour compléter, l'extension Screengrab!. Elle est disponible pour toutes les plateformes, et est un peu plus complète que Abduction.
Testez les différentes possibilités et conservez l'extension qui vous convient le mieux.

Je trouve normal que firebug et la webdeveloper toolbar soit en tête.
En revanche, j'aurai quand même mis HttpFox juste après.
Live HttpHeaders a été sité mais est moins bien intégré est lisible.
Depuis que je connais ce plugin je n'utilise plus Paros Proxy.
UrlParams cité par Shadom est pratique également pour remplacer la fonction "trap" de parox proxy, ou le bidouillage à la voler de paramètres postés.
En quoi un plugin de capture d'écran est utile au développement ?
GreaseMonkey, qui à mon sens, ne sert pas non plus a développer.
Personne ne site selenium, pourquoi ?
Je l'ai juste installé et je n'ai pas encore pris le temps d'apprendre
à m'en servir. mais l'outil à l'air intéressant.
A bon entendeur ;-)

«En quoi un plugin de capture d'écran est utile au développement ?»
Bug report pour un travail collaboratif. Prototypage à la volée avec Firebug (et si on disposait ainsi, et si on rajoutait un bouton comme ceci?) et capture d'écran pour garder une trace et avoir un visuel à proposer.
«Personne ne site selenium, pourquoi ?»
Parce que tu n'as pas encore publié de tutoriel sur son utilisation sur Alsacréations. ;)

@dj DMSR : C'est effectivement dommage que fireshot n'existe pas sous mac. Mais je te suggère Screengrab (https://addons.mozilla.org/fr/firefox/addon/1146). Il n'a pas l'air aussi complet que fireshot, mais il permet de faire également des captures entières des sites internet (et pas seulement de l'écran).

Pour les designers, l'extension gridFox peut également être très utile. Elle permet d'afficher en superposition à la page des colonnes qui peuvent alors servir de guide pour une conception graphique basée sur une grille rigoureuse.
http://www.puidokas.com/portfolio/gridfox/
Pour ceux qui souhaiteraient, c'est mon cas, tenter de reproduire un environnement aussi riche d'informations pour le développement et le design que FF (du fait de ses extensions) avec Safari, il existe un très bon site avec des extensions pour ce navigateurs et pas mal de bookmarklets très utiles : http://pimpmysafari.com/
Par ailleurs, la fonction « Inspect Element » de Safari 4 (déjà présente dans Safari moyennant) rivalise vraiment avec Firebug. Pour ma part, je la préfère. Sa seule lacune à mes yeux est l'impossibilité de sélectionner visuellement depuis la page (mais on peut toujours ré-inspecter localement avec un clic droit sur un élément spécifique).
Je regrette juste pour l'instant, avec Safari 4, le non-support de la validation avec tidy disponible pour la version 3. Mais le port est en cours.

Merci pour ce très bon article.
J'utilise également Flagfox (https://addons.mozilla.org/fr/firefox/addon/5791) qui permet de connaitre, par le biais d'un petit drapeau dans la barre d'adresse, le pays où se trouve le serveur qui héberge le site visité.

Je n'aime pas trop travailler avec Firefox pour diverses raisons.
Si comme moi vous préférez Opera, il faut savoir qu'une bonne partie de ces fonctiosn sont utilisable et disponibles de base dans Outils / Avancé / Outils de developpeur. Opera Dragonfly est assez puissant. Et aussi, il est possible d'utiliser une grande portion des scripts Greasemonkey dans Opera : http://www.opera.com/browser/tutorials/userjs...

Attention cette liste n'est pas exhaustive.

Il y aura toujours des extensions qui accompliront les mêmes tâches que d'autres, selon les préférences et les goûts de chacun. Il est même possible d'installer cinquante extensions qui peuvent toutes se révéler utiles un jour ou l'autre...

j'en ai toute une série, en plus de ceux proposés. dont: Firecookie (extensions firebug qui permet d'editer ses cookies), Firefox Throttle (qui permet de limiter la vitesse de téléchargement de FF), Library Detector (qui affiche les librairies JS employées par un site), Operator (pour la gestion des microformats), Pixel Perfect (qui permet d'ajouter une image au dessus d'un site - parfait pour comparer design et intégration), Server Switcher (permet de switcher en un click du serveur de dev au serveur de stg/prod) etc, etc...

voir ma liste: http://www.gatellier.be/blog/extensions-firef...

Il y en a un que je vois rarement et qui pourtant m'est très utile. C'est Clear Cache Button : https://addons.mozilla.org/fr/firefox/addon/1801
Comme son nom l'indique ça permet de rajouter un bouton pour vider le cache navigateur... Ca ne marche guère trop sur les iframes cependant... mais c'est toujours ça de pris.

J'utilise sous FF Firebug (vraiment le couteau suisse) et WebDeveloper Toolbar pour pouvoir désactiver le cache, redimensionnez rapidement la fenêtre pour voire le rendu pour d'autre écran...

J'utilise par ailleurs en production intensivement https://addons.mozilla.org/fr/firefox/addon/2064 qui génère du texte du type Lorem Ipsum... avec beaucoup de paramètres différents (ponctuations, longueurs des mots, nombres de paragraphes...) suivant le type de champs. Il suffit d'un clic dans le menu contextuel est voilà ! Pratique pour avoir un faux-texte rapidement.

Pour la capture en vidéo avec des commentaires audio, le minimaliste mais complet Capture Fox (https://addons.mozilla.org/fr/firefox/addon/8090), je l'utilise pour la documentation (pour les utilisateurs ou entre développeurs) mais aussi bientôt pour faire du test utilisateur rapidement et gratuitement. D'ailleurs ce qui manque à cette extension pour être plus utile dans ce contexte, c'est d'avoir sur l'enregistrement un traqueur (une cible de couleur) qui suit le pointeur et change de couleur lord d'un clic...

En plus des extensions que vous citez, j'utilise ScreenGrab, et puis l'excellent SEO Quake (avec la joie de voir les liens en nofollow).
Côté rédaction, Webcount est bien utile, mais presque en dehors du scope.

Avec tout ça FFx consomme beaucoup de mémoire... mais c'est impossible de s'en passer.

Salut, c'est une bonne idée cette proposition d'extensions, il y en a tellement, qu'il est bon d'en connaître les principales.
J'en rajouterai deux :
- cooliris, mur d'images qui permet de parcourir très rapidement des milliers de photos
- Dumny lipsum un générateur de texte.

Salem tout les integrateur web du monde je l'appel kais farhat et je suis de tunis
bon ces extensions sont tres utiles pour moi pour mieux comprendre les code d'un site.
ca me serai geniale si il ya un module qui aspire le site avec son css et images et touts.:)

J'utilise également :

IEtabs (switch IE/FF dans un onglet très performant (peut même afficher l'explorer)). Seul défaut : désactive firebug pendant la navigation sous IE

HTML Validator : Pas indispensable, mais je l'aime bien et il donne des résultats très pertinents

Firecookie : option de Firebug pour le traitement des cookies

Console² : améliore la console d'erreurs

Imacros : peut toujours servir vu son potentiel de scripts (et encore, il me reste des choses à découvrir dedans)

FireFTP : déjà signalé, mais presque indispensable pour moi (sauf solution externe bien sur)

Il y en à d'autres bien sur, je surcharge un peu trop mon firefox de plugins, mais ceux la je les utilise quasi quotidiennement quand je développe

Commentaires clos