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

Actualité par (Webdesigner / intégrateur freelance, Toulouse)
Créé le , mis à jour le (18359 lectures)
Tags : web

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.

Commentaires

Ben a dit le

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

Collectif Alsacréations a dit le

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.

Quentin a dit le

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 !

Quentin a dit le

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

Country a dit le

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.)

Florent V. a dit le

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

Moosh a dit le

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

k-ny a dit le

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 !

Hum a dit le

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.

barbe douce a dit le

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

Florent V. a dit le

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.

Thomas D. a dit le

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 Caphar a dit le

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 !