Firebug

Description générale

Extension Firefox, débogueur JavaScript, XHTML, CSS

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.

Domaine

Thématique

Mot clé

Type de la ressource

Méthode d'accès des clients

Non Applicable

Méthode d'authentification des clients

Aucune

Cycle de vie du projet

Non Applicable

Date de début du projet

Etablissement du Référent

UM

Unité du référent

LIRMM