Firebug : une merveille de plus pour Firefox

Deuxième étape : prise en main et découverte

Les 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 :

Image utilisateur

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

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

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 onglets

Console

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

?
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ée

Quand 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 Image utilisateur

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

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.

Q.C.M.

On parle de Firebug depuis le début de ce tutoriel, mais qu'est-ce que c'est ?

Un programme qui fait bugger Firefox.
Une extension pour Firefox.
Un bug qui fait brûler le PC

Que signifie la présence de cette icône Image utilisateur

Cette version de Firebug est incompatible avec Firefox.
Firefox rejette cette page.
L'extension est actuellement désactivée.

Quelles sont les 3 couleurs servant à représenter les marges de l'élément survolé dans le code HTML ?

Bleu ciel, violet, orange.
Rouge, violet, vert.
Bleu ciel, violet, jaune.

Quels sont les 2 onglets à disposer d'une fonction Éditer ?

Console et DOM.
Script et Net.
HTML et CSS.

Dans les onglets CSS et Script, comment passe-t-on d'un fichier à l'autre dans le cas où plusieurs fichiers ont été liés à la page ?

En cliquant plusieurs fois sur l'onglet ouvert.
En cliquant sur le nom du fichier.
En faisant un clic droit et en choisissant le nom voulu dans le menu "autres fichiers...".

Statistiques de réponses au QCM

Retour en haut

29 commentaires pour "Firebug : une merveille de plus pour Firefox"

Note moyenne : 3.14 / 4 (14 votes)

Pseudo	Commentaire
shloch	# Posté le 19/03/2010 à 10:59:55
Blog Twitter close	cette fonctionalité est aussi directement integré dans chrome "controler la page actuelle" --> "option pour les developpeurs" --> "outil de developement" ou tous simplement,il faut l'activer avec la combinaison "Ctrl + Maj + I" il s'affiche dans un fenêtre à part mais personnellement je préfère firebug de Firefox;c'est le plugin qui me rend inséparable avec le navigateur Mon Blog:http://shloch.wordpress.com Mon Site:http://shloch.comuv.com Programmer=travailler beaucoup pour eviter beaucoup de travail
baranils	# Posté le 13/05/2010 à 14:18:42
	Merci pour ce super tuto Je develloppe en C et C# depuis des années j'ai plongé dans les web services depuis quelques mois. Mais les protocoles de communication "on line" sont encore asser nouveaux pour moi Ce tuto m'a intéressé car je cherche la maniere de "robotiser" un site depuis cSharp : declancher l'ouverture de menus déroulant et recuperer de l'information. Accessoirement si vous avez qq conseils a me donner je serais tres heureux ! Merci
profbioch	# Posté le 20/09/2010 à 10:51:58
	Bonjour, vous avez oubliez de préciser (ou alors c'est volontaire) que Firebug existe aussi pour chrome ? https://chrome.google.com/extensions/d [...] nifench?hl=fr Modules Prestashop, vente privée, VIP, accès réservé... Pack création site vitrine Vous voulez communiquer sans limites pour mieux vous faire connaître, vous mettre en valeur, recevoir des demandes d'informations? Grâce à cette formule, coeos.pro vous propose d'entrer simplement dans le monde de l'Internet : mettez en avant votre activité, vos prestations, vos réalisations, vos méthodes de travail, vos récompenses... Organisez votre site comme vous le souhaitez et entrez en contact avec les internautes par le biais d'un design innovant, à votre image, avec une ergonomie soignée. La réalisation de votre site sera aussi élaborée avec une optimisation du code pour assurer le meilleur référencement. Le Pack création site vitrine est la solution par excellence pour mettre en avant votre activité sur Internet. Tous les services indispensables à votre activité sur internet sont inclus, disponible à l'achat ou la location pour s'adapter à vos besoins ! Boutique web, la simplicité du ecommerce à portée de main Vous souhaitez étendre votre marché à Internet ou commencez une activité ? Dans sa formule "Boutique en ligne", coeos.pro prend en charge la création de votre site e-commerce sur mesure, adapté à votre activité. Comprenant une interface de gestion de produits, paiement en ligne sécurisé, design de haute qualité, référencement... Ce Pack e-Commerce comprend toutes les fonctionnalités nécessaires au succès de la vente de produits ou services par Internet, vendez vos produits à des milliers d'internautes dans le monde. Retrouvez un spécialiste de la solution Prestashop qui a de nombreux modules à son actif, du simlpe ajout de mots clés sur les pages produits aux modules permettant de gérer le contenu des catégories en passant par des modules ajoutant du cachet à votre site tel que le nuage d'images en 3D ou chaque image est un lien vers l'objet correspondant :
Lyyn~	# Posté le 07/06/2011 à 20:10:41
Gronvor	Chrome intègre directement ce genre d'outil, plus besoin de firebug Koroshite Ageru <3
Mistermoon69	# Posté le 21/06/2011 à 00:21:56
Avis : Bon	Bon Tuto. Même si je te trouve très léger sur la correction du QCM où tu ne reprends pas tes explications précédentes sous une autre forme. Il y a un p'tit côté cf. ce que j'ai écrit tout au long de mon tutoriel et regardez surtout les images... Je trouve cela un peu dommage d'autant plus que l'ensemble du tutoriel est bien expliqué et structuré. 20/20 pour le tuto 10/20 pour le QCM soit 15/20 au total