Firebug, un outil précieux d'aide au développement

En plus d'être un débuggeur JavaScript et un inspecteur DOM évolué, cette extension de Firefox sortie au mois de décembre est aussi un excellent outil d'aide à l'intégration XHTML/CSS.

Parmi ses principales fonctionnalités, on trouve :

  • Une console qui affiche les erreurs JavaScript et CSS ;
  • Un inspecteur d'objets DOM ;
  • un onglet "Net" permettant de visualiser le temps de chargement de tous les éléments d'une page web ;
  • Un inspecteur de source HTML, styles associés, événements, mise en page.

Cette dernière fonctionnalité est particulièrement intéressante à plusieurs niveaux :

  • repérer facilement les erreurs de balisage à travers l'arbre du document ;
  • visualiser instantanément les règles de style associées à chaque élément sélectionné ainsi que leur provenance ;
  • désactiver certaines propriétés CSS et en visualiser en temps réel les effets sur l'affichage de la page ;
  • ajouter de nouvelles déclarations à l'instar d'un éditeur CSS.

Pour installer Firebug. Si vous souhaitez tester vos pages avec IE, Opera ou Safari,
il existe un script (Firebug Lite) qui permet de simuler la console de Firebug.

Firebug apparaît donc comme un outil incontournable et indispensable à tous les concepteurs de sites soucieux d'un gain de productivité dans la phase de développement d'un projet web.

Hermann

Par Collectif Alsacréations - lundi 21 mai 2007 à 09:59

Conception Web - #359 - Lu 4804 fois - Intérêt du billet: 2.67(6) - Fil RSS

Trackbacks

Aucun trackback pour le moment.

Les trackbacks pour ce billet sont fermés.

Evaluez ce billet

Commentaires

Le lundi 21 mai 2007 à 12:02, par Ben :: #

Effectivement, excellente extension... mais qui a fait parler d'elle depuis un petit temps déjà! Pourquoi une brève à son sujet maintenant?

Le lundi 21 mai 2007 à 12:11, par Collectif Alsacréations :: #

Oui je sais bien que ce genre de retard est inhabituel, mais je connais quelques webmestres (et probablement tous ceux qui ne sont pas à l'affût des dernières nouveautés) qui n'ont pas encore pris connaissance de l'outil et il me semble important d'en parler sur ce site au vu de ses possibilités.

Le lundi 21 mai 2007 à 12:17, par Quentin :: site :: #

Cette extension est effectivement fabuleuse mais attention : le code qu'elle affiche n'est pas toujours exactement celui qui est envoyé par le serveur !
Certaines balises sont automatiquement fermées ou enrichies en attributs...
Il est donc parfois pratique d'utiliser HTML Validator (users.skynet.be/mgueury/m... en parallèle !

Le lundi 21 mai 2007 à 12:18, par Quentin :: site :: #

L'URL qui est mal passée : users.skynet.be/mgueury/m...

Le lundi 21 mai 2007 à 13:32, par Country :: site :: #

Quentin, et pour cause, il ne s'agit pas du code renvoyé par le serveur mais de celui interprété par le navigateur (donc avec les balises fermées, les changements appliqués par d'éventuels javascripts, etc.)

Le lundi 21 mai 2007 à 14:16, par Florent V. :: site :: #

Ben : la pédagogie, c'est (aussi) beaucoup, beaucoup, beaucoup, beaucoup de répétition. ;)

Le lundi 21 mai 2007 à 15:10, par Moosh :: site :: #

moosh.et.son.brol.be/blog...


La dernière release (1.9.11) du Package PEAR Log voit l'apparition d'un handler pour FireBug

Donc dans l'appli php que l'on développe on peut directement envoyer certains levels d'erreurs vers FB

Le lundi 21 mai 2007 à 20:25, par k-ny :: site :: #

MErci pour le rappel !

Et d'ailleurs au sujet de firebug, il est tellement bien que chez aptana (www.aptana.com/) ils l'ont integré a l'interface de leur logiciel, de plus une extension aptana viendra se greffer à votre firefox et permettra lun debuggage bien puissant (online et offline)


Tout d'bon !

Le lundi 21 mai 2007 à 22:52, par Hum :: #

Ca fait des mois que je ne peux plus m'en passer, je m'en sert principalement pour repérer les éléments dans une page, et voir tout de suite sa class ou id, ce qui lui est attribué en css (on peux voir les priorités dans les règles, c'est instructif) et son emplacement dans le code html.

Super outil.

Le mardi 22 mai 2007 à 11:04, par barbe douce :: #

Juste pour savoir : quelles différences avec l'extension webdeveloper ?

Le mardi 22 mai 2007 à 12:16, par Florent V. :: #

barbe douce : pour ma part, je me sers de Firebug uniquement pour le debugging CSS. J'utilisais le panneau de modification à la volée des styles CSS de la Webdeveloper Toolbar, avant de lui préférer les fonctionnalités d'inspection des styles CSS de Firebug. Pour détecter les différents styles (qui peuvent être dans plusieurs fichiers où à plusieurs endroits) qui s'appliquent à un élément, c'est très fort.

Je continue à utiliser la Webdeveloper Toolbar pour plein d'autres choses, cependant. Les outils sont très complémentaires.

Le mercredi 23 mai 2007 à 18:21, par Thomas D. :: #

Hello,

je me sert aussi de firebug pour éditer les CSS à la volée avant d'imprimer des pages qui n'ont pas de feuilles de style adaptées à l'impression ... très pratique ;)

Le mardi 29 mai 2007 à 13:12, par Le Caphar :: site :: #

Perso, j'utilise une combinaison de Web Developer Toolbar (Ctrl+Maj+F mon amour) pour identifier les classes/id, de "code source de la sélection" pour voir ce que Javascript produit, et de Firebug pour tout le reste (notamment pour les appels RPC d'Ajax, qu'on peut même ouvrir dans une nouvelle fenêtre ; géant !).

Pour ceux que ça intéresse, j'en parlais il y a quelques jours au milieu d'une liste des bonnes pratiques pour Javascript que j'ai réunies ici :
www.lepotlatch.org/index....

Firebug roule the world !

Ajouter un commentaire

Les commentaires pour ce billet sont fermés.