PRATIQUE JAVA 
Le déboguage JavaScript avec Venkman
 
Installation et première utilisation du débogueur associé au navigateur Firefox. (30/05/2006)
  Forum

Réagissez dans les forums de JDN Développeurs

Malgré les maigres aides fournies par les navigateurs lorsqu'un script ne fonctionne par correctement, il a toujours été assez laborieux de découvrir le fonctionnement interne d'un code JavaScript alors même qu'il s'exécutait : fenêtre alert(), textes ajoutés lors de l'exécution et code mis en commentaire n'ont jamais servi qu'à tester du code plutôt qu'à la vérifier.

L'extension Firefox Venkman apporte une réponse aux utilisateurs de ce navigateur sous la forme d'un débogueur qui rappellera des souvenirs aux développeurs d'autres langages. Par la même occasion, son interface pourra sembler assez inaccessible aux développeurs n'ayant connu que JavaScript. Son principal avantage par rapport à l'outil équivalent MS Script Debugger, est d'être multiplate-forme.

Une fois l'extension téléchargée et le navigateur redémarré, l'application est accessible via l'option JavaScript Debugger du menu Outils (et non l'option Console JavaScript). Celle-ci présente une interface avec plusieurs fenêtres, typique des débogueurs, mais pouvant en dérouter plus d'un.

Interface de Venkman au premier lancement

La barre d'icônes surplombant l'interface donne accès aux fonctionnalités les plus utilisées : Arrêt, Continuer un script, Eviter un bloc, Entrer dans un bloc, et Sortir d'un bloc.

En dessous, six panneaux vous accueillent. Ils peuvent être déplacés ou fermés au besoin.
  Loaded scripts : affiche les scripts de toutes les pages ouvertes. Il est donc préférable de n'avoir d'ouvert que l'onglet de la page à tester, au lancement de Venkman, sans quoi il faudra chercher laborieusement les scripts voulus.
  Local variables : lors du lancement d'un script, ce panneau vous indique les variables déclarées, et les valeurs qu'elles prennent au fur et à mesure.
  Watches : il permet de surveiller une variable, un élément HTML ou un calcul de valeurs fluctuantes en particulier.
  Breakpoints / Call stack : les points d'arrêt vous permettent de gérer à quel moment l'exécution du script doit s'arrêter, et l'endroit où vous vous trouvez si un code est en cours d'exécution.
  Source code : il vous montre le code source étudié.
  Interfactive session : C'est la commande en ligne de Venkman, vous pouvez y entrer directement des commandes, dont la liste est accessible en tapant /help (ou en tapant x-jsd:help dans la barre d'adresse URL).

La base de fonctionnement d'un débogueur consiste à placer des points d'arrêt là où le code semble problématique. Lorsque l'analyseur JavaScript parvient à ces points d'arrêt, il vous rend la main afin de vous laisser l'initiative du mouvement suivant. Pour ce faire, double-cliquez sur la fonction à étudier dans le panneau Loaded Scripts. Son code source s'ouvrira dans le panneau Source code.

Chaque ligne dispose d'un trait à sa gauche. En cliquant sur ce trait, vous changez l'état assigné à la ligne. Un clic affiche un B : vous avez placé un point d'arrêt (Breakpoint). Un autre clic affiche un F : vous avez placé un Future Breakpoint, qui sert dans le cas où l'on souhaite arrêter un script qui n'a pas encore été compilé. Encore un clic, et vous retirez tout point d'arrêt sur cette ligne. Notez que Venkman s'arrêtera avant l'exécution de la ligne marquée, pas après.

  Forum

Réagissez dans les forums de JDN Développeurs

Une fois le point B placé, exécutez la fonction. Dès le point atteint, Venkman passe au premier plan. Avec la fonction Step Into, vous pouvez apprécier à votre rythme l'évolution des valeurs dans le panneau Local Variables, et même les modifier en faisant un clic-droit/Change Value pour chacune. Notez que Venkman bloque tout autre usage du navigateur.

Armé de ces premiers outils, vous pouvez déjà découvrir plus finement le fonctionnement de votre code source.
 
Xavier Borderie, JDN Développeurs
 
 
Accueil | Haut de page