Utilisation de l’outil Firebug

Présentation au sujet: "Utilisation de l’outil Firebug"— Transcription de la présentation:

1 Utilisation de l’outil Firebug
Sébastien PONTAILLIER

2 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 (compatible Firefox 2 et 3) Gratuit et open source

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

4 L’outil - Lancement

5 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)

6 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

7 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 !

8 Exemple – Récupérer un menu existant
mode « inspecter », sélection de l’élément sur la page, affichage du bloc correspondant dans la console CSS utilisé par le bloc sélectionné Copie du code HTML

9 Exemple – Récupérer un menu existant
Eléments basiques sans style appliqué

10 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

11 Exemple – Récupérer un menu existant
Ajout du conteneur <div> (et du CSS correspondant) pour limiter la largeur du menu

12 Exemple – Récupérer un menu existant
code CSS affichant les bordures non affiché automatiquement par Firebug Attention !

13 Exemple – Récupérer un menu existant
Depuis la fenêtre CSS, clique sur le lien vers le fichier complet

14 Exemple – Récupérer un menu existant
Copie du code CSS manquant Reste à arrondir les angles des bordures

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