Firebug : une merveille de plus pour Firefox

Introduction du cours

Salut les Zér0s ;) ,

je vous propose, à travers ce tutoriel, de découvrir Firebug, une extension du célèbre navigateur Mozilla Firefox qui permet en un coup d'œil de réunir tout un tas d'informations sur la page visitée. Je ne vais pas m'éterniser en présentation élogieuse, je risquerais de ne jamais m'arrêter :p .
Entrons donc dès à présent dans le vif du sujet.

Première étape : téléchargement(s)Les composantsMozilla Firefox

Bien alors avant toute chose, et pour ceux qui n'auraient pas lu l'introduction, je me répète en précisant que ce tutoriel aborde le sujet d'une extension du navigateur Mozilla Firefox.

Pour ceux qui ne le connaîtraient pas encore, il n'est jamais trop tard, voici le lien vers la page de téléchargement de la dernière version.

Firebug

Sans plus tarder, voici le lien vers la page de téléchargement de Firebug.
Il suffit ensuite de cliquer sur le lien Installer FireBug à droite, une fenêtre apparaît où il faut cliquer sur le bouton Installer maintenant qui se débloque après quelques secondes.
Si tout se passe bien, il reste ensuite à redémarrer Firefox pour rendre l'extension opérationnelle et utilisable.

À l'heure où j'écris ces lignes, la version de Firefox qui est proposée est la 2.0.0.13 et celle de Firebug est la 1.05.
La suite de ce tutoriel sera donc présentée avec ces versions des deux composants.

Deuxième étape : prise en main et découverteLes basesÉtat d'une page

Une fois Firebug installé, une icône vient se placer à droite dans la barre de statut en bas de l'écran.
Cette icône peut prendre 3 apparences :

cette icône indique que Firebug est désactivé pour la page actuellement ouverte ;

cette icône indique que Firebug n'a trouvé aucune erreur dans la page ouverte ;

cette icône (associée au texte à sa droite) indique le nombre d'erreurs que Firebug a rencontrée sur la page ouverte.

Ouvrir Firebug

Quelle que soit l'icône présente dans la barre de statut, un simple clic sur celle-ci permet l'ouverture de Firebug dans un panneau au bas de l'écran.

Si Firebug est désactivé, le contenu de la fenêtre affichera un message disant Firebug est désactivé et vous offrira alors deux choix sous forme de liens.
Le premier (Activer Firebug) active Firebug de façon globale tandis que le second (Activer Firebug pour ce site) ne l'active que pour le site visité.

Plusieurs autres options sont disponibles en effectuant un clic droit sur l'icône située dans la barre de statut.
Il y est possible d'activer / désactiver Firebug de façon globale ou pour le site actuel, mais également de préciser une liste de sites autorisés, d'ouvrir Firebug dans une fenêtre à part et non plus dans un panneau en bas de page, ou encore de vider la console (un des onglets listant les actions ayant lieu sur la page) des informations qu'elle contient.
À noter également que ces options et d'autres sont accessibles dans le menu Outils > Firebug.

Présentation des ongletsConsole

La console liste les actions qui se déroulent sur la page au fil du temps (comme par exemple des scripts Ajax qui s'exécutent à intervalles réguliers ou à certaines conditions événementielles comme c'est le cas d'un alert(), par exemple).
Je prends pour exemple le cas d'un aperçu en temps réel lors de l'écriture d'un message privé : à chaque nouvelle touche que l'on presse, une requête est exécutée pour afficher le contenu de la zone de texte dans l'aperçu.
Chaque appel à cette requête est notifié dans la console et il est possible d'en connaître la teneur en cliquant sur le + à gauche de la ligne.
De cette façon, on peut consulter les en-têtes transmis :

Mais aussi les données POST :

Ainsi que la réponse renvoyée après traitement :

On peut également signaler la présence d'un outil d'analyse de données récurrentes (comme l'affichage d'une horloge dynamique, par exemple). Pour activer cet outil, il suffit de cliquer sur Profiler sur la ligne la plus haute du panneau.
Au premier clic, l'analyse se lance et enregistre toutes les activités émanant de scripts sur la page.
Au second clic, l'analyse est stoppée et les résultats apparaissent, indiquant quelles fonctions ont été exécutées, combien de fois et quels ont été les temps d'exécution minimum, maximum et moyen.

Dernière chose méritant d'être mentionnée : en cliquant sur Options à droite, il est possible de filtrer les lignes affichées par la console (montrer les erreurs / avertissements JavaScript, montrer les erreurs CSS/XML ou encore montrer les XMLHttpRequests).
Il est également possible en cliquant sur la dernière ligne des options (Agrandir la ligne de commande) d'afficher un cadre supplémentaire à droite dans lequel on peut directement donner nos propres instructions et en voir le résultat dans la console (en cas de valeur de retour, sinon la console n'affichera rien).

