< Extension firefox pour CSS : Firebug | Roozeec Linux Blog
1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading...Loading...

Extension firefox pour CSS : Firebug

Lorsque j’ai refait un peu le design du site, j’ai utilisé une extension Firefox assez géniale : FireBug

Le nom peu paraitre assez etrange, mais en fait si on regarde bien elle sert à trouver , modifier les fichiers d’une page web (script, CSS, HTML). Dans mon cas je l’ai utilisé uniquement pour le CSS. Ce qu’il y a de vraiment bien, c’est que les modifications que vous voulez faire sur la page web sont immédiatement visible ! C’est vraiment génial !

Je passe l’installation de cette extension, le principe est le même que pour les autres extensions.
Une fois le navigateur redémmarré, vous devez voir apparaitre dans votre barre d’état de Firefox un nouveau venu :

En cliquant dessus avec le bouton gauche de la souris, un message apaprait vous disant d’activer Firebug.

Si vous êtes sur une page que vous voulez éditer, vous cliquez donc sur Enable Firebug
Et l’icone devient verte :

En cliquant sur cette pastille verte avec la touche droite de la souris, un menu apparait vous proposant diverses options :

Une fois que ceci est fait, une "frame" apparait avec quelques onglets :

  • Console : Pour le suivi des opérations, affichage de messages. Je ne m’en suis pas servi
  • HTML : Pour explorer le code HTML. Très utile !
  • CSS : Pour Explorer le code CSS
  • Script : Pour les scripts Javascripts
  • DOM : pour les elements DOM (là faut quand mêm connaitre …)
  • Net : Les requêtes externes vers internet ?? Je ne sais pas trop.

La "frame" est divisé en deux :

  • La partie gauche, celle avec le code HTML
  • La partie droite celle avec le style CSS du tag HTML sélectionné.

A chaque fois que vous cliquez sur un tag HTML, la fenêtre de droite se met à jour pour afficher le style CSS de ce même tag :

Dans l’onglet HTML, vous pourrez parcourir le code HTML en cliquant sur le + pour dérouler les tag HTML comme ci-dessous :

Maintenant la fonctionnalité sympathique. Par exemple je veux modifier le style de la boite de liens qui se trouve sur la droite de mon blog. Je parcours donc le code HTML de facon à trouver le tag HTML correspondant, ic c’est un DIV :

Et ce qu’il y a de magique, c’est que à ce moment là la boite de liens devient toute bleu, c’est donc bien celle là ! Très utile comme fonctionnalité :

Donc, je vois ici que ma boite de lien est un DIV associé à une classe de type box. C’est bien ce que l’on voit dans le code HTML : div id="Lien" class="box"

CE qu’il y a de sympa aussi, c’est que si vous passez la souris sur la valeur de la couleur (ici #720E1E), un petit rectangle correspondant à cette couleur apparaît.

Maintenant essayon de modifier la taille de la bordure de la boite (box), ceci se fait tout simplement en cliquant sur la section border de la box dans l’onglet style. Elle devient de suite éditable. Passons donc cette valeur à 20px au lieu de 2px, et que se passe-til ?

Et bien, la boite se modifie immédiatement, ca c’est génial, donc pour faire des tests, c’est vraiment très utile et le gain en développement est à mon avis pas mal.

Dans l’onglet Layout de la partie droite, vous pouvez aussi éditer les caractéristiques d’un tag HTML :

Une fois que vous avez fait vos modifications et que ca vous plait, il suffit de cliquer sur l’onglet CSS de la partie gauche et copier et coller le texte dans votre fichier CSS.

A garder sous la main absolument !

Si vous avez aimé cet article, merci de voter pour lui ! :
Both comments and pings are currently closed.


Contrat Creative Commons
Cet article est sous licence Creative Commons Paternité
Partage des Conditions Initiales à l'Identique 2.0 France License

2 Responses to “Extension firefox pour CSS : Firebug”

  1. Ring dit :

    Bravo pour cet excellent tuto très clair !
    Est-ce que tu sais si ça marche sur Mozilla ?

Propulsé par WordPress


Contrat Creative Commons
Site sous licence Creative Commons Paternité
Partage des Conditions Initiales à l'Identique 2.0 France License
Web Analytics