Maîtriser Firebug, l'indispensable extension Firefox pour le développement web

Firebug est très simple à installer. À partir de la version 3 de Firefox il suffit d'aller dans le menu outils, de sélectionner modules complémentaires et de choisir l'onglet catalogue. Ensuite, saisir « Firebug » et cliquer sur la loupe pour démarrer la recherche.

Attention : la recherche de cette extension fait également référence à certains projets périphériques de Firebug. Il faut donc veiller à bien choisir Firebug. Nous reviendrons en fin d'article sur ces projets périphériques, par ailleurs très intéressants.

Une fois ce module installé, il suffit de redémarrer Firefox et le tour est joué.

I-B-1. Les principales fonctionnalités▲

I-B-2. La fenêtre Firebug▲

Il existe deux manières d'ouvrir la fenêtre Firebug :

Fenêtre intégrée dans le navigateur : en cliquant sur l'icône Firebug située en bas à droite (ou le raccourci clavier [F12]). La fenêtre apparaît en bas de la page comme illustré ci-dessous :

Indépendamment du navigateur : soit en utilisant le clic droit et en choisissant l'élément « Ouvrir Firebug dans une nouvelle fenêtre », soit en utilisant le raccourci clavier [Ctrl+F12].

Une fois l'installation et le redémarrage du navigateur effectués, une petite icône apparaît dans la barre de statut. C'est ici qu'il faut cliquer pour faire apparaître Firebug.

Dans un souci de performance, Firebug se désactive par défaut pour chaque nouveau domaine. La première chose que l'on doit voir est donc un message qui indique que la console est désactivée : « Console panel is disabled »

Cette désactivation concerne :

1. La console ;
2. Les scripts ;
3. L'activité Réseau.

Cette manipulation est nécessaire pour chaque nouveau domaine rencontré au moment où l'on souhaite inspecter une page de ce domaine.

