You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: 1-js/03-code-quality/01-debugging-chrome/article.md
+8-47Lines changed: 8 additions & 47 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -38,11 +38,7 @@ Si nous appuyons sur `key:Esc`, une console s'ouvre ci-dessous. Nous pouvons tap
38
38
39
39
Une fois une instruction exécutée, son résultat est présenté ci-dessous.
40
40
41
-
<<<<<<< HEAD
42
-
Par exemple, ici `1+2` donne `3`, et `hello("débogueur")` ne renvoie rien, le résultat est donc `undefined` :
43
-
=======
44
-
For example, here `1+2` results in `3`, while the function call `hello("debugger")` returns nothing, so the result is `undefined`:
45
-
>>>>>>> 45934debd9bb31376ea5da129e266df5b43e545f
41
+
Par exemple, ici `1+2` donne `3`, tandis que l'appel de fonction `hello("debugger")` ne renvoie rien, donc le résultat est `undefined` :
46
42
47
43

48
44
@@ -66,22 +62,13 @@ Nous pouvons toujours trouver une liste de points d'arrêt dans le volet de droi
66
62
- Supprimer le point d'arrêt en cliquant avec le bouton droit de la souris et en sélectionnant Supprimer.
67
63
- … Et ainsi de suite
68
64
69
-
<<<<<<< HEAD
70
65
```smart header="Points d'arrêt conditionnels"
71
-
Un *clic droit* sur le numéro de ligne permet de créer un point d'arrêt conditionnel. Cela ne se déclenche que lorsque l'expression donnée est vraie.
72
-
=======
73
-
```smart header="Conditional breakpoints"
74
-
*Right click* on the line number allows to create a *conditional* breakpoint. It only triggers when the given expression, that you should provide when you create it, is truthy.
75
-
>>>>>>> 45934debd9bb31376ea5da129e266df5b43e545f
66
+
*Clic droit* sur le numéro de ligne permet de créer un point d'arrêt *conditionnel*. Il ne se déclenche que lorsque l'expression donnée, que vous devez fournir lors de sa création, est vraie.
76
67
77
68
C’est pratique lorsque nous devons nous arrêter uniquement pour une certaine valeur de variable ou pour certains paramètres de fonction.
78
69
```
79
70
80
-
<<<<<<< HEAD
81
-
## Commande du débogueur
82
-
=======
83
-
## The command "debugger"
84
-
>>>>>>> 45934debd9bb31376ea5da129e266df5b43e545f
71
+
## La commande "debugger"
85
72
86
73
Nous pouvons également suspendre le code en utilisant la commande `debugger`, comme ceci :
87
74
@@ -97,12 +84,8 @@ function hello(name) {
97
84
}
98
85
```
99
86
100
-
<<<<<<< HEAD
101
-
C’est très pratique lorsque vous utilisez un éditeur de code et que vous ne souhaitez pas passer au navigateur et rechercher le script dans les outils de développement pour définir le point d’arrêt.
87
+
Une telle commande ne fonctionne que lorsque les outils de développement sont ouverts, sinon le navigateur l'ignore.
102
88
103
-
=======
104
-
Such command works only when the development tools are open, otherwise the browser ignores it.
105
-
>>>>>>> 45934debd9bb31376ea5da129e266df5b43e545f
106
89
107
90
## Pause et regarder autour
108
91
@@ -116,11 +99,7 @@ Veuillez ouvrir les menus déroulants d’information à droite (indiqués par d
116
99
117
100
1.**`Watch` -- affiche les valeurs actuelles pour toutes les expressions.**
118
101
119
-
<<<<<<< HEAD
120
-
Vous pouvez cliquer sur le plus `+` et entrer une expression. Le débogueur affichera sa valeur à tout moment, en la recalculant automatiquement au cours de l'exécution.
121
-
=======
122
-
You can click the plus `+` and input an expression. The debugger will show its value, automatically recalculating it in the process of execution.
123
-
>>>>>>> 45934debd9bb31376ea5da129e266df5b43e545f
102
+
Vous pouvez cliquer sur le plus `+` et saisir une expression. Le débogueur affichera sa valeur, la recalculant automatiquement dans le processus d'exécution.
124
103
125
104
2.**`Call Stack` -- affiche la chaîne des appels imbriqués.**
126
105
@@ -155,21 +134,12 @@ Il y a des boutons pour cela en haut du volet de droite. Actionnons-les.
155
134
156
135
En cliquant dessus encore et encore, vous parcourrez toutes les instructions de script une par une.
157
136
158
-
<<<<<<< HEAD
159
137
<spanclass="devtools"style="background-position:-62px-192px"></span> -- "Step over": lance la commande suivante, mais *n'entre pas dans une fonction*, raccourci clavier `key:F10`.
160
-
: Semblable à la précédente commande "Step", mais se comporte différemment si l'instruction suivante est un appel de fonction. C’est-à-dire qu’il ne s’agit pas d’une fonction intégrée, comme `alert`, mais d’une fonction propre.
138
+
: Similaire à la commande "Step" précédente, mais se comporte différemment si l'instruction suivante est un appel de fonction (pas une fonction intégrée, comme `alert`, mais une fonction qui nous est propre).
161
139
162
-
La commande "Step" y pénètre et met en pause l'exécution à la première ligne, tandis que "Step over" exécute l'appel de fonction imbriqué de manière invisible, en ignorant les éléments internes de la fonction.
140
+
Si nous les comparons, la commande "Step" entre dans un appel de fonction imbriqué et interrompt l'exécution à sa première ligne, tandis que "Step over" exécute l'appel de fonction imbriqué de manière invisible pour nous, en sautant les fonctions internes.
163
141
164
142
L'exécution est alors suspendue immédiatement après cette fonction.
165
-
=======
166
-
<spanclass="devtools"style="background-position:-62px-192px"></span> -- "Step over": run the next command, but *don't go into a function*, hotkey `key:F10`.
167
-
: Similar to the previous "Step" command, but behaves differently if the next statement is a function call (not a built-in, like `alert`, but a function of our own).
168
-
169
-
If we compare them, the "Step" command goes into a nested function call and pauses the execution at its first line, while "Step over" executes the nested function call invisibly to us, skipping the function internals.
170
-
171
-
The execution is then paused immediately after that function call.
172
-
>>>>>>> 45934debd9bb31376ea5da129e266df5b43e545f
173
143
174
144
C'est bien si nous ne sommes pas intéressés à voir ce qui se passe dans l'appel de fonction.
175
145
@@ -184,13 +154,8 @@ Il y a des boutons pour cela en haut du volet de droite. Actionnons-les.
184
154
<spanclass="devtools"style="background-position:-61px-74px"></span> -- active / désactive tous les points d'arrêt.
185
155
: Ce bouton ne déplace pas l'exécution. Juste un ensemble de on/off pour les points d'arrêt.
186
156
187
-
<<<<<<< HEAD
188
157
<spanclass="devtools"style="background-position:-90px-146px"></span> -- active/désactive la pause automatique en cas d'erreur.
189
-
: Lorsque cette option est activée et que les outils de développement sont ouverts, une erreur de script interrompt automatiquement l'exécution. Ensuite, nous pouvons analyser les variables pour voir ce qui ne va pas. Donc, si notre script meurt avec une erreur, nous pouvons ouvrir le débogueur, activer cette option et recharger la page pour voir où il meurt et quel est le contexte à ce moment.
190
-
=======
191
-
<spanclass="devtools"style="background-position:-90px-146px"></span> -- enable/disable automatic pause in case of an error.
192
-
: When enabled, if the developer tools is open, an error during the script execution automatically pauses it. Then we can analyze variables in the debugger to see what went wrong. So if our script dies with an error, we can open debugger, enable this option and reload the page to see where it dies and what's the context at that moment.
193
-
>>>>>>> 45934debd9bb31376ea5da129e266df5b43e545f
158
+
: Lorsqu'il est activé, si les outils de développement sont ouverts, une erreur lors de l'exécution du script le met automatiquement en pause. Ensuite, nous pouvons analyser les variables dans le débogueur pour voir ce qui n'a pas fonctionné. Donc, si notre script s’arrête avec une erreur, nous pouvons ouvrir le débogueur, activer cette option et recharger la page pour voir où il s’arrête et quel est le contexte à ce moment-là.
194
159
195
160
```smart header="Continue to here"
196
161
Un clic droit sur une ligne de code ouvre le menu contextuel avec une excellente option appelée "Continue to here".
@@ -222,11 +187,7 @@ Comme nous pouvons le constater, il existe trois méthodes principales pour susp
222
187
2. Les instructions du `debugger`.
223
188
3. Une erreur (si les outils de développement sont ouverts et le bouton <spanclass="devtools"style="background-position:-90px-146px"></span> est "on")
224
189
225
-
<<<<<<< HEAD
226
190
En pause, nous pouvons déboguer -- examiner les variables et suivre le code pour voir où l’exécution s’est mal passée.
227
-
=======
228
-
When paused, we can debug: examine variables and trace the code to see where the execution goes wrong.
229
-
>>>>>>> 45934debd9bb31376ea5da129e266df5b43e545f
230
191
231
192
Il y a beaucoup plus d'options dans les outils de développement que celles couvertes ici. Le manuel complet est ici <https://developers.google.com/web/tools/chrome-devtools>.
0 commit comments