Posté le 05 Décembre 2006 à 22:22
Vous connaissez l'extension pour Firefox Web Developer Toolbar, et bien il existe un autre bijou du même genre qui est apparemment mieux : FireBug.Comme la Web Developer Toolbar, FireBug permet de faire pleins de choses pratiques pour les développeurs web :
- Mettre en évidence des éléments de la page web (des élément html).
- Désactiver les scripts, les styles (soit tout, soit les styles en ligne, soit les feuilles de styles externes...), les couleurs, les images, bon tout ce qu'on veut en fait.
- Afficher tout un tas d'info sur tout ce qu'on veut.
- Éditer en direct la feuille de style.
- Manipulations diverses avec les formulaires.
- et encore plein d'autres choses...
Mais en plus de sa meilleure interface, FireBug permet plus de choses. Il y a évidemment des inconvénients par rapport à la Web Developer Toolbar sur certaines fonctions (édition css moins libre, même si mieux organisé) mais certaines fonctionnalités sont vraiment impressionnantes comme par exemple d'afficher les styles appliqués à un élément en barrant les styles qui ont été écrasés par d'autres, un inspecteur du DOM, une console (!), affichage du layout d'un élément (position dans la page, taille etc...), l'édition en direct d'un élément html, et d'autre choses plus impressionnantes les unes que les autres.
Bref, je vous conseil vivement de télécharger cette extension pour Firefox si vous faites du développement web.
Je vous conseil aussi de lire cet article sur le blog d'Aozeo, c'est là que j'ai découvert FireBug (en fait, c'est via un lien sur les forums de MacG qui pointait sur cet article).
Edit (9 septembre) :
Florent V. :
Pour le debugging CSS, les fonctionnalités proposées sont intéressantes (en particulier le fait d'afficher les propriétés héritées, ou encore la représentation graphique du modèle de boîte), mais la Web Developer Toolbar garde un avantage pour ce qui est de visualiser rapidement et globalement la source d'un problème... car avant de savoir quelle(s) propriété(s) pose(nt) problème pour un élément donné, il faut déjà repérer l'élément qui pose problème ! Les fonctionnalités de visualisation graphique globale de la Web Developer Toolbar sont plus efficaces pour ça.
De plus, je suis un peu déçu par les limitations du mode d'édition des CSS. Il est certes plus robuste que celui (un peu aléatoire) de la WDT, mais je n'ai pas trouvé 1) comment rajouter un sélecteur, et non pas uniquement des propriétés CSS et 2) comment exporter ou ne serait-ce que copier-coller le résultat des modifications.
Je ne pense donc pas l'utiliser énormément (au contraire de la WDT, par ailleurs plus polyvalente), mais ça reste un très bon outil, en particulier pour les développeurs.
Pour copier coller, il suffit de sélectionner puis copier puis coller :-D.
C'est vrai que l'édition du code css a des avantages, mais aussi des inconvénients par rapport à la WDT, mais en utilisant les deux on s'en sort bien (mieux qu'avec un seul des deux).
Ce qui s'est passé c'est que j'ai rédigé cet article juste après ma découverte de FireBug et j'en étais encore tout excité :-p
En tout cas, FireBug est un super outil, en complément de la WDT !
Florent V. :
Par ailleurs, on voit bien que c'est un outil de debugging : on peut occulter une propriété (très pratique), la modifier, la supprimer, en rajouter... mais rien pour les sélecteurs ou la création de nouveaux sélecteurs (ou aurai-je la berlue ?).
Mais je suis d'accord pour dire que c'est un très bon outil, et que les deux se complètent très bien.
Attention quand tu parles du « layout d'un élément » : j'ai pensé à des considérations de HasLayout pour IE Windows :-/ (mais en la matière j'ai l'esprit mal tourné...).
Tu n'as pas la berlue, je ne voit pas non plus comment agir sur les sélecteurs css.
Pour le "layout", j'ai dit ça comme ça parce que je ne sais pas comment le dire en français en fait. La traduction du mot est "disposition", mais il aurait fallu expliquer les marges, le padding (encore une fois, la traduction du mot en français, "remplissage", ne convient pas), les bordures etc... et ce n'était pas le but de l'article, mais c'est vrai que ça n'est pas très clair (j'ai hésité pendant 5 minutes avant de me décider à employer ce mot la faute d'en trouver un autre mieux approprié).