---
title: Visite guidée de l'interface utilisateur
slug: Tools/Debugger/UI_Tour
translation_of: Tools/Debugger/UI_Tour
original_slug: Outils/Débogueur/Visite_guidée_de_l_interface_utilisateur
---
<div>{{ToolsSidebar}}</div>

<p>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 :</p>

<ul>
 <li><a href="/fr/docs/Tools/Debugger/UI_Tour#Source_list_pane">Panneau de la liste des sources</a></li>
 <li><a href="/fr/docs/Tools/Debugger/UI_Tour#Source_pane">Panneau des sources</a></li>
 <li>Un troisième panneau, qui dépend de l'état du Débogueur, et peut contenir :
  <ul>
   <li><a href="/fr/docs/Tools/Debugger/UI_Tour#Toolbar">Barre d'outils</a></li>
   <li>Expressions espionnes</li>
   <li><a href="/fr/docs/Tools/Debugger/UI_Tour#Breakpoints_list">Liste des points d'arrêt</a></li>
   <li><a href="/fr/docs/Tools/Debugger/UI_Tour#Call_stack">Pile d'exécution</a></li>
   <li><a href="/fr/docs/Tools/Debugger/UI_Tour#Scopes">Portées</a></li>
   <li>Points d'arrêt XHR</li>
   <li>Points d'arrêt des ecouteurs d'évènement</li>
  </ul>
 </li>
</ul>

<p><img alt="" src="https://mdn.mozillademos.org/files/16840/debugger_uiTour_01.png" style="border: 1px solid black; display: block; height: 598px; margin-left: auto; margin-right: auto; width: 922px;"></p>

<h2 id="Panneau_de_la_liste_des_sources">Panneau de la liste des sources</h2>

<p>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.</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/16841/debugger_uiTour_02.png" style="border: 1px solid black; display: block; height: 598px; margin-left: auto; margin-right: auto; width: 922px;"></p>

<p>Il est possible de <a href="/fr/docs/Tools/Debugger/How_to/Search#Searching_for_files">rechercher un fichier</a> en utilisant le raccourci clavier <kbd>Ctrl</kbd> + <kbd>P</kbd> (<kbd>Cmd</kbd> + <kbd>P</kbd> sur Mac).</p>

<p>Depuis Firefox 69 les extensions Web sont listés en utilisant le nom de l'extension plutôt que son identifiant.</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/16868/source_list_pane.png" style="border: 1px solid black; display: block; height: 324px; margin: 0px auto; width: 373px;"></p>

<p>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".</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/16122/directory-root.png" style="border: 1px solid black; display: block; margin: 0 auto;"></p>

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

<p><img alt="" src="https://mdn.mozillademos.org/files/16123/directory-root-02.png" style="border: 1px sollid black; display: block; height: 408px; margin: 0 auto; width: 480px;"></p>

<h3 id="Onglet_Structure">Onglet Structure</h3>

<p>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.</p>

<h2 id="Panneau_des_sources">Panneau des sources</h2>

<p>Ce panneau affiche le fichier JavaScript actuellement chargé.</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/16843/debugger_uiTour_02.5.png" style="border: 1px solid black; display: block; height: 598px; margin-left: auto; margin-right: auto; width: 922px;"></p>

<p>Lorsque le panneau des sources est sélectionné, il est possible de <a href="/fr/docs/Tools/Debugger/How_to/Search#Searching_within_a_file">rechercher une string dans le fichier</a> en utilisant  <kbd>Ctrl</kbd> + <kbd>F</kbd> (<kbd>Cmd</kbd> + <kbd>F</kbd> sur Mac).</p>

<p><a href="/fr/docs/Tools/Debugger/How_to/Set_a_breakpoint">Les points d'arrêt</a> ont une flèche bleue superposée au numéro de ligne. Les <a href="/fr/docs/Tools/Debugger/How_to/Set_a_conditional_breakpoint">points d'arrêt conditionnels</a> 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 :</p>

