L'outil magique pour le css et le développement : Firebug

firebug

Firebug est une extension du navigateur Mozilla Firefox. C'est l'outil indispensable du développeur. Il dispose de nombreuses fonctionnalités comme par exemple inspecter un élément dans une page, savoir où il se situe, dans quel fichier, quelle ligne, déboguer le code javascript et bien d'autres...


Télécharger Firebug
Vous pouvez télécharger Firebug sur cette page:
https://addons.mozilla.org/fr/firefox/addon/firebug/
Une fois installé, rédémarrez Firefox afin de rendre l'extension fonctionnelle.

Prise en main de Firebug
En haut de votre écran, sur la droite, vous voyez l'icone de firebug apparaitre. firebug

Cliquez dessus ou faîtes ctr+F12 sur votre clavier. La console de Firebug s'ouvre.
console firebug



Celle-ci liste les actions de votre page en temps réel et vous permet d'afficher les informations la contenant.

L'onglet HTML
Il vous permet d'inspecter le code source de la page et le modifier.
Vous pouvez retrouver ou inspecter un code en html en vous positionnant sur votre page, ce qui vous permettra de visualiser le code dans la console ou vous positionner dans la console
sur un élément de code pour voir à quoi il correspond.

Afin de retrouver le code correspondant à un élément de votre page, cliquez sur le mode inspection et positionner vous à l'endroit voulu sur votre page.

Le code correspondant s'affiche alors dans la console de Firebug.

La console de Firebug est divisé en deux cadres. Celui à gauche affiche le code de votre page, celui de droite affiche des informations supplémentaires

Dans le cadre de droite, vous trouverez les éléments de code css qui compose la charte graphique de votre page.

Ainsi, en cliquant sur le mode inspection et si vous survolez un élément dans votre page, vous pourrez voir le code css de celui-ci. Comme par exemple la couleur du texte, taille, police etc..
inspection firebug

En cliquant sur le code dans votre cadre de droite, vous pouvez modifier directement celui-ci et voir le résultat en direct sur votre page.

Celà ne change rien à votre page, il vous faut rentrer ensuite vos modifications dans vos fichiers et les envoyer via votre ftp.

Firebug vous fera gagner un temps précieux.