Par exemple, en exécutant la fonction ajoutZero(valeur), on obtient (dans le cas où valeur est un chiffre inférieur à 10) la valeur passée en paramètre, préfixée d'un zéro (pour ma part, j'utilise cette fonction à partir de l'affichage de l'heure pour ne pas voir s'afficher quelque chose du genre 9:21:6 mais plutôt 09:21:06 avec la fonction).

HTML

Cet onglet est, à coup sûr, celui qui offre le plus de possibilités d'action et d'analyse.
Il se divise en 2 cadres :

• à gauche, le cadre présentant le code source de la page sous forme d'arbre déroulant ;

• à droite, un second cadre comporte 3 onglets : Style, Apparence et DOM.

Le premier cadre permet donc de visualiser intégralement le code HTML de la page, en transposant dans le cadre de droite des informations supplémentaires sur l'élément sélectionné (la ligne grisée) dans le cadre de gauche.
On y trouve donc les bouts de CSS propres à un élément précis, mais également (sous l'onglet Apparence) un schéma présentant (sous forme de cadres imbriqués les uns dans les autres) des mesures de l'élément sélectionné par rapport à son environnement, comme sa taille, son (ses) padding, border, margin et offset.

Ces informations sont également disponibles de manière visuelle. En effet, lorsque l'on passe la souris sur un élément du code source du cadre HTML comme une div, une image, un lien, etc., l'élément en question se colore d'une ou de plusieurs couleurs sur la page, et ce sont ces dernières qui nous renseignent.

Dans le cas où l'élément survolé est une image, un petit cadre apparaît au survol pour montrer l'image (ou une version réduite si elle dépasse une certaine taille) ainsi que ses dimensions.

Il existe donc 3 couleurs ayant chacune leur signification :

• le cadre bleu ciel correspond à la taille de base de l'élément ;

• le cadre violet indique (s'il y a lieu) le(s) padding relatif(s) à l'élément ;

• le cadre jaune (j'écris ici en orange car le jaune est illisible) indique pour sa part le(s) margin relatif(s) à l'élément.

De cette façon, on peut donc être très rapidement fixé sur la place occupée par un élément ainsi que sur ses marges, si elles existent.

Une autre méthode pour accéder rapidement au code HTML d'un élément consiste à cliquer sur Inspecter juste au-dessus de l'onglet HTML. Cela aura pour effet de permettre la navigation sur la page et d'afficher en temps réel le code HTML et CSS de l'élément survolé.

À noter également la présence (à droite du Inspecter) de la position de l'élément sélectionné dans le cadre HTML par rapport aux éléments "supérieurs" qui le contiennent.
De cette façon, on sait immédiatement si tel élément est contenu dans tel autre.

CSS

Cet onglet permet l'affichage du(des) CSS lié(s) à la page courante. Si plusieurs fichiers CSS sont liés à la page, il est possible de passer de l'un à l'autre en cliquant sur le nom du fichier CSS dans la barre du Inspecter, et ainsi de voir afficher la liste des autres fichiers accessibles.

Script

Cet onglet permet l'affichage du(des) fichier(s) de script lié(s) à la page courante. Comme pour le CSS, il est possible, en cas de multiples fichiers, de passer de l'un à l'autre en cliquant sur le nom du fichier actuellement affiché.

Outre ce côté "visualisation du code", il est possible d'effectuer une analyse complète et détaillée du code pas-à-pas, et ainsi de suivre l'évolution des variables au fil de l'exécution, voir leurs valeurs se modifier...
Pour cela, il suffit de cliquer devant la ligne de début de fonction (ici, la ligne 9) pour voir apparaître un cercle rouge (un point d'arrêt), ce qui a pour effet d'enclencher l'analyse pas-à-pas de la fonction. La flèche jaune indique la ligne à laquelle se situe l'exécution, et le cadre de droite contient les informations relatives à la fonction : noms des variables, valeurs...

Le menu Options du cadre de gauche permet de stopper le code à chaque erreur rencontrée, et celui du cadre de droite de filtrer les informations qu'il contient : montrer les propriétés / fonctions utilisateur, montrer les propriétés / fonctions / constantes DOM.

DOM

Cet onglet rassemble nombre d'informations sur la page, comme par exemple la liste des fonctions JavaScript ou encore des données relatives à l'écran, à la fenêtre actuelle, au navigateur, à la configuration utilisée...

À noter qu'il est possible de modifier chaque valeur en double-cliquant sur la ligne puis sur la valeur elle-même ensuite (un double-clic suffit à passer une valeur true à false et inversement, en ce qui concerne d'autres valeurs (numériques par exemple), il est possible de modifier entièrement la valeur au clavier).

Réseau

Cet onglet affiche sous forme de graphiques les temps d'exécution et / ou d'insertion des éléments d'une page comme par exemple les fichiers liés (CSS, JavaScript mais aussi images).
Il est d'ailleurs possible de filtrer sur le type de fichiers que l'on souhaite voir en utilisant un des liens de la barre au-dessus de celle des onglets.
Sont donc proposés : Tous, HTML, CSS, JS, XHR, Images ou encore Flash.

Voici donc pour la présentation et les fonctions de chaque onglet. Non ! Ne partez pas ! Qui a dit que j'en avais fini avec vous :p ?
Laissez-moi vous présenter la partie qui suit ; jusqu'à présent, je n'ai fait que proposer des opérations d'analyse et de visualisation. Je vais à présent passer à la vitesse supérieure en vous proposant d'effectuer des ajouts, suppressions ou modifications des codes existants.

Restez connectés, c'est par ici ;) .

Troisième étape : utilisation avancéeQuand le rêve devient réalité

Passons aux choses sérieuses. Dans cette dernière partie, je vais vous apprendre à modifier le code source qui est affiché devant vos yeux.
Je vais d'abord commencer par un point concernant le CSS et j'enchaînerai sur la suite.

Activer / Désactiver une instruction CSS

Que ce soit dans le cadre CSS de droite de l'onglet HTML ou dans l'onglet CSS lui-même, sachez qu'il vous est possible de voir l'effet produit par chaque ligne dans un fichier CSS.
Pour cela rien de plus simple, il suffit de survoler une ligne de code CSS (ici height: 22px;) pour voir le symbole

apparaître en début de ligne, il faut alors cliquer sur ce dernier pour qu'il devienne rouge

et que le texte de la ligne CSS équivalente (ici color: #3571A3;) devienne gris clair, ce qui signifie que cette instruction CSS est désactivée.
Le résultat est visible en temps réel sur la page ouverte.

Modifier du code HTML et / ou CSS

Comme certains l'auront sûrement constaté, les onglets HTML et CSS offrent un lien Éditer dans la ligne au-dessus des onglets.
En cliquant dessus, le code contenu dans l'élément grisé (dans le cas de l'onglet HTML, sinon dans l'onglet CSS c'est tout le fichier CSS qui s'affiche) s'affiche dans le cadre et peut alors être librement modifié, permettant ainsi ajouts, suppressions et modifications. Pour valider les changements, un second clic sur Éditer ferme le mode de modification.

Sans entrer en mode modification, il est possible d'effectuer des modifications en cliquant sur une partie du code (attribut (en bleu marine) et valeur d'attribut (en rouge) pour le HTML d'un côté et propriété CSS (en vert) et valeur de propriété CSS (en bleu marine) de l'autre).

Je n'ai pas la prétention que ce tutoriel présente de façon exhaustive toutes les fonctions de Firebug, néanmoins j'espère qu'il aura servi à plusieurs d'entre vous ; dans ce cas je pourrais alors considérer que son objectif est atteint.

Voilà, ce tutoriel sur l'utilisation de Firebug touche à sa fin : j'espère qu'il vous aura permis de gagner un temps précieux en développement web et / ou en analyse de codes source divers et variés.

Si vous avez des questions n'hésitez pas, les commentaires et / ou les messages privés sont à votre disposition.
Je ferais mon possible pour y répondre dans la limite de mes connaissances.

@+ ami(e)s Zér0s ;) .

• #

Waouh !

Très heureux de voir que nos cours vous plaisent, déjà 3 pages lues aujourd'hui ! Vous pouvez continuer la lecture de nos cours en devenant un Roomie, un membre de la communauté d'OpenClassrooms. C'est gratuit !

Vous pourrez aussi suivre votre avancement dans le cours, faire les exercices et discuter avec les autres Roomies.

...