Firebug : une merveille de plus pour 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.

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.

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é sur la page ouverte.

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é.

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

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.

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é.

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.

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

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

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 ?
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 .

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.

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.

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.