Utilisation de l’outil Firebug

Sébastien PONTAILLIER

L’outil – Présentation générale Outil de développement web

Inspection des pages web (html, css, javascript) et modifications en temps réel

Développeurs : Rob Campbell, Joe Hewitt, Justin Dolske

Version 1.2.1 (compatible Firefox 2 et 3)

Gratuit et open source

L’outil – Présentation générale

L’outil - Lancement

L’outil - Fonctionnalités Accès au code source + CSS correspondant

pour la balise sélectionnée Différents onglets

Console : permet de voir les scripts exécutés sur la page courante

HTML : permet de voir le code HTML (dynamique) CSS : permet de voir le CSS associé Script : permet de voir le code HTML (statique)

L’outil - Fonctionnalités Deux modes

Inspecter Affiche le code source (HTML et CSS) correspondant à

l’élément de la page survolé par la souris Conserve l’affichage du code source d’un élément lors

d’un clique sur cet élément

Editer Extrait le code de l’élément sélectionné et le rend

éditable Edition possible dans tous les cadres affichant du texte Changements entraînés par la modification visibles

immédiatement

Exemple – Récupérer un menu existant Contexte

Super le menu ! Je le veux ! Comment faire ?

Contacter le développeur

n’est pas toujours aisé ni

efficace Affichage incomplet du

code via le navigateur

(pas de CSS)

Utilisons Firebug !

Exemple – Récupérer un menu existant

CSS utilisé par le bloc sélectionné

mode « inspecter », sélection de l’élément sur la page, affichage du bloc correspondant dans la console

Copie du code HTML

Exemple – Récupérer un menu existant

Eléments basiques sans style appliqué

Exemple – Récupérer un menu existant Copie du code CSS correspondant aux balises utilisées Plus de puces, police changée, un bloc pour chaque item,

couleurs respectées

Exemple – Récupérer un menu existant

Ajout du conteneur <div> (et du CSS correspondant) pour limiter la largeur du menu

Exemple – Récupérer un menu existant

Attention !

code CSS affichant les bordures

non affiché automatiquement

par Firebug

Exemple – Récupérer un menu existant

Depuis la fenêtre CSS, clique sur le lien vers le fichier complet

Exemple – Récupérer un menu existant Copie du code CSS manquant

Reste à arrondir les angles des bordures

Exemple – Récupérer un menu existant Copie des images manquantes