|
| |
| PRATIQUE CLIENTS WEB |
 |
|
|
| Firebug, le débogage de pages Web sous Firefox |
| |
| Cette extension facilite la vérification de codes CSS, XML, DOM et surtout JavaScript, et met en place un jeu de méthodes à même de réaliser des tests unitaires complets sur ce dernier langage.
(18/10/2006) |
  |
 |
Forum |
|
|
Réagissez
dans les forums
de JDN Développeurs
|
La vague "Web 2.0" n'a de cesse de pousser les développeurs à reprendre JavaScript au sérieux, afin de développer des applications Web plus stables et sécurisées.
Pour corriger les problèmes rencontrés dans leurs codes sources, les développeurs n'avaient la plupart du temps que la commande alert() et des messages d'erreurs souvent cryptiques. Les plus chanceux pouvaient se reposer sur le débogueur Venkman de Firefox (lire notre article du 30/05/06), mais celui-ci peut rapidement se révéler être trop complet ou compliqué pour la tâche.
Firebug est une extension Firefox qui donne à accès à des outils de suivi du code JavaScript, mais également CSS et des accès DOM d'une page parcourue par Firefox, mais également des données XML ainsi que des requêtes XMLHttpRequest (donc, Ajax). Sa console JavaScript permet par ailleurs de tester du code à la volée. Notez qu'il est préférable de désinstaller Venkman avant d'utiliser Firebug.
L'un des grands apports de Firebug est de proposer une petite API pour sa console JavaScript, donnant notamment accès, via l'objet console, à de nombreuses méthodes de journalisation, de mesure, et d'assertion. Couplé à la possibilité de formater les chaînes à la manière de printf, et d'une grosse poignée de fonctions intégrées, Firebug se présente comme un véritable environnement de test.
 |
|
Utilisation de Firebug avec Google Maps
|
Toutes les fonctions proposées par Firebug résultent en une journalisation. Chacune sert un objectif pour le développeur. La méthode générale log() agit comme un printf() classique :
console.log(largeur: %d hauteur: %d', width, height);
var unTableau = ['element1', 'element2', 'element3'];
console.log(unTableau); // affiche le contenu du tableau
 |
|
Affichage de la console
|
Firebug propose également quatre méthodes permettant de mieux qualifier les messages de test : debug() pour les messages de débogage, info() quand il s'agit simplement d'une information ("traitement du tableau"), warn() pour prévenir d'un problème potentiel, error() pour signaler une erreur. Elles fonctionnent de la même manière que log(), et leur usage reste à la discrétion du développeur.
 |
|
Signalisation des différentes méthodes de journalisation
|
L'extension offre une vingtaine de méthodes d'assertion : assert(), assertEquals(), assertFalse(), assertContains()... Mine de rien, Firebug offre ici aux développeurs JavaScript les moyens de construire de véritables tests unitaires sur leurs programmes JavaScript, ce qui n'était pas vraiment concevable facilement auparavant (lire notre article "Java : les assertions"). Nous aurons l'occasion de revenir sur ce sujet.
Il est possible de placer des points d'arrêt, comme dans tout débogueur. Dans l'onglet Debugger, choisissez le script à tester dans le menu déroulant en bas de la fenêtre, et cliquez à gauche de la ligne visée : un point rouge apparaît. Relancez la page, le point d'arrêt se déclenche, et un panneau latéral s'ouvre pour afficher les variables locales et la pile d'appels. Utilisez les flèches à gauche du menu de scripts pour contrôler le parcours.
L'onglet Inspector, enfin, permet de parcourir le code source et les informations sur le HTML, les CSS, les évènements, le DOM...
|
|
|
|
