Visite guidée de l'interface utilisateur

Cette page décrit le Débogueur JavaScript tel qu'il apparait dans les versions 52 et plus de Firefox (Firefox Nightly et Firefox Developer Edition).

Pour la documentation sur les versions antérieures (Firefox Beta et Firefox normal), voir Débogueur (avant Firefox 52).

Si vous utilisez Firefox 52 ou plus récent, et que vous avez besoin d'utiliser l'ancien Débogueur, il faut changer la préférence "devtools.debugger.new-debugger-frontend" à false dans about:config.

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).

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 5 a un point d'arrêt normal.
  • La ligne 8 a un point d'arrêt normal et le Débogueur est arrêté dessus.
  • La ligne 10 a un point d'arrêt conditionnel.

Barre d'outils

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

Cette bare 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. À coté 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és lorsque le code est en s’arrête :

Recherche améliorée

La recherche de code à été améliorée dans Firefox 54. Des bordures sont affiché autour des correspondances, le nombre total de correspondances est affiché dans la barre de recherche, et un eoption "recherche de fonction" est maintenant disponible :

Infobulle de variable

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

Pile d'execution (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 sourve dans le panneau des sources. La capture ci-dessus affiche la pile suivante :

Chaque couche de la pile possède sa ligne qui affiche le nom de la fonction, le nom de fichier, et le numéro de ligne. Cliquer sur une ligne ouvre la source correspondante dans le panneau des sources. La capture ci-dessus affiche la pile suivante :

launch()->
    diff()->
        diff_match_patch.prototype.diff_main()

Portées

Dans la 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 poing :

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, teoli, Goofy
 Dernière mise à jour par : maximelore,