Firefox + Firebug

Présentation

Firebug est un add-on (ou plugin) pour le navigateur Firefox, qui permet d’éditer, en temps réel, le contenu d’une page web au sein du navigateur.

Et seulement dans le navigateur. La page web du serveur n’est pas modifiée, il suffit donc d’actualiser la page pour recharger dans le navigateur les éléments avec leurs valeurs d’origine.

Cela permet de tester différents styles et structures, de visualiser aisément la structure d’une page ou la hiérarchie des styles associés à un élément, et même de rectifier d’éventuelles erreurs d’affichage de la page de n’importe quel site.

Installation

• Aller dans le menu outils, puis modules complémentaires, puis dans le champ de recherche en haut à droite, taper firebug puis valider (appuyer sur la touche entrée ou cliquer sur la loupe).
• cliquer sur installer
• redémarrer Firefox lorsque l’installation le demande

Utilisation

Après le redémarrage de Firefox, une icône en forme d’insecte devrait apparaître, soit en haut à droite dans la barre de navigation (à côté de la barre d’adresse et de la barre de recherche), soit dans la barre des modules en bas de la fenêtre.

Sinon, passer par le menu outils, développeur web, firebug.

Puis lorsque la fenêtre Firebug est ouverte (détachée ou dans le navigateur), naviguer entre les différents onglets et sous-onglets pour visualiser/éditer le code html, le css associé, etc...

Ici, Firebug a mis en surbrillance (en bleu) l’élément sélectionné dans Firebug (à savoir, le div id=navigation). La couleur jaune correspond à la marge entre le bloc précédent et le début du bloc sélectionné.

L’onglet principalement à utiliser est l’onglet HTML, avec ses sous-onglets style (pour visualiser/éditer le style associé à un élément), apparence (pour les tailles réelles de marge, d’espacement et de contenu) et calculé (pour voir toutes les propriétés d’un élément).