Firebug
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.
- 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.
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 : Firefox,
Seamonkey.
- 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.).
- 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é.