Visite guidée de l'interface utilisateur

Cet article est une visité guidée des principales sections de l'interface utilisateur du Débogueur JavaScript de Firefox. Cet interface est séparée en six sections principales :

Barre d'outils

La barre d'outils est composé de quatre sections :

Une ligne de boutons servant a contrôler le parcours à travers un script
Une visualisation de la pile d’exécution
Le filtre de script
Deux boutons pour :
- développer/réduire les panneau des variables et des événements
- contrôler les paramètres du Débogueur

Les quatre boutons de gauche ont (dans l'ordre) les fonctions suivantes :

Pause/Reprendre(F8) : met pause ou reprend l’exécution du script en débogage. Lorsque ce bouton devient bleu, cela veut dire que le script est en pause, soit parce que vous avez appuyé sur le bouton soit parce que le code est arrivé sur un point d'arrêt.
Passer la fonction (F10) : Passe à la ligne de JavaScript suivante.
Entrer dans la fonction (F11) : Entre dans la fonction appelée par la ligne de JavaScript actuelle si il appel il y a. Sinon, passe à la ligne suivante.
Sortir de la fonction (Shift-F11): Fait tourner le code jusqu’à sortir de la fonction actuelle.

La visualisation de la pile d’exécution montre la pile d’exécution au moment ou l’exécution est arrêté.

Panneau de la liste des sources

Le panneau de la liste des sources liste tous les fichiers sources JavaScript qui sont chargés dans la page, et permet d'en sélectionner un pour le déboguer. Ce panneau partage sa portion d'écran avec le panneau de la pile d’exécution. Les onglets en haut des panneaux permetent de passer d'un panneau à l'autre.

Les fichiers sources sont regroupés sous différentes catégories basées sur l'origine de ces fichiers. Il est possible de sélectionner n'importe lequel de ces fichiers et il sera alors chargé dans le panneau des sources.
Chaque point d'arrêt mis dans un fichier source est listé dans le panneau de la liste des sources juste en dessous du nom de ce fichier. La case à cocher à coté de chaque point d'arrêt permet de l'activer ou de le désactiver. Effectuer un clic droit sur un point d'arrêt dans la liste affiche un menu contextuel permettant de :

Désactiver, activer ou supprimer ce point d'arrêt, tous les points d'arrêt ou tous les points d'arrêt sauf celui-ci.
Rendre ce point d'arrêt conditionnel (ou éditer sa condition si il l'est déjà).

Les trois icônes en bas du panneau permettent de :

Panneau de la pile d’exécution

Le deuxième onglet de la partie gauche du Débogueur affiche une pile d’exécution verticale :

Chaque ligne représente un niveau de la pile, avec la couche actuelle au dessus. Chaque ligne contient le nom de la fonction ou elle est exécutée ainsi qu'un lien vers le fichier source au bon numéro de ligne.

Panneau des sources

Ce panneau affiche le fichier source JavaScript actuellement chargé. Les lignes ayant un point d'arrêt ont un cercle bleu à coté du numéro de ligne. Lorsqu'un point d'arrêt est atteint, une flèche verte apparaît sur le cercle :

Dans le panneau des sources, le menu contextuel (clic droit) permet de :

Ajouter un point d'arrêt.
Ajouter un point d'arrêt conditionnel
Ajouter une expression espionne de la sélection
Chercher ou filtrer en utilisant le filtre de scripts

Popup de variable

Survoler une variable dans le panneau des sources fait apparaître une popup affichant la valeur actuelle de la variable :

Cela permet de savoir rapidement la valeur d'une variable sans avoir à ouvrir le panneau des variables.

Panneau des variables

Le panneau des variables permet d’examiner et de modifier les variables du script lors de son exécution :

Ce panneau partage sa portion d'écran avec le panneau des événements. Pour passer de l'un à l'autre, il faut utiliser les onglets situés en haut du panneau.

Panneau des événements

Ce panneau liste tous les événements DOM qui sont écoutés dans le code.

Ce panneau partage sa portion d'écran avec le panneau des variables Pour passer de l'un à l'autre, il faut utiliser les onglets situés en haut du panneau.

Ce panneau regroupe les événements par type, la capture d'écran ci-dessus montre quatre type : Interaction, clavier, souris, et navigation. Les événements qui ont un écouteur sont listé sous leur type avec la syntaxe suivante :

[nom de l’événement] sur [cible de l’événement] dans [fichier source]

Cliquer sur la case à cocher à côté de l’événement aura pour conséquence de faire s’arrêter l’exécution à la première ligne de l'écouteur de l’événement. Cliquer sur la case à cocher à coté d'un type d’événement aura pour conséquence de faire s’arrêter l’exécution dans tous les écouteurs des événements listé sous ce type.