Pré-requis pour ce tutoriel

Remarque : à l’heure où j’écris ces lignes, la version 1.4 de Firebug est en bêta et n’est disponible que pour les utilisateurs de Firefox 3.5.

Installation et Activation

firebug-statusbar-mac-desactive

Une fois installé et Firefox redémarré vous devriez voir apparaître un petit insecte en bas à droite de votre fenêtre Firefox, pour le moment il doit être grisé, c’est signe que Firebug est désactivé.

Firebug étant très gourmand en mémoire et en processeur certaines fonctionnalités sont désactivées par défaut afin d’éviter de ralentir votre navigation sur Internet.

En double-cliquant sur l’icône située en bas à droite vous verrez apparaître un panneau au bas de votre fenêtre Firefox contenant 3 cases à cocher. Chaque case à cocher active une fonctionnalité de Firebug sur laquelle je reviendrai par la suite.

firebug-principal

Si vous jugez que Firebug réduit la visibilité du site vous pouvez l’ouvrir dans une nouvelle fenêtre à l’aide de la flèche située dans la partie supérieure droite du panneau.

Comme je l’évoquais précédemment Firebug consomme énormément de ressources, c’est pourquoi il est conseillé de le désactiver en permanence pour éviter de ralentir votre navigateur. Heureusement il est possible de paramétrer sur quels sites Firebug doit être constamment activé ou désactivé ; en cliquant sur la petite flèche qui se trouve dans l’onglet console vous verrez apparaître un menu déroulant, dans ce menu cliquez sur « Sites… », vous devriez normalement voir apparaître cette fenêtre.

firebug-console-activation

Passage en revue rapide des fonctionnalités

En standard Firebug offre 6 onglets :

  • Console : elle permet d’exécuter du Javascript directement sur une page et ainsi de manipuler le DOM de la page en cours, elle est également utile pour profiler l’exécution de votre code.
  • HTML : l’inspecteur HTML permet de repérer rapidement le code source d’un élément et de connaître les propriétés d’affichage de celui-ci (dimension, margin, padding, border et offset).
  • CSS : l’inspecteur CSS permet d’agir directement sur le CSS et donc sur l’affichage de la page en activant et désactivant des propriétés mais également en ajoutant de nouvelles propriétés.
  • Script : permet de déboguer vos script JS en positionnant des points d’arrêts et en exécutant pas à pas chaque instruction tout en visualisant les valeurs des différentes variables, tout simplement prodigieux !
  • DOM : l’inspecteur DOM permet de visualiser l’arborescence DOM complète de la page en cours.
  • Réseau : la console réseau vous permet de visualiser chaque échange fait avec le serveur (fichier CSS, JS, images, etc) et profiler le temps mis pour charger chaque fichier.

La console Javascript

Loguer vos messages

Comme je vous le disais précédemment, la console permet d’exécuter du Javascript directement dans la page en cours et ainsi de manipuler le DOM de ladite page. Mais la fonctionnalité la plus intéressante c’est bien entendu la possibilité d’afficher du texte dans cette console. Fini les « alert » à outrance !

La console vous permet d’afficher plusieurs types de messages :

console.log('message simple');
console.warn("message d'avertissement");
console.error("message d'erreur");
console.info("message d'info");

L’exemple ci-dessus générera l’affichage suivant :

firebug-console-log

Voici un petit exemple, imaginons que vous souhaitiez rechercher toutes les images d’une page pour une raison quelconque, en cours de développement vous allez sans doute être amener à écrire ceci pour vérifier le contenu de votre tableau :

var imgs = document.getElementsByTagName('img');
for(var i=0; i<imgs.length; i++) {
    alert(imgs[i].src);
}

Maintenant imaginez que vous avez 1500 images dans votre page, vous vous voyez cliquer 1500 fois sur « Ok » ? Bon je pense que vous avez compris l’intérêt de la console. Voici le même exemple mais cette fois-ci utilisant la console de Firebug :

var imgs = document.getElementsByTagName('img');
for(var i=0; i<imgs.length; i++) {
    console.log(imgs[i].src);
}

Tout aussi simple et beaucoup plus léger lors de vos tests, vous me l’accorderez ;)

Bien entendu la console Javascript vous avertira également si vous avez fait une erreur de syntaxe. Même si parfois les messages d’erreurs ne sont pas toujours très explicites, ils sont d’une aide précieuse car ils permettent de mettre le doigt sur la ligne posant problème.

firebug-script-error

Chronométrez votre Javascript

