Tutoriel Firebug

TUTORIEL FIREBUG

 

Vous aviez une idée de site internet intéressante, la mise en page est étudiée. Une fois quelques articles copiés sur le serveur, vous vous rendez sur la page d’accueil pour vous faire une idée de l’effet que votre site procurera à un visiteur lambda. Quelques connaissances sont présentes, et les remarques fusent : pourquoi placer l’article à cet endroit, les teintes à tel et tel endroit jurent, l’ouverture du menu prend trop de temps, la galerie d’images rame … bref, une solution s’impose, un outil qui permettrait d’éviter les aller-retour incessants entre les fichiers (html, php, javascript, css …) et la visualisation du résultat dans votre navigateur.

Si vous utilisez Firefox, une solution existe : Firebug. Sinon pas de panique, chaque navigateur propose ce genre d’outil, inclus ou à ajouter sous forme de module : pour Opera, il s’agit de Dragonfly, Safari dispose d’Inspecteur Web, et celui de Chrome est déjà intégré. Une version Firebug Lite existe également pour les autres navigateurs.

Bien entendu, si les outils de débogage permettent d’accélérer le développement de votre site web, ils seront également utiles pour visiter la concurrence à des fins d’analyse.

 

Installation et mise en route

 

Firebug peut être téléchargé à l’url : https://addons.mozilla.org/fr/firefox/addon/firebug/

Il suffit d’appuyer sur le bouton « Ajouter à Firefox », de suivre la courte procédure d’installation et de relancer votre navigateur préféré pour y intégrer ce puissant module. 

Pour lancer Firebug, 3 possibilités s’offrent à vous :

• le raccourci clavier F12
• un clic droit sur un élément de la page visitée, fonction « inspecter un élément »
• le bouton situé en haut à droite de la page :

 

La fenêtre du module apparaît, séparée en 2 zones :

Il est possible d’afficher cette fenêtre sous forme flottante à l’aide du 2^ème bouton en haut à droite. La zone de gauche représente la structure HTML de la partie de la page visitée (onglets Console, HTML, CSS, Script, DOM, Réseau), celle de droite ses propriétés CSS et les valeurs associées (onglets Style, Calculé, Apparence, DOM).

 

Onglet Console

 

Il permet d’obtenir une liste des erreurs et avertissements, comporte une ligne de commande pour saisir du code à exécuter en direct, et un profiler, qui mesure la performance des scripts : l’utilisateur choisit un moment de départ et de fin ; ayant grâce à lui accès au temps d’exécution des différentes fonctions pendant ce laps de temps, il est possible de constater l’utilité ou non d’une optimisation du code.

 

Onglet HTML

 

Un clic droit sur une page du navigateur propose de visualiser le code source de la page dans une autre fenêtre. Repérer quelle portion de code est relative à tel ou tel élément de la page réclame de l’expérience et un certain temps. Firebug permet instantanément de lire le code html relié à un élément.

 

Pour cela,

• cliquez sur le bouton d’inspection :

• sélectionnez l’élément à inspecter dans la page :

Lorsque la souris survole un élément, le code source associé est visible dans l’onglet HTML.

 

• Cliquez à nouveau quand le cadre bleu correspond à l’élément à étudier :

Le cadre dynamique bleu a disparu, l’élément sélectionné apparaît devant un fond bleu dans l’onglet HTML. Dans notre exemple, il s’agit d’une section dont l’id est « block-block-1». Vous pouvez alors déplacer la souris sans conséquence, et étudier l’élément en question.

 

Sélectionner c’est bien, modifier et constater le résultat c’est mieux !

 

En dessous des onglets de Firebug sont listés les différents éléments adjacents à l’élément sélectionné : ici, div.content, div.block-inner, etc. A gauche, un bouton permet l’édition du code en direct :

 

Pour l’exemple, changeons le texte d’un élément du menu principal.

Après avoir sélectionné l’élément du menu principal dont le texte est « forum »,

 

cliquons sur le bouton « Editer ». Seul le code de l’élément de menu « Forum » apparaît dans la fenêtre de Firebug :

Un menu n’est qu’une liste ordonnée de liens, le code html est donc ici sommaire.

 

Modifions le texte de l’élément, Forum, par Firebug, puis cliquons de nouveau sur le bouton « Editer » :

La modification est instantanée sur la page :

L’édition n’est que locale. Pour la rendre définitive, il est nécessaire de changer le code dans les fichiers adéquats.

 

Onglet CSS

 

Le fichier .css associé à la page visitée est accessible dans l’onglet CSS. S’il y en a plusieurs, cliquer sur le nom du 1^er fichier .css (à droite du bouton d’édition) déroule une liste présentant tous les fichiers css ayant un rôle dans la page. Ces derniers sont visualisables et éditables :

Sélectionner un élément avec Firebug livre le code CSS associé dans l’onglet de droite, c’est-à-dire la liste exhaustive des propriétés CSS ayant un rapport avec cet élément, ainsi que leurs valeurs. Afin de tester sa capacité d’édition, modifions l’aspect du titre d’une zone de contenu.

 

• Sélectionnez l’élément voulu 

(j’ai volontairement choisi un élément de classe « node-title » ; modifier la zone de texte du titre aurait eu des répercussions sur le texte entier du site, à cause du phénomène d’héritage des propriétés CSS)

 

