Firefox est probablement le navigateur internet le plus utilisé par les developpeurs web. Rien d’étonnant quand on voit la quantité d’outils disponibles au travers des nombreux plugins fournis par la communauté pour nous faciliter le travail! Je vous dresse ici mes plugins incontournables que j’utilise tous les jours au cours de mes développements web.
Web developer
Le plugin Web Developer ajoute un menu et une barre d’outils supplémentaire à Firefox permettant de disposer d’une multitude d’outils et de raccourcis pour les developpeurs web. Je parle de raccourcis car beaucoup des fonctionnalités existent déjà au sein de Firefox mais Web Developer permet d’y accéder sans avoir à farfouiller dans les menus du navigateur (désactivation du javascript, supression du cache navigateur et des cookies, …).
En outre Web Developer va vous permettre de disposer d’outils vous permettant de désactiver les CSS, les images, les couleurs; de mettre en surbrillance les liens sans attribut title, les images sans attribut alt; de fournir des listes de tous les liens de la page, de toutes les ancres, des titres (hx); et j’en passe…
Web Developer vous aidera essentiellement lors des intégrations de maquette graphique, pour vous aider à rendre votre site accessible, et bien plus encore…
Firebug
Le plugin Firebug ajoute quant à lui une console à Firefox. Firebug vous sera d’un grand secours pour débugger vos scripts javascript et vos requêtes AJAX. Avec Firebug, vous pourrez aussi visualiser l’arbre DOM de votre page, et découvrir tous les attributs et méthodes associés à chaque élement. Grâce à Firebug, vous pourrez aussi modifier le HTML et les CSS de votre page en direct, ainsi qu’exécuter du javascript à la volée!
Firebug est fournis avec une API vous permettant d’utiliser la console pour vos développements javascript. Cette API permet, au travers d’un objet console, d’afficher des sorties directement dans la console. La documentation de cette API est disponible ici.
Grâce a cette même API, de nombreux développeurs ont a leur tour étendu les fonctionnalités de Firebug comme Firephp ou Yslow que nous allons voir plus bas.
Il est aussi utile de présicer qu’il est possible de télécharger une version allégé de Firebug pour pouvoir l’utiliser sur les autres navigateurs tel que Internet Explorer, Opéra ou Safari. Ce script est disponible ici.
YSlow
YSlow a été problablement l’un des premiers greffons de Firebug. Ce plugin est développé par Yahoo! et il est destiné à analyser vos pages en vue de les optimiser. Après avoir lancer le test, YSlow affiche un rapport, avec pour chaque test une note allant de A à F. Le but est bien évidement de n’avoir que des A ! Pour chaque note inférieure à A, YSlow vous indique comment procéder pour améliorer le résultat en vous renvoyant vers la bonne pratique à mettre en place.
YSlow est aussi en mesure de vous fournir un listing récapitulant tous les composants de la page analysée avec leurs données associées. Il propose aussi un graphique affichant les composants chargés lors d’une première requête et un autre lors de l’utilisation du cache navigateur.
FirePHP
FirePHP, destiné aux développeurs PHP, utilise Firebug pour afficher directement dans la console les sorties issues de votre code PHP sans poluer votre affichage HTML. On trouve sur le site du plugin la librairie PHP facilitant l’utilisation du plugin, ainsi que la documentation.
HTML validator
HTML validator, comme son nom l’indique, vous permettra de savoir en temps réel si votre code HTML est valide. Plus besoin de se rendre sur le site du W3C à chaque modification de son code !
Le plugin permet de choisir parmis 2 alghoritmes d’analyse :
- HTML Tidy, plutôt spécialisé pour le HTML;
- analyseur SGML, plutôt pour le xHTML.
Tous les 2 sont concus par le W3C. Il est a noté que l’analyseur SGML est celui utilisé par le validateur validator.w3.org.
Une icône sera ajoutée dans la barre d’état pour savoir en un coup d’œil si votre page est valide. Si tel n’est pas le cas, un clic dessus affiche le code source avec un listing des erreurs ainsi que la ligne où chacune se trouve.
Live HTTP Headers
Vous n’utiliserez probablement pas Live HTTP Headers tous les jours, mais ce plugin vous sera d’une aide précieuse pour analyser précisément toutes les requêtes générées par l’affichage de votre page.
ColorZilla
Le plugin ColorZilla ne sera, lui non plus, probablement pas utilisé quotidiennement, d’autant qu’il servira essentiellement aux intégrateurs. Cependant, je pense qu’il a sa place ici tant il pourra vous rendre de services.
Il vous permettra de disposer d’une pipette capable de récupérer n’importe quelle couleur disponible sur votre page (autant les couleurs CSS que les couleurs disponibles dans les images). ColorZilla est aussi capable d’afficher un nuancier pour sélectionner une couleur. Plus besoin d’avoir Photoshop ou Gimp d’ouvert pour réaliser cette tâche !
Je pense que cette liste de 7 plugins, bien que non exaustive, couvre l’essentiel des besoins des développeurs web. Qu’en pensez-vous ?
Et vous, quels plugins utilisez-vous pour vous aider dans votre quotidien ?
1 rétrolien pour “Mes 7 plugins Firefox indispensables pour le développement web”