IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)

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

C'est un fait : le développement web est de plus en plus complexe. Accompagnée de Firefox, l'extension Firebug s'impose comme l'outil incontournable au service du développeur.
Firebug, c'est la possibilité d'inspecter et éditer le code HTML et CSS, de voir, monitorer et déboguer le code JavaScript, de visualiser les échanges entre le serveur et le navigateur… et bien d'autres fonctionnalités encore.
Dans cet article, je vous invite à découvrir les principales caractéristiques de Firebug et à en comprendre le fonctionnement.
21 commentaires Donner une note à l´article (5)

Article lu   fois.

Les deux auteurs

Site personnel

Profil Pro

Liens sociaux

Viadeo Twitter Facebook Share on Google+   

I. Introduction

Image non disponible

La grande utilisation des technologies périphériques à notre bon vieux HTML sonne comme une évidence. Impossible, en effet, de se passer des scripts JavaScript, des feuilles de style (CSS) ou bien des requêtes XMLHTTP (AJAX).

Les navigateurs web, initialement destinés à présenter du contenu statique, sont mis à rude épreuve en prenant en charge certaines tâches « normalement » dévolues aux serveurs.

Conséquence : il devient nécessaire de s'entourer d'outils offrant une aide pour le développement de ces technologies.

Il est possible de trouver différents outils pour le développement des feuilles de style ou des scripts JavaScript, mais ces outils interviennent bien souvent en amont de la visualisation (je pense à certains environnements de développement). Du côté des outils permettant l'intervention « en live » sur les pages, rien de réjouissant non plus.

Firebug répond en grande partie à cette carence en proposant les outils nécessaires pour voir, éditer, déboguer HTML, CSS et JavaScript et en permettant la visualisation instantanée des changements effectués.

Les exemples et les copies d'écran de cet article sont basés sur Firebug 1.3X.3 utilisé avec Firefox 3.0.9 et sous système d'exploitation « Windows Vista Edition Familiale Premium ».

L'idée de rédiger un tutoriel sur Firebug est née du manque de ressources francophones traitant du sujet. L'ambition de cet article est de présenter les fonctionnalités qui m'ont paru les plus pertinentes, de permettre une prise en main rapide et enfin de présenter certaines parties moins accessibles telles que l'utilisation de la console.

I-A. Installation

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. Tour d'ensemble

I-B-1. Les principales fonctionnalités

Il est difficile de donner un aperçu des fonctionnalités de Firebug, tant leur nombre est important.
On peut néanmoins distinguer trois axes principaux.

  • L'inspection et l'édition du code HTML, CSS et du DOM d'une page web.
  • Le développement des scripts JavaScript : un ensemble d'outils qui permet de voir, déboguer et profiler un script JavaScript.
  • Le monitoring de l'activité réseau qui permet de visualiser en détail le téléchargement des ressources par le navigateur et, en particulier, d'accéder au détail des requêtes XMLHTTP (AJAX).

Les modifications effectuées n'ont pas d'impact sur les fichiers concernés, ces derniers se trouvant soit sur un serveur, soit sur la machine.

Et l'extension web developer ?
Très complète, l'extension web developer propose un ensemble d'outils permettant un accès simple et rapide aux différents éléments d'une page web : cookies, CSS, formulaires, images…
La valeur ajoutée de Firebug face à cette extension est l'interaction avec le code qui offre de multiples possibilités d'éditer, de déboguer et d'avoir instantanément accès au résultat.
Web developer reste une extension très intéressante et complémentaire de Firebug.

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 :

Image non disponible

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

Image non disponible

I-C. Prise en main

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 »

Image non disponible

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.

Firebug peut provoquer le ralentissement de certaines pages.

II. Inspecter et modifier le HTML

II-A. Voir le code source

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 :

Image non disponible

II-B. Retrouver un élément

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.

Image non disponible

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

Image non disponible

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

Image non disponible

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

II-C. Hiérarchie des éléments

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.

Image non disponible

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.

II-D. Édition du code HTML

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.

Image non disponible

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

Image non disponible

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.

Image non disponible

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.

Image non disponible

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

II-E. Le menu contextuel

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 :

Image non disponible

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.

II-F. Plus d'infos : Style, apparence et DOM

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.

Image non disponible

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.

Image non disponible

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.
Image non disponible

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 :

Image non disponible

III. Des CSS « nickel chrome »

Le développement des feuilles de style en cascade est bien plus complexe qu'il n'y paraît a priori. Pour s'en convaincre, il suffit d'observer les feuilles de style produites par les sites professionnels et d'en constater la complexité.

Firebug propose plusieurs fonctionnalités qui permettent d'y voir plus clair : l'inspection aisée des différents fichiers de CSS, leur visualisation, mais aussi la modification de règles de style ou la création de nouvelles propriétés avec la visualisation instantanée du résultat.