La course à la performance est le quotidien de tous les développeurs, et à ce titre les développeurs web n’y coupent pas! Dans cet objectif Firebug intègre des fonctions qui nous permettent de tester le temps d’exécution de notre code. Voici comment faire :

console.time('epershand');
var imgs = document.getElementsByTagName('img');
for(var i=0; i<imgs.length; i++) {
    console.log(imgs[i].src);
}
console.timeEnd('epershand');

firebug-console-timer

Remarque : vous pouvez très bien utiliser plusieurs Timer en même temps en précisant un nom différent à chaque fois.

L’inspecteur HTML & CSS

S’il y a bien une fonctionnalité qui peut séduire les intégrateurs c’est bien l’inspecteur HTML, couplé à l’inspecteur CSS l’intégration se fera à une vitesse fulgurante. Pour l’activer, à tout moment, cliquez sur « Inspecter » et naviguez sur la page avec votre souris pour voir instantanément le code source de l’élément que vous survolez.

firebug-inspecteur-html
  1. Le fameux bouton « Inspecter« . Hot tip : vous pouvez aussi effectuer un clic-droit sur un élément pour directement obtenir son code HTML,
  2. La hiérarchie d’élément à traverser pour atteindre l’élément sélectionné, vous pouvez à l’aide d’un clic droit sur un élément :
    • Copier le code HTML ou innerHTML,
    • Obtenir le XPath,
    • Journaliser les événements se produisant sur l’élément,
    • Ajouter un nouvel attribut HTML,
    • Editer le code HTML,
    • Supprimer l’élément du DOM,
    • Inspecter le DOM.
  3. Ce cadre vous permet de naviguer dans le code HTML de manière très fluide en dépliant les différents noeuds. Hot tip : chaque élément que vous survolez est mis en valeur dans la page HTML à l’aide de plusieurs couleurs mettant chacune en avant les dimensions, le padding et le margin.
  4. L’onglet CSS vous permet d’éditer dynamiquement les propriétés CSS soit en les désactivant soit en ajoutant de nouvelles. Hot Tip : lorsque vous manipulez un padding, un margin, un width, etc. bref une donnée en pixel, utilisez les flèches haut et bas pour pouvoir augmenter la valeur progressivement et voir instantanément le résultat sur l’affichage,
  5. L’onglet Apparence vous permet de connaître les informations sur l’offset de votre élément sur la page, ses margins, paddings et width,
  6. L’onglet DOM vous permet de consulter l’ensemble des propriétés et méthodes de l’élément sélectionné.

Voici ce que l’onglet « Apparence » vous présente :

firebug-inspecteur-apparence

Le débogueur Javascript

Si vous faites appel à Javascript pour dynamiser vos sites, vous vous êtes très certainement heurté à des bugs totalement inexplicable et sans comprendre leur origine. Heureusement le débogueur de Firebug est là :

firebug-script-debug
  1. Afin de naviguer dans le source de vos fichiers JS vous devez choisir entre :
    • Montrer les scripts statiques
    • Montrer les scripts statiques et eval
    • Montrer les scripts statiques et d’événements
    • Montrer les scripts statiques et d’événements et les eval()
  2. Sélectionnez ici le fichier de script que vous souhaitez visualiser et déboguer,
  3. Une fois vos points d’arrêt placés (cf. 7) vous pouvez exécuter pas à pas chaque instruction et visualiser en temps réel les valeurs des différentes variables (cf. 4),
  4. L’onglet Espions affiche les valeurs des variables utilisées par le script et présentes dans le DOM à l’instant t,
  5. L’onglet Pile affiche l’ordre d’appel des fonctions pour le script en cours de débogage,
  6. L’onglet Points d’arrêt affiche les différents points d’arrêts placés dans le code avec la possibilité de les désactiver,
  7. Pour placer un point d’arrêt il suffit de cliquer dans la colonne à côté du numéro de la ligne sur laquelle vous souhaitez stopper l’exécution de votre script.

Vers l’infini et au delà

Firebug n’est pas une simple extension car elle supporte également l’ajout de nouvelles fonctionnalités via de nouvelles extensions Firefox, en voici quelques unes qui pourront retenir votre attention :

  • YSlow vous permettra d’optimiser vos pages en passant notamment par la compression de vos fichiers CSS ou JS,
  • FirePHP vous permettra d’afficher vos « print_r » PHP dans la console de Firebug.

Vous savez maintenant l’essentiel pour utiliser Firebug alors bon développement à tous !