Le détail des identificateurs css et des propriétés associé au type d’élément sélectionné apparaît dans la zone de droite, onglet « Style ».

 

L’onglet « Calculé » donne le résultat de la combinaison du code CSS pour l’élément en question. Il n’est pas possible de modifier les valeurs dans cet onglet, puisque plusieurs identificateurs/propriétés sont en jeu.

 

L’onglet « Apparence » permet d’avoir une idée rapide des marges, du padding (marges intérieures) et des bordures ; par ailleurs, sélectionner cet onglet et survoler avec la souris une zone fait apparaître des règles graduées sur la page ainsi que des régions colorées (bleu pour la taille de base de l’élément, violet pour le padding et jaune pour les marges) :

 

• Dans l’onglet Style,  choisissez/ajoutez la propriété à modifier et sa valeur

 

Ici, nous choisirons d’ajouter un fond de couleur rouge. Dans le bloc conteneur de l’identificateur element.style, background-color n’est pas défini. Il faut donc l’ajouter avec la fonction « Nouvelle propriété » (clic droit) :

 

Saisissons la propriété background-color, tapons entrée, puis entrons red comme valeur. (les touches directionnelles du pavé numérique font défiler les propriétés, idem pour les valeurs) Firebug possède quelques plug-ins, dont le pratique Fire Picker, (disponible à l’url : https://addons.mozilla.org/fr/firefox/addon/firepicker/ , cet add-on s’installe comme Firebug) qui permet de sélectionner une couleur dans la palette. Ici, red nous convient, (pour la démo !) la zone sélectionnée a instantanément changé de couleur de fond.

 

Modifier une propriété CSS peut parfois s’avérer fastidieuse, parce que plusieurs identificateurs entrent en jeu, leurs propriétés se combinant. Firebug permet de voir rapidement si modifier une propriété a un endroit aura un effet, ou pas …

 

Admettons que je souhaite augmenter la taille de police de mon titre de contenu :

Si je modifie la valeur de la propriété font-size de l’identificateur « .node h2.node-title » de 22 à 32 pixels, rien ne se produit à l’affichage.

En revanche, si je désactive la propriété de « h2.node-title », dont hérite l’identificateur précédent, en cliquant sur le panneau rond gris à gauche de la propriété, (qui devient alors rouge) la taille de police du texte de ma zone est modifiée et prend la valeur de 32 pixels :

 

J’aborde le sujet de l’héritage CSS parce qu’il n’est pas toujours évident de savoir où changer une propriété et quelles seront les répercussions de ce changement. Il est utile de rappeler que les changements appliqués au CSS ne seront définitifs qu’une fois que les fichiers .css du site seront modifiés. Firebug représente là encore un précieux gain de temps.

 

Onglet Script

 

De manière similaire aux onglets HTML et CSS, il est aisé de consulter le script de la page courante ; pour naviguer entre les différents fichiers reliés à la page consulté, cliquez sur le nom du fichier courant :

 

Vous pouvez désactiver le script, ou sélectionner un type de script particulier (statique, statique et éval, statique et d’évènements, ou leur totalité) :

 

Outre la possibilité de lire le code, Firebug propose d’en suivre l’exécution (ligne précédée d’une flèche jaune), avec des points d’arrêt (rond rouge). Pour lancer l’exécution du script à partir d’un point d’arrêt jusqu’au suivant, appuyez sur le bouton bleu en forme de triangle ; l’icône suivant permet un suivi pas à pas. Le survol de la souris sur les variables du script fait apparaître leurs valeurs. Pour aller plus loin dans l’analyse, la zone de droite liste les variables et leurs valeurs :

Firebug permet donc de suivre un script « en live », comme le ferait un outil de débogage classique.

 

Onglet DOM

 

Le DOM est une interface standardisée, indépendante de la plate-forme et du langage de programmation, qui présente les différentes fonctions utilisées, de multiples variables, des informations au sujet de la configuration, du navigateur :

Les valeurs sont modifiables suite à un double-clic.

 

Onglet Réseau

 

Cet onglet permet de consulter le temps mis par un script, ou pour l’affichage d’un média. Si votre page met trop de temps à s’afficher, identifier le ou les responsable(s) devient simple grâce à cette fonction de Firebug :

Un filtre permet de sélectionner un type d’élément à afficher (HTML, CSS, JS, XHR, Images, Flash), afin d’en faciliter la comparaison.

 

Extensions

 

Afin d’ajouter de nouvelles fonctionnalités à Firebug, comme le traitement de cookies ou du code PHP, de nombreux add-ons sont disponibles à l’adresse :

http://getfirebug.com/wiki/index.php/Firebug_Extensions

Page Speed et YSlow sont notamment recommandés puisqu’ils suggèrent comment améliorer le chargement d’une page.

 

Conclusion

 

La sélection intuitive d’un élément par point & clic représente un gain de temps considérable par rapport à la consultation de fichiers entiers, identifier un bloc devient une évidence. Dans la même optique, la modification à la volée du contenu ou du style d’un élément permet de manière ludique et efficace de prévoir quels éléments le développeur veut réellement modifier.

 

Outil puissant d’analyse d’une page web, (structure, contenu, style, temps d’exécution) Firebug est un outil indispensable pour les développeurs et designers web travaillant sous Firefox.