MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

Visite guidée de l'interface utilisateur

Cette page concerne le Débogueur JavaScript dans les versions antérieures à Firefox 52.

Voir la documentation pour les versions depuis Firefox 52.

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

Barre d'outils

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

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 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 à côté 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 :

Il existe un menu contextuel (clic droit) pour les éléments de la liste des sources celui-ci permet de copier l'URL d'où viennent les fichiers, ou bien de les ouvrir dans un nouvel onglet :

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 à côté 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 :

  • D'ajouter un point d'arrêt.
  • D'ajouter un point d'arrêt conditionnel
  • D'ajouter une expression-espionne de la sélection
  • De rechercher ou filtrer en utilisant le filtre de scripts

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 types : Interaction, clavier, souris, et navigation. Les événements qui ont un écouteur sont listés 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 à côté 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és sous ce type.

Étiquettes et contributeurs liés au document

 Contributeurs à cette page : maximelore
 Dernière mise à jour par : maximelore,