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

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. Les sources sont triées par origine, puis organisées selon la structure de dossier depuis lesquels elles sont chargées.

Il est possible de rechercher un fichier en utilisant le raccourci clavier Ctrl + P (Cmd + P sur Mac).

Il est possible de simplifier la liste des fichiers dans la liste des sources avec un clic droit sur un dossier, et une sélection de "définir comme répertoire racine".

 

Maintenant, la racine de la liste des sources est la racine du projet, rendant ainsi la navigation bien plus pratique.

 

Onglet Structure

L'onglet structure affiche un arbre pour naviguer dans le fichier ouvert. Il permet de se placer directement dans une fonction, une classe, ou une méthode.

Panneau des sources

Ce panneau affiche le fichier JavaScript actuellement chargé.

Lorsque le panneau des sources est sélectionné, il est possible de rechercher une string dans le fichier en utilisant  Ctrl + F (Cmd + F sur Mac).

Les points d'arrêt ont une flèche bleue superposée au numéro de ligne. Les points d'arrêt conditionnels ont eux une flèche orange. Si le code est arrêté à un point d'arrêt, la flèche est surchargée de vert. Dans la capture d'écran ci-dessous, il y a trois points d'arrêt :

  • La ligne 19 a un point d'arrêt normal.
  • La ligne 22 a un point d'arrêt normal et le Débogueur est arrêté dessus.
  • La ligne 40 a un point d'arrêt conditionnel.

Barre d'outils

La barre d'outils est située en haut du panneau de droite :

Cette barre est composée de :

Liste des points d'arrêt

Sous la barre d'outils, se trouve une liste de tous les points d'arrêt. À côté de chaque point, il y a une case à cocher qui permet d'activer/désactiver le point d'arrêt :

Expressions espionnes

Après Firefox 54, il est possible d'ajouter des expressions espionnes dans la barre de droite. Celles-ci seront évaluées lorsque le code est en pause :

Infobulle de variable

Survoler une variable dans le code source affichera une infobulle contentant sa valeur :

Pile d'exécution (call stack)

Lorsque le Débogueur est en pause, une pile d'exécution est affichée :

Chaque niveau de la pile à sa propre ligne, avec le nom de la fonction, le nom de fichier, et le numéro de ligne. Cliquer sur cette ligne ouvre la source dans le panneau des sources.

Portées

Dans le panneau de droite, se trouve un élément nommé "Portées". Lorsque le Débogueur est arrêté, il est possible d'étendre cette section pour afficher tous les objets qui sont dans la portée du programme en ce point :

Les objets sont triés par portée : du plus local au plus global (Window dans la plupart des scripts de page web).

Étiquettes et contributeurs liés au document

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