Utilisation de loutil Firebug Sébastien PONTAILLIER.
-
Upload
perrine-marin -
Category
Documents
-
view
115 -
download
2
Transcript of Utilisation de loutil Firebug Sébastien PONTAILLIER.
![Page 1: Utilisation de loutil Firebug Sébastien PONTAILLIER.](https://reader035.fdocuments.fr/reader035/viewer/2022062318/551d9d8c497959293b8c0d36/html5/thumbnails/1.jpg)
Utilisation de l’outil Firebug
Sébastien PONTAILLIER
![Page 2: Utilisation de loutil Firebug Sébastien PONTAILLIER.](https://reader035.fdocuments.fr/reader035/viewer/2022062318/551d9d8c497959293b8c0d36/html5/thumbnails/2.jpg)
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
![Page 3: Utilisation de loutil Firebug Sébastien PONTAILLIER.](https://reader035.fdocuments.fr/reader035/viewer/2022062318/551d9d8c497959293b8c0d36/html5/thumbnails/3.jpg)
L’outil – Présentation générale
![Page 4: Utilisation de loutil Firebug Sébastien PONTAILLIER.](https://reader035.fdocuments.fr/reader035/viewer/2022062318/551d9d8c497959293b8c0d36/html5/thumbnails/4.jpg)
L’outil - Lancement
![Page 5: Utilisation de loutil Firebug Sébastien PONTAILLIER.](https://reader035.fdocuments.fr/reader035/viewer/2022062318/551d9d8c497959293b8c0d36/html5/thumbnails/5.jpg)
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)
![Page 6: Utilisation de loutil Firebug Sébastien PONTAILLIER.](https://reader035.fdocuments.fr/reader035/viewer/2022062318/551d9d8c497959293b8c0d36/html5/thumbnails/6.jpg)
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
![Page 7: Utilisation de loutil Firebug Sébastien PONTAILLIER.](https://reader035.fdocuments.fr/reader035/viewer/2022062318/551d9d8c497959293b8c0d36/html5/thumbnails/7.jpg)
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 !
![Page 8: Utilisation de loutil Firebug Sébastien PONTAILLIER.](https://reader035.fdocuments.fr/reader035/viewer/2022062318/551d9d8c497959293b8c0d36/html5/thumbnails/8.jpg)
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
![Page 9: Utilisation de loutil Firebug Sébastien PONTAILLIER.](https://reader035.fdocuments.fr/reader035/viewer/2022062318/551d9d8c497959293b8c0d36/html5/thumbnails/9.jpg)
Exemple – Récupérer un menu existant
Eléments basiques sans style appliqué
![Page 10: Utilisation de loutil Firebug Sébastien PONTAILLIER.](https://reader035.fdocuments.fr/reader035/viewer/2022062318/551d9d8c497959293b8c0d36/html5/thumbnails/10.jpg)
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
![Page 11: Utilisation de loutil Firebug Sébastien PONTAILLIER.](https://reader035.fdocuments.fr/reader035/viewer/2022062318/551d9d8c497959293b8c0d36/html5/thumbnails/11.jpg)
Exemple – Récupérer un menu existant
Ajout du conteneur <div> (et du CSS correspondant) pour limiter la largeur du menu
![Page 12: Utilisation de loutil Firebug Sébastien PONTAILLIER.](https://reader035.fdocuments.fr/reader035/viewer/2022062318/551d9d8c497959293b8c0d36/html5/thumbnails/12.jpg)
Exemple – Récupérer un menu existant
Attention !
code CSS affichant les bordures
non affiché automatiquement
par Firebug
![Page 13: Utilisation de loutil Firebug Sébastien PONTAILLIER.](https://reader035.fdocuments.fr/reader035/viewer/2022062318/551d9d8c497959293b8c0d36/html5/thumbnails/13.jpg)
Exemple – Récupérer un menu existant
Depuis la fenêtre CSS, clique sur le lien vers le fichier complet
![Page 14: Utilisation de loutil Firebug Sébastien PONTAILLIER.](https://reader035.fdocuments.fr/reader035/viewer/2022062318/551d9d8c497959293b8c0d36/html5/thumbnails/14.jpg)
Exemple – Récupérer un menu existant Copie du code CSS manquant
Reste à arrondir les angles des bordures
![Page 15: Utilisation de loutil Firebug Sébastien PONTAILLIER.](https://reader035.fdocuments.fr/reader035/viewer/2022062318/551d9d8c497959293b8c0d36/html5/thumbnails/15.jpg)
Exemple – Récupérer un menu existant Copie des images manquantes