1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
|
---
title: Ajouter un point d'arrêt
slug: Outils/Débogueur/Comment/Ajouter_un_point_d_arrêt
tags:
- JavaScript
- Tools
translation_of: Tools/Debugger/How_to/Set_a_breakpoint
---
<div>{{ToolsSidebar}}</div>
<p>Il est possible de placer un point d'arrêt de trois façons différentes :</p>
<ul>
<li>Dans le <a href="/fr/docs/Tools/Debugger/UI_Tour#Source_pane">panneau des sources</a>, cliquer sur le numéro de la ligne où l'arrêt est désiré.</li>
<li>Dans <a href="/fr/docs/Tools/Debugger/UI_Tour#Source_pane">le panneau des sources</a>, faire un clic droit sur la ligne où l'arrêt est désiré pour ouvrir le menu contextuel puis cliquer sur "Ajouter un point d'arrêt"</li>
<li>Dans <a href="/fr/docs/Tools/Debugger/UI_Tour#Source_pane">le panneau des sources</a>, mettre la ligne ciblée en surbrillance et appuyer sur Ctrl+B (Windows/Linux) ou Command+B (Mac OS X)</li>
</ul>
<p>Lors de l'ouverture du menu contextuel, il est possible de placer soit un point d'arrêt normal qui arrêtera l’exécution, ou bien un point d'arrêt conditionnel qui lui n’arrêtera le code que si les conditions définies sont satisfaites.</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/16433/set_breakpoint.png" style="border: 1px solid black; display: block; height: 353px; margin: 0 auto; width: 593px;"></p>
<p>Si le point d'arrêt choisi est conditionnel, il sera possible de spécifier sa condition :</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/16436/edit_conditional_breakpoint.png" style="border: 1px solid black; display: block; height: 324px; margin: 0px auto; width: 525px;"></p>
<p>Chaque point d'arrêt est affiché à deux endroits dans le débogueur :</p>
<ul>
<li>Dans la <a href="/fr/docs/Tools/Debugger/UI_Tour#Breakpoints_list">liste des points d'arrêts</a>, qui indique également le nom de fichier et le numéro de ligne du point d'arrêt.
<p><img alt="" src="https://mdn.mozillademos.org/files/16434/list_breakpoints.png" style="border: 1px solid black; display: block; height: 325px; margin: 0px auto; width: 313px;"></p>
</li>
<li>Sous forme de flèche bleue (ou orange si <a href="/fr/docs/Tools/Debugger/How_to/Set_a_conditional_breakpoint">conditionnel</a>) sur la ligne affectée dans le <a href="#source-list-pane">panneau des sources</a>.<img alt="" src="https://mdn.mozillademos.org/files/16435/breakpoints_in_code.png" style="border: 1px solid black; display: block; height: 324px; margin: 0px auto; width: 525px;"></li>
</ul>
<p>À partir de Firefox 67, il est possible d'ajouter un point d'arrêt à plusieurs endroits d'une ligne complexe (ex: une ligne avec plusieurs appels de fonction). Par exemple, dans la ligne ci-dessous, il y aura trois endroits possibles pour le point d'arrêt: au point ou la variable est assignée, au point our l'appel à <code>parse</code> est fait, ou à l'appel de <code>getItem</code>.</p>
<pre class="brush: js">tasks = JSON.parse(localStorage.getItem('todoList'));</pre>
<p>Les points d'arrêt possible sont affichés par des indicateurs. L'image suivante montre une l'image suivante affiche la ligne précédente dans le Débogueur. Lors d'un clic sur la ligne, trois indicateurs apparaissent. Par défaut le point d'arrêt est mis sur la première colonne, dans l'image, la seconde colonne à été choisie, ce qui est confirmé par le panneau de droite, la section "Breakpoints" affichant que le point est sur <code>parse</code>.</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/16576/column_breakpoint.png" style="border: 1px solid black; display: block; margin: 0px auto;"></p>
<p>Ces points d'arrêt permettent de s’arrêter à plusieurs endroits sur la même ligne, dans l'exemple précédent, il aurait été possible de s’arrêter sur un, deux, ou même chaque point.</p>
|
