Les plugins Firefox : Firebug

Par Martin

Pour le développement web, il existe plusieurs extensions très pratiques pour améliorer la qualité de son code, le déboguer, ou l’optimiser. Elles sont véritablement plébiscitées par les développeurs, et sont en partie à l’origine du succès de Firefox. L’une des plus connues et utilisée est Firebug, un condensé de fonctionnalités destinées à vous aider à déboguer et comprendre tout ce qui est lié à l’affichage de votre page.

Photo de Hamed Saber depuis Flickr

Installation

Cette extension est disponible sur le site d’extensions de Firefox :

• Installer Firebug pour Firefox

Présentation

Firebug permet d’infiltrer le code source de votre page web afin de vérifier ce qui s’y passe, aussi bien pour le DOM, le code HTML, les CSS, le Javascript ou les requêtes AJAX. Vous pourrez même agir en direct sur le code et voir les effets de vos modifications instantanément.
Pour cela Firebug est doté d’un débogueur, d’une console d’erreur, et d’une ligne de commande.

Fonctionnalités principales

Pour HTML et CSS, vous pouvez afficher le code lié à chaque balise HTML, et voir toutes les propriétés définies que ce soit directement ou par héritage. En modifiant ces valeurs vous pourrez vous rendre compte des changements de rendu immédiatement.

Coté Javascript vous pourrez ainsi visualiser le code lié à la page et le suivre pas à pas dans son exécution. Les erreurs sont visibles dans la barre d’état et affichées dans la console. Vous pourrez également interagir avec Javascript grâce à la ligne de commande.

AJAX bénéficie aussi de fonctionnalités bien pratiques. Vous pouvez ainsi visualiser les requêtes envoyées et les réponses obtenues en temps réel.

Le profilage d’application est également facilité avec un outil graphique qui permet de visualiser les requêtes HTTP et les temps de réponse qui en découlent.

Tutoriel

L’extension est tellement complexe et puissante que je vous recommande la lecture d’un très bon tutoriel :

• Tutoriel Firebug

FirebugLite

Une version plus légère mais tout aussi pratique peut être embarquée dans d’autres navigateurs comme Internet Explorer, Opéra ou Safari. Utile donc pour finaliser votre développement sur ces environnements.

• FirebugLite

Les extensions

Firebug à beau être une extension, cela ne l’empêche pas d’être extensible ! D’autres extensions Firefox étendent encore les possibilités de Firebug parmis lesquelles on retrouve :

• Firecookie : pour gérer les cookies
• Firediff : pour voir les différences entre deux états
• FirePHP : pour déboguer votre code PHP
• FireRainbow : pour ajouter la coloration syntaxique au Javascript
• YSlow : pour optimiser le temps d’affichage votre site web
• SenSEO : pour optimiser votre référencement naturel

Je reviendrais bientôt sur certaines de ces extensions qui méritent un article spécifique. En attendant vous en trouverez en tout plus d’une vingtaine sur le site de l’éditeur :

• La liste complète des extensions de Firebug

Et si vous n’en avez pas encore assez, il ne vous reste plus qu’a créer votre propre extension pour Firebug, pour cela rendez vous sur le groupe Google « Firebug Working Group » créé à l’occasion.

Voilà, vous avez désormais les cartes en main pour déboguer facilement vos applications. Bon courage !

Sur le même thème

• Les plugins Firefox : XRefresh
• Bien utiliser Javascript
• Les plugins Firefox : Colorzilla
• Bien utiliser les feuilles de style (CSS)
• Maquettage avec Pencil Sketching