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 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 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 composée 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 :

Recherche améliorée

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

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