L'onglet CSS de Firebug permet un accès global aux feuilles de style en cascade (CSS) de la page concernée.

III-A. Choisir le fichier à inspecter

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.
Image non disponible

III-B. Visualiser, éditer

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

Image non disponible

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.

Image non disponible

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

Image non disponible
Image non disponible

La création ou la suppression d'une propriété et de sa valeur se font par le menu contextuel.

III-C. Prévisualiser images et couleurs au survol

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

Image non disponible

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

Image non disponible

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.

III-D. Complétion des propriétés et valeurs possibles d'une instruction CSS

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.

IV. Tout pour le JavaScript

Incontestablement, la place du JavaScript dans nos développements est de plus en plus importante.

Aujourd'hui, JavaScript permet au développement web de représenter une alternative crédible aux développements dits « lourds ». Les nombreuses librairies (jQuery, YUI, ExtJS, dojo, etc.) permettent notamment la simulation d'un environnement connecté se reposant en grande partie sur des techniques dites « AJAX ».

Ce constat change la donne et pousse à reconsidérer notre manière de développer pour le Web en général et en JavaScript en particulier.

Firebug est un premier pas vers la professionnalisation du développement en JavaScript en proposant un ensemble d'outils permettant la compréhension du code JavaScript et en rendant la création et la modification plus aisées.

IV-A. Visualiser les erreurs

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 :

Image non disponible

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.

IV-B. Sélection du fichier JavaScript à visualiser

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.

Image non disponible

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

IV-C. Déboguer

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.

 
Sélectionnez
<!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.

Image non disponible

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.

Image non disponible

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.

Image non disponible

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.

Image non disponible

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

Image non disponible

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.

Image non disponible

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

Image non disponible

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

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

Image non disponible

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 :

Image non disponible

IV-D. Identifier les parties lentes avec le profiler

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

Image non disponible

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

Image non disponible

Pour utiliser cette fonctionnalité, il suffit d'activer le profiler dans l'onglet console (le bouton profiler), d'exécuter le JavaScript à auditer (soit par événement soit par rechargement de la page) et enfin d'arrêter le profilage en appuyant sur ce même bouton profiler.

V. Monitoring de l'activité réseau

L'activité réseau est le reflet de la communication du client (Firefox) et du serveur qui délivre la page web et les ressources recensées dans cette dernière (images, CSS, JavaScript).

Autre fonctionnalité qui fera le bonheur des développeurs qui utilisent AJAX : la possibilité de voir et d'inspecter en détail les requêtes XMLHTTP.

V-A. Les ressources téléchargées en détail

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

Image non disponible
  • 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).

Image non disponible

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.
Image non disponible

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 :

Image non disponible

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.

Image non disponible

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

Image non disponible

V-A-4. Clic droit…

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

Image non disponible

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 [+] :

Image non disponible

V-B. Les requêtes XMLHTTP à la loupe

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

Image non disponible
Image non disponible

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.

Image non disponible

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.

Image non disponible

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.

VI. Aller plus loin avec la console

La console Firebug est accessible en cliquant sur le premier onglet Console.

La console offre un certain nombre de fonctionnalités intéressantes, notamment l'exécution de JavaScript à la volée ou le log permettant le traçage d'un script JavaScript.

VI-A. Du JavaScript à la volée

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 :

Image non disponible

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 :

Image non disponible

VI-B. Logger

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:

Image non disponible

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);
}
Image non disponible

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);
Image non disponible

VI-C. Aide à la saisie : la complétion

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

VII. Les projets périphériques

Il est possible de télécharger d'autres extensions qui s'appuient sur Firebug. La liste ci-après aborde quelques extensions « populaires » et ne constitue pas une liste exhaustive.

VII-A. FirePHP

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.

VII-B. FireCookie

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.

VII-C. YSlow

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.

VIII. Conclusion

Tout d'abord, merci à vous d'avoir pris la peine de lire cet article, j'espère qu'il vous a plu.

J'espère également vous avoir convaincus de l'intérêt d'utiliser Firebug. Pour ceux qui étaient déjà convertis, j'ose espérer que cet article a pu mettre en lumière certaines fonctionnalités.

Firebug est une extension très riche. Avant de rédiger cet article, je ne pensais pas trouver autant de choses à dire. Le contenu de ce dernier est par ailleurs loin d'être exhaustif: il existe un grand nombre de fonctionnalités que je n'ai pas traitées ici, et bien d'autres apparaîtront dans de futures versions de cette étonnante extension.

Je tenterai, certainement par l'intermédiaire d'un blog, de vous tenir informés de l'apparition de nouvelles fonctionnalités.

VIII-A. Remerciements

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.

VIII-B. Liens utiles

Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants : Viadeo Twitter Facebook Share on Google+   

Copyright © 2008 Eric Pommereau. Aucune reproduction, même partielle, ne peut être faite de ce site ni de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.