Firebug

Fiche logiciel validé
  • Création ou MAJ importante : 27/03/14
  • Correction mineure : 27/03/14
Mots-clés

Firebug : extension Firefox, débogueur JavaScript, XHTML, CSS

Description
Fonctionnalités générales

Firebug est un débogueur très utile pour mettre au point les sites web évolués. Il permet de passer aisément de la structure de la page web (code HTML) à la présentation (CSS) ou au comportement (JavaScript) : lorsqu'elle est activée (on peut l'activer pour certains sites seulement), une icône située dans la barre d'état du navigateur indique s'il y a des erreurs JavaScript. Un double-clic sur cette icône ouvre deux cadres au bas de la page, avec un menu permettant d'activer les principales fonctionnalités :

  • Le débogueur JavaScript permet de poser des points d'arrêt, suivre des expressions (variables locales ou globales), observer la pile d'appels, exécuter le code pas à pas, etc.
  • Les requêtes (paramètres envoyés et reçus) sont aisément visualisées, ce qui est particulièrement important dans le cas de requêtes asynchrones (de type Ajax). On peut afficher le résultat d'une requête (JSON, XML, HTML, cookies) après interprétation dépendant de son format : sous forme de structure de données (tableaux, ...) pour une requête JSON, dans un format correctement présenté, avec coloration syntaxique pour le XML, avec une interprétation complète pour le HTML.
  • Le bouton 'inspect', (ou l'option de menu contextuel appelée 'inspect') permet de lire la structure de la page web : on peut développer certains nœuds seulement, ce qui a l'avantage de faciliter la navigation à l'intérieur de la page en s'appuyant sur la structure du document. L'élément survolé par la souris est mis en valeur sur la page principale. Un clic sur le nom d'un élément affiche à droite de l'écran les propriétés de style correspondantes, avec l'indication des propriétés héritées, supprimées par héritage, et même des propriétés définies dans l'élément lui-même.
  • Les styles s'appliquant à la sélection sont visualisés en cascade, du plus spécifique au plus général, avec pour chacun d'eux le nom du fichier CSS source associé. Cela permet de comprendre facilement les effets d'héritage, imbrication et cascade propre aux CSS, de localiser rapidement l'attribut de style à l'origine d'une anomalie, ...
  • Si un script modifie la structure ou la présentation, ces modifications sont immédiatement reflétées dans les fenêtres HTML ou CSS.
  • Inversement, une modification dans la fenêtre HTML ou CSS est aussitôt répercutée dans la page web visualisée : très pratique pour tester l'effet d'un style ou d'une balise.
  • Un écran est dédié aux "cookies", cela permet de suivre l'évolution des cookies sur sa page web.
Autres fonctionnalités
  • La console JavaScript (messages d'erreur) est bien plus utilisable que la console de base de Firefox.
  • Firebug peut également servir de profileur, et ce de plusieurs manières :

    • Il est possible d'afficher le temps pris par chaque requête (HTML, images, scripts, etc.). On peut se limiter à certains types de fichiers : par exemple il est aisé de mesurer si une page met longtemps à se charger à cause de ses images.
    • Un véritable profileur est intégré à Firebug, il donne le temps passé dans chaque fonction.
  • Associée à la fonctionnalité Inspect, la rubrique de menu "layout" est intéressante, car elle affiche la "boîte" correspondante à l'élément HTML survolé, ce qui permet de "mesurer" en pixels la bordure, la marge, le "padding", enfin les dimensions de l'élément.
Interopérabilité

L’objectif est d’obtenir des fichiers parfaitement interopérables (HTML correct), cela dit l’outil tourne exclusivement sur les navigateurs de la famille Mozilla : Fiche Plume Firefox, Fiche Plume Seamonkey.

Contexte d'utilisation dans mon laboratoire/service
  • Application graphique utilisant un navigateur comme interface graphique évoluée.
  • Principal outil de mise au point pour la production de pages HTML, de feuilles CSS, de gabarits (squelettes SPIP, etc.).
Limitations, difficultés, fonctionnalités importantes non couvertes
  • Il faut mettre à jour Firebug en même temps que Firefox et réciproquement : il y a une matrice de compatibilité (on peut la retrouver sur le site de Firebug) entre les versions de Firefox et les versions de Firebug.
  • Il arrive qu'un message d'erreur soit signalé à une ligne totalement erronée (toujours la même d'ailleurs pour une application donnée). Un second essai corrige généralement le problème.
  • La stabilité n'est pas parfaite. Lorsqu'on a l'impression que le débogueur se met à dérailler, il suffit généralement de fermer l'onglet et de recommencer sur une nouvelle page. Dans certains cas, il est toutefois nécessaire de relancer Firefox. Il est à noter toutefois que la stabilité s’améliore au fur et à mesure que l'extension (ou firefox lui-même) gagne en maturité.
Environnement du logiciel
Distributions dans lesquelles ce logiciel est intégré

Aucune à ma connaissance, Firebug doit être installé à partir de Firefox (Outils/Modules complémentaires).

Plates-formes

Toutes les plate-formes sur lesquelles tourne Firefox.

Logiciels connexes

De nombreuses extensions de Firebug sont apparues, elles permettent d'ajouter des fonctionnalités à Firebug. Citons en particulier : FireRainbow qui apporte la coloration syntaxique du code JavaScript ou Arboreal qui permet de visualiser le DOM de manière particulièrement claire.

D'autres extensions sont utiles pour les développeurs web, notamment Fiche Plume HTML Validator pour la validation HTML (ce que Firebug ne fait pas), et Fiche Plume Web Developer, largement redondant avec Firebug, mais qui garde des spécificités intéressantes.

Autres logiciels aux fonctionnalités équivalentes

La plupart des navigateurs intègrent maintenant en standard des fonctionnalités (presque) équivalentes à celles de Firebug. C'est le cas au moins pour Internet Explorer (à partir de la version 8), Opera, Safari, Chrome. Ce point est extrêmement important, car il simplifie énormément l'écriture de pages web utilisables sur tous ces navigateurs.

Environnement de développement
Type de structure associée au développement

Firebug était produit initialement par Parakey, une start-up fondée par deux des créateurs de Firefox. Depuis, Parakey a été rachetée par Facebook, Yahoo participe au projet et une communauté s'est créée autour de Firebug.

Eléments de pérennité
  • Firebug commence à être cité dans les livres qui portent sur JavaScript.
  • L'extension est toujours développée, il y a régulièrement de nouvelles versions, la mise à jour est proposée au lancement de Firefox.
  • Les développeurs de Firebug et les développeurs de Firefox restent très proches. D'ailleurs, le fait que les navigateurs concurrents aient "imité" Firebug ne peut que renforcer les liens.
  • De nombreuses "extensions de l'extension" se sont créées, de sorte que Firebug est aujourd'hui bien plus qu'une simple extension.
Références d'utilisateurs institutionnels

De très nombreux utilisateurs, notamment au Centre de physique des particules de Marseille, l'équipe de développement des sites web de la collaboration CTA est utilisateur régulier de Firebug.

Environnement utilisateur
Liste de diffusion ou de discussion, support et forums

Il y a un groupe Google (http://groups.google.com/group/firebug) ainsi qu'un blog qui donne des nouvelles du développement (http://blog.firebug.com).

Documentation utilisateur

La documentation est succincte, mais intéressante en ce sens qu'elle se contente d'indiquer les fonctionnalités que l'on ne peut découvrir tout seul (raccourcis clavier, commandes JavaScript pouvant être insérées dans son blog, ...).

On peut trouver d'autres documentations en ligne, par exemple :

Divers (astuces, actualités, sécurité)
  • Deux raccourcis clavier indispensables à connaitre :
    • CTRL-F5 pour recharger la page et les scripts JavaScript (sinon Firefox risque de reprendre la version du cache)
    • F12 pour masquer/afficher la fenêtre Firebug.
  • Le bouton se trouvant à gauche de la fenêtre principale de Firebug est à la fois très utile et très dangereux : sa signification dépend de l'onglet activé. Par exemple si l'onglet "console" est actif, ce bouton permet de faire en sorte que le JavaScript s'arrête dès qu'une exception est lancée, même si votre code a prévu le traitement de ces exceptions : précieux pour déboguer, mais si le bouton est activé inopinément, votre script qui fonctionnait jusque là parfaitement se met à s'arrêter à la moindre exception...
  • A noter aussi la possibilité d'installer l'extension sans redémarrer Firefox (très utile quand on se trouve devant un problème "rare" ou "irréproductible", mais par malheur on se trouve sur un navigateur ou profile qui n'a pas encore Firebug installé) !