<ul>
 <li>La ligne 82 a un point d'arrêt normal et le Débogueur est arrêté dessus.</li>
 <li>La ligne 85 a un point de sortie console qui affiche le contenu de <em>tableRow </em>dans la console.</li>
 <li>La ligne 100 a un point d'arrêt conditionnel.</li>
</ul>

<p><img alt="" src="https://mdn.mozillademos.org/files/16842/debugger_uiTour_03.png" style="border: 1px solid black; display: block; height: 445px; margin-left: auto; margin-right: auto; width: 922px;"></p>

<p>La troisième colonne affiche d'avantage d'informations sur les point d'arrêt. Par exemple le point de sortie console ligne 85 affiche la valeur de <em>tableRow </em>dans la console, et le point d'arrêt conditionnel à la ligne 100 a pour condition que <em>todolist </em>soit <em>undefined.</em></p>

<h2 id="Barre_doutils"><a name="toolbar">Barre d'outils</a></h2>

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

<p><img alt="" src="https://mdn.mozillademos.org/files/16844/debugger_toolbar.png" style="display: block; height: 126px; margin-left: auto; margin-right: auto; width: 236px;"></p>

<p>Cette barre est composée de :</p>

<ul>
 <li>Quatre boutons pour <a href="/fr/docs/Tools/Debugger/How_to/Step_through_code">contrôler le mouvement du Débogueur à travers le script : </a>

  <ul>
   <li><strong>Pause/Reprendre</strong>(F8) : met en pause ou reprend l’exécution du script en débogage. Lorsque ce bouton est en forme de "reprendre" 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.</li>
   <li><strong>Passer la fonction</strong> (F10) : Passe à la ligne de JavaScript suivante.</li>
   <li><strong>Entrer dans la fonction</strong> (F11) : Entre dans la fonction appelée par la ligne de JavaScript actuelle si appel il y a. sinon, passe à la ligne suivante.</li>
   <li><strong>Sortir de la fonction</strong> (Shift-F11): Fait tourner le code jusqu’à sortir de la fonction actuelle.</li>
  </ul>
 </li>
 <li>Un bouton pour désactiver tous les points d'arrêt.</li>
</ul>

<h2 id="Liste_des_points_darrêt">Liste des points d'arrêt</h2>

<p>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 <a href="/fr/docs/Tools/Debugger/How_to/Disable_breakpoints">d'activer/désactiver le point d'arrêt</a> :</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/16845/debugger_uiTour_breakpoints.png" style="border: 1px solid black; display: block; height: 445px; margin-left: auto; margin-right: auto; width: 922px;"></p>

<h2 id="Expressions_espionnes">Expressions espionnes</h2>

<p>Il est possible d'ajouter des expressions espionnes dans la barre de droite. Celles-ci seront évaluées lorsque le code est en pause :</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/14845/watch-expressions.png" style="display: block; height: 769px; margin-left: auto; margin-right: auto; width: 504px;"></p>

<h2 id="Infobulle_de_variable">Infobulle de variable</h2>

<p>Survoler une variable dans le code source affichera une infobulle contentant sa valeur :</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/14851/tooltip-1.gif" style="display: block; height: 522px; margin-left: auto; margin-right: auto; width: 988px;"></p>

<h2 id="Pile_dexécution_call_stack">Pile d'exécution (call stack)</h2>

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

<p><img alt="" src="https://mdn.mozillademos.org/files/16846/debugger_uiTour_call_stack.png" style="border: 1px solid black; display: block; height: 445px; margin-left: auto; margin-right: auto; width: 922px;"></p>

<p>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.</p>

<h2 id="Portées">Portées</h2>

<p>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 :</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/16847/debugger_uiTour_scopes.png" style="border: 1px solid black; display: block; height: 445px; margin-left: auto; margin-right: auto; width: 922px;"></p>

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