EditionMag

  • Augmenter la taille
  • Taille par défaut
  • Diminuer la taille

FireBug, l'outil indispensable du CMS

Envoyer Imprimer PDF

Vous êtes entrain de mettre en place votre framework avec son template et ses plug'in que vous avez déniché chez les différents éditeurs de l'Internet, et vous constatez que la police de caractère n'est pas correcte, la couleur ne convient pas, un espacement de trop, etc ... et oui! il faut retoucher à la feuille de style, voire parfois au code html de la feuille. Mais comment s'y retrouver lorsque vous n'avez aucune idée de la structure de ce qui est affiché ?

Il existe, un petit outil miraculeux (et gratuit) qui est un module du navigateur Firefox : FireBug destiné au développement Web. Entre autre de ses nombreuses fonctions offertes, il existe la possibilité de selectionner une zone de votre page (ou d'une de l'Internet) et de visualiser la partie HTML et CSS correspondante. Bien plus encore, vous pouvez modifier en direct le css et le changement apparait en temps réel sur la page du navigateur.

Bien sûr, le nom du fichier et la ligne sont indiquées ce qui permettra par la suite de retrouver le fichier correspondant pour le modifier sur son serveur.

Passons donc à la pratique ...

Installation de FireBug

Installation de Firebug : https://addons.mozilla.org/fr/firefox/addon/1843/

 

Utiliser Firebug

Après installation, on retrouve le programme sous le menu "Outil" de Firefox

 

Charger la page que vous souhaitez examiner, puis "ouvrir Firebird". Une fenetre apparaît en bas de page. Selectionner ensuite l'icone de selection

 

 

Toutes les zones de l'écran deviennent alors sensitives à la souris. les zones HTML et CSS se rafraichissent en temps réel. Un clic supplémentaire sur la zone de l'écran choisi fige le contenu. On visualisera la zone HTML à gauche que l'on peut explorer avec l'icone "+" ou "-" et la zone à droite CSS où les différentes propriétés CSS sont affichées. Le fichier CSS et la ligne apparaissent sur chaque éléments.

 

 

Modifiez à la volée certains paramètres en cliquant sur la valeur et la page se met à jour instantanéement.

Voilà, il ne reste plus qu'à ajuster pour obtenir le résultat voulu. Sans oublier ensuite de bien relever les valeurs pour les reporter dans les fichiers de configuration de votre site car ces modifications sous firebug n'affectent que la visualisation locale de la page dans votre navigateur et sont perdus dès le rechargement de la page.

Mise à jour le Lundi, 23 Août 2010 13:07