Voici une liste de quelques plugins pour Firefox que j’utilise très souvent dans le développement web.
Firebug (incontournable !)
Firebug est un outil très puissant permettant d’analyser tout ce qui se passe sur un site Internet : analyse en direct du code HTML, requêtes Ajax, feuilles CSS chargées, et bien d’autres choses…
Installez le depuis http://getfirebug.com/ puis redémarrez Firefox pour que le plugin soit pris en compte. Ensuite sur n’importe quelle page web faites un clic droit puis « Inspect Element with Firebug » :
Une fenêtre va s’ouvrir en bas de page :
A gauche le code HTML de la page et à droite les styles CSS appliqués à l’élément sélectionné. Vous pouvez sélectionné un autre élément dans le code HTML pour voir ces propriété CSS, éditer le code en « live » en cliquant sur éditer, etc…
Il serait trop long de détailler toutes les fonctionnalités de Firebug dans cet article, je vous renvoi donc vers ces 2 vidéos qui explique pas mal de choses :
http://getfirebug.com/video/Intro2FB.htm (vidéo du site officiel – en anglais)
http://www.youtube.com/watch?v=wP8rVzTJSMM (en français)
A noter qu’il existe aussi Firebug Lite pour les navigateurs autres que Firefox.
Colorzilla
Colorzilla est un petit plugin très utile, qui permet de récupérer la couleur d’un élément simplement en le survolant.
Une fois installé (https://addons.mozilla.org/fr/firefox/addon/colorzilla/), cliquez sur l’icône
Déplacer ensuite votre curseur n’importe où dans Firefox et Colorzilla récupérera automatiquement la couleur de l’élément sur lequel vous êtes (clic gauche pour valider).
Ensuite il suffit de cliquer sur la petite flèche à droite de la pipette et de choisir dans la liste le format de couleur voulu :
Très utile donc quand on a besoin de récupérer la couleur d’un élément, pas besoin d’ouvrir Photoshop ou The Gimp juste pour récupérer la couleur d’une image de fond par exemple…
Wappalazyer
Wappalazyer vous donne de nombreuses informations sur les sites que vous visitez : type de serveur, languages de programmation utilisés, librairies Javascript chargées, etc…
En cliquant sur chaque icône vous pouvez affiché le détail (description et version).