Chaque fichier peut être ouvert dans un éditeur spécifique en passant par le bouton (avec l'icône Firebug) situé sur la gauche de l'écran.
Il est également possible de configurer différents éditeurs dans le gestionnaire d'éditeurs.

L'onglet HTML permet de visualiser le contenu de la page web affichée dans le navigateur.

Cette vue offre plusieurs avantages en comparaison de la visualisation du code source avec les outils intégrés au navigateur (Firefox ou autre).

D'abord, les différents éléments du code HTML sont colorisés syntaxiquement (bien que la colorisation soit assez basique).

Ensuite le code est automatiquement indenté et présenté à la façon d'un arbre XML où chaque élément est hiérarchisé, la plupart du temps parent ou enfant d'un autre élément.

En voici une petite illustration :

Firebug propose plusieurs manières de retrouver l'élément HTML d'une page web, en partant du code HTML affiché dans la fenêtre de Firebug, ou bien en partant de l'affichage de la page dans le navigateur.

II-B-1. Inspection dans Firebug▲

Il est possible de désigner un élément (au survol) dans la fenêtre de Firebug pour qu'il soit mis en surbrillance dans la page affichée par le navigateur.

Cliquer sur cet élément provoque sa sélection dans Firebug, ce qui permet son inspection détaillée (qui sera approfondie un peu plus loin dans le chapitre II-F). La sélection d'un élément permet de le retrouver automatiquement après le rechargement de la page.

II-B-2. Inspection dans le navigateur▲

À l'inverse, voici comment désigner un élément de la page web et le mettre en surbrillance dans Firebug.

Il faut passer en mode inspection et survoler la zone voulue (dans la page web) pour voir le code qui lui correspond dans Firebug.

On peut passer en mode inspection en cliquant sur le bouton inspecter ou en utilisant le raccourci : [Ctrl+Shift+C].

Cliquer sur l'élément offre le même mécanisme de sélection que celui évoqué ci-dessus.

II-B-3. La zone de recherche▲

La zone de recherche permet quant à elle de retrouver une chaîne de caractères. Cette recherche est possible quasiment partout (HTML, CSS, JavaScript et monitoring réseau).

On peut accéder à la barre de recherche soit en cliquant dessus soit par le raccourci [Ctrl+Shift+K].

Chaque élément sélectionné est situé dans la hiérarchie des éléments HTML à la manière d'un fil d'Ariane; c'est très commode pour situer l'élément dans la hiérarchie.

Le survol d'un élément de la hiérarchie permet, comme pour le survol du code, la mise en surbrillance de l'élément correspondant de la page web.

Au cours de l'inspection du code HTML il est possible d'éditer le code HTML à n'importe quel moment.

Prenons par exemple le cas d'un élément que l'on souhaiterait ajouter dans la page du site de référence : CSS Zend Garden.

Il existe deux manières de passer en mode édition : soit en cliquant sur le bouton « Édité » situé à droite du bouton d'inspection soit en passant par le menu contextuel (clic droit), en choisissant « Éditer le code HTML ».

Une fois basculé en mode édition, on retrouve le nœud sélectionné et ses enfants qui apparaissent dans une zone de texte éditable.

À ce stade, tout le code est éditable (texte, HTML, CSS…), les modifications sont prises en compte et visualisables à la volée.

Dans le cadre de notre exemple, nous allons nous intégrer dans le code HTML/CSS existant en créant une nouvelle balise p et insérer le contenu « Article Firebug ».

Nous avons ajouté au passage quelques propriétés CSS (le bord en rouge par exemple) ce qui permet de distinguer le nouvel élément des autres.

En cliquant de nouveau sur « Éditer » (alors que le bouton est sélectionné) nous sortons du mode édition en revenant dans le code source HTML de notre page.

On remarque alors que le morceau de code, nouvellement créé, est parfaitement intégré dans le code source.

Cet exemple très simple à reproduire illustre la facilité avec laquelle il est possible d'utiliser Firebug pour tester des modifications de code HTML.

Firebug se repose énormément sur les éléments du menu contextuel pour présenter certaines fonctionnalités qu'on ne trouverait nulle part ailleurs.

Voici les possibilités qu'offre le menu contextuel lors de la sélection d'un élément dans la prévisualisation HTML :

Ces éléments étant suffisamment clairs, je ne détaillerai pas chacun d'entre eux. Je reviendrai simplement sur l'élément de menu « journaliser les événements » qui n'est pas très explicite. Il s'agit simplement d'un monitoring des événements (onclick, onmousemouve…) appliqué à l'élément sélectionné. Chaque événement déclenché est alors affiché dans la console.

Restons dans l'onglet HTML de Firebug. Lorsqu'un élément est sélectionné, la zone située à droite du code HTML permet d'accéder à trois onglets : Style, Apparence et DOM.

II-F-1. Style▲

L'onglet Style donne accès aux feuilles de style de l'élément sélectionné. Les informations données permettent de connaître la provenance de la règle de style appliquée ainsi que d'éventuelles informations sur son héritage.

Il est également possible d'éditer une propriété, de la désactiver ou de la supprimer, mais également d'en créer une nouvelle. Cette partie sera abordée en détail dans le chapitre suivant (chapitre III).

II-F-2. Apparence▲

L'onglet Apparence permet la lecture rapide des mesures d'un élément sélectionné à savoir :

• la propriété offset ;
• la propriété margin ;
• la propriété border ;
• la propriété padding ;
• la hauteur et la largeur au centre de cette fenêtre.

Ces valeurs sont modifiables en cliquant dessus, soit en éditant la valeur au clavier soit en la faisant varier avec les boutons haut et bas. La modification est immédiatement visible selon les mêmes modalités que la modification du code HTML.

II-F-3. DOM (Document Object Model)▲

Rappelons simplement que le DOM (Document Object Model) est la description d'une interface permettant l'accès et la modification du document (la page web). Communément, c'est en JavaScript que se font les accès au DOM.

Cet onglet donne accès au DOM de chaque élément sélectionné, comme illustré dans la copie d'écran suivante :

En premier lieu, Firebug permet, via une liste déroulante, de sélectionner le fichier de style à visualiser.

Cette liste comprend :

• les fichiers définis avec l'instruction CSS « import » ;
• les fichiers pointés par l'instruction HTML « link » ;
• le style défini dans la page.

Sélectionner une page permet de visualiser immédiatement la feuille de style dans la zone principale de la fenêtre.

Chaque propriété et sa valeur sont directement éditables, soit en cliquant sur l'élément soit par le menu contextuel (clic droit) en choisissant « Éditer ».
Dans notre exemple, il s'agit du changement de couleur de la police d'un titre.

L'exemple suivant illustre la possibilité de désactiver une règle de style :

Les couleurs sont prévisualisables en survolant la propriété qui y fait référence, comme illustré ici :

Ci-après un autre exemple pour la prévisualisation d'une image :

Nous avons vu que chaque image pouvait être visualisée en survolant une propriété qui pointe sur une ressource de type image. Il est également possible de copier le chemin de l'image ou de l'afficher dans un nouvel onglet en passant par le menu contextuel.

Autre curiosité découverte lors de la rédaction de cet article : Firebug permet la complétion sur les propriétés et les valeurs CSS pendant l'édition ou la création.

Cerise sur le gâteau, les valeurs proposées en complétion sont en accord avec la propriété choisie.

La première fonctionnalité remarquable de Firebug est l'affichage « amélioré » des erreurs JavaScript.

Firebug affiche les éventuelles erreurs dans la barre de statut de firefox en lieu et place de l'icône Firebug.

En cas d'erreurs, ces dernières sont détaillées dans la console Firebug, comme illustré ci-dessous :

Le signalement d'une erreur est constitué du message d'erreur, de la localisation de cette erreur dans le code et enfin du nom de fichier JavaScript responsable de cette erreur.
Ce nom de fichier est cliquable et amène à la visualisation du fichier concerné dans Firebug.

Firebug affiche également la pile d'appels des fonctions dans le contexte de l'erreur.

Chaque script JavaScript de la page courante est visualisable dans Firebug (onglet Script). On peut ainsi voir les scripts localisés dans la page et les scripts situés dans des fichiers externes.

On peut filtrer le type de fichier à afficher dans la liste (tous, eval, scripts statiques, scripts événements).

De manière générale, un débogueur permet de contrôler l'exécution d'un programme et d'observer le contenu des variables en mémoire.

Afin d'illustrer l'utilisation du débogueur, nous allons prendre un code JavaScript simple. Dans ce code, nous allons définir deux fonctions.

Par commodité, le code JavaScript est embarqué dans la page HTML.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
 
<html>
    <head>
        <title>Article Firebug</title>
        <meta http-equiv="Content-Type" content="txt/html; charset=utf-8" />
        <script type="text/javascript">
            // Objet personne
            function Personne(nom, prenom) {
                this.nom = nom;
                this.prenom = prenom;
                this.toString = function () {
                    return this.prenom + ' ' + this.nom ;
                }
            }
 
            function disBonjour() {
                // Créer une nouvelle personne...
                var oPersonne = new Personne('Pommereau', 'Eric');
                // Afficher le message
                var message = "Bonjour";
                alert(message + ' ' + oPersonne);
            }            
        </script>
    </head>
    <body>
        <button onclick="disBonjour();">Dire bonjour</button>
    </body>
</html>

L'exemple ci-dessus provoque l'exécution de la fonction disBonjour() sur l'événement onclick du bouton. Dans cette fonction, un objet de type Personne est instancié et finalement affiché dans une boîte d'alerte.

Le contrôle de l'exécution d'un script est permis par la définition d'un ou de plusieurs points d'arrêt.

IV-C-1. Définir un point d'arrêt▲

Un point d'arrêt désigne la ligne à laquelle l'exécution d'un script doit s'arrêter. Pour que le point d'arrêt soit pris en compte lors de l'exécution du script, le déroulement de l'exécution doit obligatoirement passer par ce point.
Attention ! Placer un point d'arrêt dans une fonction qui n'est jamais appelée n'aura aucun effet.

Rappelons que l'exécution du JavaScript se fait soit au chargement de la page, soit après que la page ait été chargée par l'intermédiaire d'un événement (bouton cliqué par exemple).

Dans notre exemple nous allons stopper l'exécution sur la première instruction de la fonction disBonjour().

Pour placer un point d'arrêt, il suffit de cliquer dans la marge sur le numéro de la ligne souhaitée.

Reprenons notre exemple et voyons comment tester notre point d'arrêt en le plaçant cette fois sur la ligne à laquelle le message est affiché dans une boîte d'alerte.

On remarque dans ce contexte (l'exécution du JavaScript est arrêtée à la ligne 23) la présence, à droite de la fenêtre Firebug, de quelques informations qu'il est intéressant de passer en revue.

L'onglet fenêtre Espion affiche les variables accessibles dans le contexte (c'est-à-dire dans la fonction courante).

Les variables présentes peuvent être inspectées comme c'est le cas ici pour l'objet oPersonne où l'on distingue les deux propriétés nom et prénom.

L'objet this représente la fenêtre courante et permet l'accès à toutes ses propriétés et méthodes.

Une autre fonctionnalité permet d'inspecter d'autres variables non visibles (parce que non instanciées par la fonction courante), mais néanmoins accessibles. Il faut, pour cela, mettre le nom de la variable dans la zone « Nouvelle expression espion » et valider en tapant sur la touche « Entrée ». Si la variable se trouve bien dans la portée, il est alors possible de l'inspecter. Il est également possible de récupérer les variables globales et d'en afficher le contenu.

L'onglet Pile représente la pile d'appels des fonctions, à savoir les différents appels de fonctions en cours dans le contexte d'exécution. Dans notre exemple, un événement onclick() a provoqué l'appel de la fonction disBonjour().

Un troisième onglet présente quant à lui les points d'arrêts existants et permet soit de se rendre sur la partie de code correspondante, soit d'effacer le point d'arrêt.

IV-C-2. Point d'arrêt avec condition▲

Il est également possible d'associer au point d'arrêt une condition qui rendra ce point valide si l'expression rentrée est vraie.

L'exemple suivant ne provoquera l'arrêt de l'exécution que si la variable nom est égale à « Pommereau ».

IV-C-3. Exécution pas à pas▲

L'exécution pas à pas permet de suivre le déroulement du script instruction par instruction.

Le débogueur s'arrête lorsque le point d'arrêt est rencontré et permet plusieurs types de contrôles du déroulement du script :

• Continuer : le script suit son cours. (touche F8) ;
• Pas à pas détaillé : l'exécution se poursuit également dans les fonctions enfants (touche F11) ;
• Pas à pas principal : l'exécution se fait dans la portée de la fonction courante (touche F10) ;
• Pas à pas sortant : provoque la sortie de la fonction courante.

La copie d'écran ci-après illustre l'exécution stoppée sur un point d'arrêt :

Etre en mesure d'identifier les parties de code JavaScript qui ralentissent vos applications est loin d'être évident.

Le profiler propose d'écouter les appels de fonctions JavaScript et d'en afficher un rapport détaillé.

L'onglet réseau permet de visualiser, sous la forme d'une liste, l'ensemble des ressources téléchargées par le navigateur. Il est possible de filtrer le type de ressources en cliquant sur les différents boutons de filtrage proposés (Tous, HTML, CSS…).

V-A-1. Les différents types de ressources▲

• La page visitée.
• Les fichiers feuilles de style.
• Les fichiers JavaScript.
• Les requêtes asynchrones (AJAX).
• Les images.
• Les animations flash.

Il est possible de voir très facilement les ressources qui n'ont pu être chargées (lors d'erreur de chemin dans l'inclusion d'un script ou d'une feuille de style par exemple).

V-A-2. Le plein d'informations▲

Pour chaque fichier téléchargé sont indiquées différentes informations, en l'occurrence :

• la réponse du serveur ;
• l'hôte d'où provient la ressource ;
• la taille du fichier ;
• le temps de chargement.

Des informations complémentaires s'affichent au survol et comportent des informations plus précises, indiquant les différentes étapes de chargement de la ressource :

Voici, en détail, les différentes étapes de chargement (en français pour la version 1.4.2) :

• Recherche DNS (turqouise) ;
• Connexion (vert) ;
• Mise en file d'attente (beige) ;
• Attente de la réponse (violet) ;
• Réception des données (gris) ;
• Événement 'DOMContntentLoaded' (bleu) ;
• Événement 'Load' (rouge).

Enfin le nombre de ressources téléchargées, la taille et temps total de téléchargement sont indiqués en fin de liste.

V-A-3. Prévisualisation des images▲

Il est possible de voir les images téléchargées au survol des ressources de type image

V-A-4. Clic droit…▲

Le menu contextuel d'une ressource offre quant à lui de nombreuses possibilités :

V-A-5. Plus…▲

Il est possible, pour chaque ressource, d'avoir accès à des informations plus détaillées en cliquant sur le bouton [+] situé à gauche de l'élément. Ces informations basées sur l'échange client/serveur sont regroupées par onglet. En fonction du contexte les informations disponibles sont les suivantes :

• paramètres (ce sont les paramètres HTTP passés, par exemple index.php?image=logo.gif) ;
• en-têtes (envoyés par Firefox et retournés par le serveur web) ;
• réponse (le contenu de la réponse) ;
• cache (différents paramètres de cache).

Voici à quoi ressemble l'affichage de ces informations après avoir déplié la zone avec le bouton [+] :

Énorme valeur ajoutée de l'extension : la possibilité de surveiller les requêtes XMLHTTP (requêtes AJAX). Cette fonctionnalité de Firebug en fait, à elle seule, une extension incontournable et permet une utilisation plus sereine d'AJAX.

Les informations disponibles pour une requête AJAX sont séparées en trois parties :

• le dialogue client/serveur : les en-têtes HTTP ;
• les paramètres HTTP : GET ou POST ;
• la réponse du serveur.

V-B-1. Le dialogue client/serveur : les en-têtes HTTP▲

Les en-têtes HTTP portent les informations du dialogue entre la demande du client (le navigateur) et la réponse du serveur, comme illustré dans les deux copies d'écran suivantes :

V-B-2. Les paramètres HTTP : GET ou POST▲

À l'aide du second onglet POST, Firebug permet de voir les paramètres HTTP (indifféremment GET ou POST) qui ont été réellement transmis au serveur.

V-B-3. La réponse du serveur▲

Enfin, et c'est sans doute le plus important : la visualisation de la réponse du serveur sous la forme d'une chaîne de caractères.

En visualisant la réponse et l'ensemble des composantes de la requête XMLHTTP, on s'assure ainsi de la validité du code JavaScript qui invoque le serveur.

La console permet l'exécution d'un code JavaScript « à la volée ». Dans l'exemple ci-dessous, il s'agit d'un simple message d'alerte :

Il suffit donc de saisir le code souhaité et le résultat s'affiche après avoir appuyé sur la touche Entrée.

Un cas pratique : l'exécution « manuelle » d'une fonction de portée globale. Il est également possible de modifier la valeur d'une variable disponible

L'affichage multilignes permet de saisir plusieurs lignes de code et d'exécuter l'ensemble de ce code :

Il est possible, outre le débogage, de laisser des messages de log en différentes positions du script.

VI-B-1. Un simple message▲

Il suffit de taper console.log('message'); à l'endroit souhaité du script:

VI-B-2. Différents types de messages▲

Ces messages de log peuvent prendre différentes formes (simple, info, warn et error) :

 

Sélectionnez

function disBonjour() {
    // Créer une nouvelle personne...
    var oPersonne = new Personne('Pommereau', 'Eric');
    // Afficher le message
    var message = "Bonjour";
    alert(message + ' ' + oPersonne);
 
    console.info(message + ' ' + oPersonne);
    console.warn(message + ' ' + oPersonne);
    console.error(message + ' ' + oPersonne);
}

VI-B-3. Grouper les messages▲

Enfin, l'instruction console.group() permet de regrouper plusieurs messages :

 

Sélectionnez

console.group('Groupe de messages');
 
console.info(message + ' ' + oPersonne);
console.warn(message + ' ' + oPersonne);
console.error(message + ' ' + oPersonne);
 
console.groupEnd('Groupe de messages');
 
console.error(message + ' ' + oPersonne);

La complétion assiste la saisie en proposant un résultat lors de la frappe d'une commande dans l'invite de commande (uniquement dans le mode une ligne).

Cette complétion comprend les éléments :

• de langage spécifiques à Firebug ;
• les fonctions et variables JavaScript de portée globale ;
• les éléments du DOM.

Pour reprendre l'énumération ci-dessus, si vous tapez « console. » et la touche [TAB], Firebug proposera à chaque tabulation la méthode ou propriété disponible.

Si une fonction « disBonjour() » est disponible en portée globale, le fait de taper « disB » puis la touche [TAB] complétera le nom de la fonction automatiquement.

Cela pourra en outre s'appliquer à tout objet du DOM (par exemple window.location.href).

FirePHP permet de loguer dans un script PHP des informations qui seront finalement affichées dans la console Firebug (comme si l'on avait utilisé l'instruction console.log()). Ces informations de log transitent par les en-têtes HTTP. Cette extension prend tout son sens dans le développement AJAX, typiquement lors de l'envoi de données avec une requête XMLHttp, où il est difficile de faire apparaître des informations de débogage.

L'installation de l'extension Firephp s'effectue aussi simplement que toute extension de Firefox. Ensuite les sources PHP de Firephp -téléchargeables sur le site- doivent être placées sur le serveur web utilisé. C'est ce qui permettra l'utilisation de Firephp dans les scripts PHP.

Ensuite, l'utilisation de cette extension est assez simple. Le log se fait soit par une fonction soit par un objet, selon ce que l'on a choisi (procédural ou objet).

Lien vers le Site officiel de FirePhp.

Firecookie permet une gestion aisée des cookies dans Firebug.

Grâce à cette extension, vous pourrez en effet créer ou détruire un cookie, voir les cookies d'un site ou encore en gérer les permissions.

Firecookie va plus loin en proposant également la gestion d'événements sur le changement de contenu (information répercutée dans la console), la possibilité d'exporter un ou plusieurs cookie(s) dans un fichier texte, la copie dans le presse papier, et enfin la possibilité de trier les cookies par nom ou par valeur.

Lien vers le site officiel de Firecookie.

YSlow est une extension créée par l'équipe de développement de Yahoo.

L'objet de cette extension est d'analyser une page web, de déterminer les éventuelles raisons susceptibles de la ralentir et, enfin, de proposer une liste de changements à effectuer pour résoudre les différents problèmes.

Lien vers le site officiel de YSlow.

Je voudrais remercier Kerod, responsable de la rubrique développement web, qui m'a accompagné tout au long de la rédaction de cet article.
Merci également à myriamsc79, Wu_Wei, Sabrina Payet et Marine Pommereau pour la relecture orthographique.
Enfin un grand merci à Marie Pommereau pour les améliorations apportées à ce document.

• Site officiel de Firebug
• Raccourcis clavier et souris
• Faq
• Référence ligne de commande
• Référence console
• Projet FireBug sur google code
• Vidéo sur l'utilisation de Firebug (dailymotion) par robusta-web