Note de l’équipe du Journal du Blog : Dans le cadre de notre concours d’articles, Zara vous propose sa sélection de plugins indispensables au développement web pour Firefox.
Aujourd’hui, je voudrais vous présenter trois plugins Firefox qui me semblent indispensables dès lorsqu’on rentre dans le HTML/CSS pour modifier le thème de son blog.
1. Firebug
Firebug est un outil qui vous permet, entre autres, d’inspecter et d’éditer le HTML d’une page, d’explorer les feuilles CSS d’un site, de débugger le javascript, …
Il suffit de faire clic droit > Inspect Element sur un endroit de la page à analyser pour faire apparaitre une fenêtre affichant le HTML et le CSS de la partie inspectée (sur l’image suivante j’ai cliqué sur le logo du Journal du Blog) :
- (Cliquez sur l’image pour l’agrandir)
Vous pouvez voir sur l’image ci-dessus que s’affiche à gauche le HTML de la page, les lignes surlignées en bleu correspondant à la partie inspectée (à savoir le logo), et à droite s’affiche le CSS appelé par le HTML de ces lignes surlignées. Grâce à Firebug, vous pouvez accéder en un clic au HTML et au CSS d’un élément !
Vous pouvez également lancer l’outil Firebug en cliquant sur F12, puis cliquer sur le bouton Inspecter, et parcourir la page web : tous les éléments composant celle-ci seront mis en valeur par un cadre bleu, et vous avez le HTML et le CSS qui y correspond qui s’affichent à la volée dans la fenêtre de Firebug :
- (Cliquez sur l’image pour l’agrandir)
Le HTML et le CSS qui s’affichent dans la fenêtre Firebug sont par ailleurs modifiables. Ainsi, vous pouvez voir en direct quelles conséquences ont certains changements dans le HTML/CSS de votre thème. Sur l’image suivante, vous pouvez voir que je me suis amusée à remplacer le terme « Actualités » par « Test » dans le menu, et à changer la couleur de ce menu en rose :
Ces modifications ne sont pas sauvegardées, au rechargement de la page elles disparaissent. Par ailleurs, elles n’affectent que la page en cours affichée dans votre Firefox : les autres utilisateurs qui sont sur le site que vous inspectez avec Firebug ne peuvent voir les tests que vous faites.
Ce plugin dispose d’autres fonctionnalités (affiche la taille des boites CSS, permet de débugger le javascript, affiche le temps de chargement des différents éléments, …), je vous laisse les découvrir via le site officiel de Firebug.
Si je devais ne garder qu’une seule extension Firefox, ce serait celle-là ! Elle me permet de débugger rapidement des sites, et de gagner beaucoup de temps lorsque je souhaite modifier mon thème !
2. Web Developer Toolbar
La Web Developer Toolbar ajoute un menu et une barre d’outil au navigateur avec de nombreux outils de développement web, par exemple :
- désactiver le cache, le javascript, …
- désactiver/effacer/supprimer les cookies
- désactiver les CSS, afficher un CSS en particulier
- désactiver les images, entourer les images, afficher la taille des images, …
- afficher la taille des blocs, le détail des liens, les informations de tableaux, …
- afficher un outil de mesure
- entourer les titres, les liens, les tableaux, les éléments de type block, …
- redimensionner la fenêtre
- valider le CSS, le HTML, …
- …
Ce plugin est un véritable couteau-suisse du développeur web et s’avère également très utile lors d’une retouche de thème.
–> Site officiel de Web Developer Toolbar
3. Colorzilla
Ce petit plugin vous permet de retrouver le code couleur (RGB ou hexadécimal) de n’importe quelle couleur qui s’affiche dans votre Firefox, que ce soit dans du texte ou dans une image, et de copier ce code pour l’utiliser dans un CSS par exemple.
–> Site officiel de Colorzilla
Je vous ai présenté les trois outils dont je me sers le plus, mais pour en découvrir d’autres, je vous conseille la présentation détaillée de nombreux plugins Firefox pour le développement web par Framasoft.
Vous avez aimé cet article : abonnez-vous au flux RSS
17 Responses
Tiens les deux premiers je note, je vais surement en avoir besoin pour la mise en place de mon nouveau thème, Merci!
ColorZilla je connaissais déjà et c’est méga pratique.
Tout comme MeasureIt, une petite règle quasi indispensable!
@ Kriss : En fait, il y a déjà un outil de mesure dans la Web Developer Toolbar, assez semblable à Measurelt.
[...] sur le Journal du Blog pour découvrir les 3 plugins Firefox qui me semblent indispensables au développeme…, et pour tous ceux qui souhaitent bidouiller le thème de leur [...]
Merci pour ce très bon article, qui me donne envie de réessayer Firebug que j’avais abandonné, sans me rappeler pourquoi.
A signaler aussi CSSViewer que je trouve très pratique.
Ah trop bon cet article, voilà les 2 plug-in qu’il me fallait… cool…
Je ne connaissais pas colorzilla, cool ça m’évitera de jongler avec Photoshop pour un code couleur ! merci. Firebug c’est juste une tuerie ce truc.
Article très sympa. Je note le 1er plugin qui me plait beaucoup, mais avec cette peur de trop vouloir tripatouiller mon blog et de le planter…encore…
Je rajouterais également Mesureit à la liste qui permet de mesurer facilement des tailles (pratique pour les largeurs de colones et images) :
https://addons.mozilla.org/fr/firefox/addon/539
@Romain : Toi t’as pas bien lu ni l’article, ni les commentaires
En effet, il y a un outil de mesure équivalent inclus dans la Web Developer Toolbar :p
En débarquant sur l’article, je ne pouvais qu’attendre Firebug en premier lieu ! c’est clairement l’outil d’inspection et debug qui déboîte tout!… Yahoo a créé le plugin YSlow! pour Firebug qui permets d’analyser et proposer des optimisations sur les chargements des pages web (cdn, js compressés, moins d’images etc…) C’est dire que c’est un incontournable !
(j’ai bien fait d’attendre avant de poster, j’ai failli marquer « Bises » à la fin
fatigue fatigue 
)
Merci, je viens d’adopter Colorzilla
J’ai les trois, et je confirme les propos de Zara, ce sont bien des indispensables.
Je ne sais même pas comment je ferai sans aujourd’hui.
Colorzilla notamment, en tant que graphiste permet de retrouver facilement des harmonies colorées pertinentes.
Encore Merci à Zara, notre webmaster préférée.
totalement indispensables
[...] Les plugins Firefox indispensables au développement Web [...]
des vieux et des anciens … mais tous indispensables pour tout bon développeur web
C’est marrant, j’ai écrit le même article en août :
http://www.romualb.com/2008/08.....r_web.html
[...] similairesLes plugins Firefox indispensables au développement web (16)Vos lecteurs sont-ils à jour ? (7)Problèmes d’upload avec Wordpress 2.5 (5) Catégorie: [...]