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