1
00:00:01,120 --> 00:00:02,420
‫Instructeur : Dans cette

2
00:00:02,420 --> 00:00:06,120
‫vidéo, nous allons apprendre à déboguer Node. JS car, avouons-le, il y aura

3
00:00:06,120 --> 00:00:09,240
‫toujours des bugs dans notre code, peu importe à quel

4
00:00:09,240 --> 00:00:11,040
‫point nous sommes prudents.

5
00:00:11,040 --> 00:00:13,910
‫Et c'est donc bien d'avoir un outil pour nous

6
00:00:13,910 --> 00:00:15,740
‫aider à déboguer notre code.

7
00:00:15,740 --> 00:00:18,870
‫Maintenant, il ne s'agit pas vraiment de gérer les erreurs avec Express,

8
00:00:18,870 --> 00:00:21,200
‫mais j'ai pensé que c'était un bon point dans

9
00:00:21,200 --> 00:00:23,510
‫le cours pour vous présenter un outil de

10
00:00:23,510 --> 00:00:26,423
‫débogage que nous pourrions ensuite utiliser tout au long du cours.

11
00:00:27,920 --> 00:00:31,270
‫Et il existe différentes manières de déboguer Node. code JS.

12
00:00:31,270 --> 00:00:33,740
‫Par exemple, nous pourrions utiliser le code VS pour cela.

13
00:00:33,740 --> 00:00:38,190
‫Mais, en fait, Google a récemment publié un outil incroyable

14
00:00:38,190 --> 00:00:42,840
‫que nous pouvons utiliser pour déboguer et qui s'appelle NDB, d'accord ?

15
00:00:42,840 --> 00:00:46,610
‫Passons donc à notre autre terminal ici,

16
00:00:46,610 --> 00:00:48,850
‫puis installons NDB.

17
00:00:48,850 --> 00:00:51,720
‫Et NDB, qui signifie débogueur de nœud, n'est

18
00:00:51,720 --> 00:00:53,823
‫en fait qu'un package NPM.

19
00:00:54,780 --> 00:00:56,927
‫Donc, NPM installe NDB.

20
00:00:58,440 --> 00:01:00,250
‫D'accord, et vous devriez

21
00:01:00,250 --> 00:01:04,120
‫ensuite l'installer en tant que package global, d'accord ?

22
00:01:04,120 --> 00:01:07,563
‫Et si vous utilisez un Mac, vous aurez peut-être besoin d'autorisations globales.

23
00:01:08,440 --> 00:01:10,890
‫Alors écrivez simplement sudo ici devant.

24
00:01:10,890 --> 00:01:14,720
‫Ou si vous n'êtes pas du tout capable de l'installer

25
00:01:14,720 --> 00:01:17,610
‫globalement, vous pouvez toujours l'installer localement en tant

26
00:01:17,610 --> 00:01:19,003
‫que dépendance mortelle.

27
00:01:20,040 --> 00:01:22,420
‫Alors juste comme ça, d'accord ?

28
00:01:22,420 --> 00:01:25,000
‫Quoi qu'il en soit, s'il vous plaît allez-y et installez cet outil maintenant.

29
00:01:25,000 --> 00:01:25,870
‫Je ne vais

30
00:01:25,870 --> 00:01:28,590
‫pas le faire car cela peut être un téléchargement assez lourd, et

31
00:01:28,590 --> 00:01:30,630
‫cela prend un peu trop de temps maintenant.

32
00:01:30,630 --> 00:01:33,720
‫Quoi qu'il en soit, dès que l'outil est installé,

33
00:01:33,720 --> 00:01:36,130
‫passons au package. jason et

34
00:01:36,130 --> 00:01:39,710
‫ajoutez un nouveau script ici, d'accord ?

35
00:01:39,710 --> 00:01:42,173
‫Et je vais appeler ça un débogage.

36
00:01:43,770 --> 00:01:44,900
‫D'accord?

37
00:01:44,900 --> 00:01:47,270
‫Et donc la commande que nous

38
00:01:47,270 --> 00:01:50,890
‫voulons exécuter ici est simplement NDB, donc le débogueur de

39
00:01:50,890 --> 00:01:53,250
‫notes, puis à nouveau notre point

40
00:01:53,250 --> 00:01:57,103
‫d'entrée, So, server. js d'accord?

41
00:01:57,103 --> 00:01:59,200
‫Et maintenant, cela fonctionnera, que

42
00:01:59,200 --> 00:02:01,320
‫vous ayez installé NDB localement ou globalement.

43
00:02:01,320 --> 00:02:03,537
‫Très bien, alors exécutons maintenant le script.

44
00:02:03,537 --> 00:02:05,260
‫Et pour que cela

45
00:02:05,260 --> 00:02:07,690
‫fonctionne, nous devons en fait terminer ce processus

46
00:02:07,690 --> 00:02:09,460
‫car il va également démarrer

47
00:02:09,460 --> 00:02:12,210
‫le serveur et il essaiera donc de le faire

48
00:02:12,210 --> 00:02:14,120
‫sur le même port et cela

49
00:02:14,120 --> 00:02:15,980
‫ne fonctionnera bien sûr pas.

50
00:02:15,980 --> 00:02:18,450
‫Nous devons donc terminer

51
00:02:18,450 --> 00:02:22,503
‫celui qui est actuellement en cours d'exécution,

52
00:02:23,690 --> 00:02:26,370
‫puis à partir de là,

53
00:02:26,370 --> 00:02:28,230
‫nous pouvons exécuter

54
00:02:29,070 --> 00:02:31,220
‫le débogage de

55
00:02:31,220 --> 00:02:32,690
‫NPM.

56
00:02:32,690 --> 00:02:34,890
‫Vous verrez donc l'icône Chrome ici et aussi

57
00:02:34,890 --> 00:02:36,550
‫ici dans la barre de menu,

58
00:02:36,550 --> 00:02:39,410
‫mais en réalité, il ne s'agit que du débogueur de notes.

59
00:02:39,410 --> 00:02:41,260
‫Alors qu'avons-nous ici?

60
00:02:41,260 --> 00:02:45,030
‫Eh bien sur le côté gauche, nous avons notre système de fichiers complet.

61
00:02:45,030 --> 00:02:48,010
‫Nous avons également accès à nos scripts NPM ici

62
00:02:48,010 --> 00:02:50,810
‫que nous pouvons réellement exécuter à partir d'ici.

63
00:02:50,810 --> 00:02:52,910
‫Nous avons également une console et nous avons

64
00:02:52,910 --> 00:02:55,610
‫donc ici nos sorties habituelles avec l'application en cours d'exécution

65
00:02:55,610 --> 00:02:57,310
‫et la connexion à la

66
00:02:58,570 --> 00:03:01,330
‫base de données et nous avons également les onglets performances

67
00:03:01,330 --> 00:03:03,090
‫et mémoire, que nous n'utiliserons pas.

68
00:03:03,090 --> 00:03:05,170
‫Très bien, maintenant, si vous êtes

69
00:03:05,170 --> 00:03:07,130
‫familier avec le processus de

70
00:03:07,130 --> 00:03:10,100
‫débogage général, tout cela vous sera un peu familier.

71
00:03:10,100 --> 00:03:12,260
‫D'accord, mais si ce n'est pas le cas, ne vous inquiétez

72
00:03:12,260 --> 00:03:13,810
‫pas, je vais vous montrer quelques techniques

73
00:03:13,810 --> 00:03:15,240
‫tout au long de cette vidéo.

74
00:03:15,240 --> 00:03:19,560
‫Très bien, de toute façon, ouvrons maintenant notre serveur. js.

75
00:03:19,560 --> 00:03:21,460
‫Et une chose qui est vraiment incroyable,

76
00:03:21,460 --> 00:03:24,500
‫c'est que nous pouvons réellement éditer nos fichiers ici, donc

77
00:03:24,500 --> 00:03:26,040
‫directement dans ce débogueur.

78
00:03:26,040 --> 00:03:28,530
‫Ainsi, par exemple, disons que nous trouvons un bogue

79
00:03:28,530 --> 00:03:30,820
‫et que nous voulons le corriger immédiatement.

80
00:03:30,820 --> 00:03:33,340
‫Nous pouvons le faire ici dans le débogueur et

81
00:03:33,340 --> 00:03:35,790
‫il mettra ensuite à jour le code d'origine.

82
00:03:35,790 --> 00:03:37,020
‫Alors juste pour

83
00:03:37,020 --> 00:03:38,943
‫le tester, ajoutons juste un commentaire ici.

84
00:03:40,050 --> 00:03:44,460
‫Alors, testez puis appuyez sur la commande ou le contrôle s pour enregistrer, puis lorsque

85
00:03:44,460 --> 00:03:46,570
‫nous revenons à notre code et ouvrons

86
00:03:47,830 --> 00:03:49,800
‫le serveur. js là,

87
00:03:49,800 --> 00:03:53,060
‫vous verrez que le commentaire est en fait ici.

88
00:03:53,060 --> 00:03:53,950
‫D'accord?

89
00:03:53,950 --> 00:03:55,810
‫Et si nous le

90
00:03:55,810 --> 00:03:57,370
‫supprimons maintenant d'ici,

91
00:03:57,370 --> 00:03:59,220
‫le sauvegardons et revenons

92
00:03:59,220 --> 00:04:02,300
‫au débogueur, alors il disparaîtra également d'ici.

93
00:04:02,300 --> 00:04:04,810
‫D'accord, mais maintenant à propos du débogage lui-même.

94
00:04:04,810 --> 00:04:06,860
‫Je dirais que l'aspect fondamental

95
00:04:06,860 --> 00:04:09,740
‫du débogage est de définir des points d'arrêt.

96
00:04:09,740 --> 00:04:12,420
‫Les points d'arrêt sont donc essentiellement des points dans notre

97
00:04:12,420 --> 00:04:14,540
‫code que nous pouvons définir ici dans

98
00:04:14,540 --> 00:04:16,810
‫le débogueur, où notre code s'arrêtera alors de s'exécuter.

99
00:04:16,810 --> 00:04:18,810
‫Il se figera essentiellement dans le temps

100
00:04:18,810 --> 00:04:21,900
‫et nous pourrons alors jeter un œil à toutes nos variables.

101
00:04:21,900 --> 00:04:24,530
‫D'accord, ce sera donc extrêmement utile pour

102
00:04:24,530 --> 00:04:26,270
‫trouver des bugs.

103
00:04:26,270 --> 00:04:28,340
‫Maintenant, pour le moment, il n'y a pas

104
00:04:28,340 --> 00:04:30,860
‫de bogue ici, mais ajoutons quand même un point d'arrêt.

105
00:04:30,860 --> 00:04:34,850
‫Et je vais ajouter ce point d'arrêt ici dans cette ligne 21.

106
00:04:34,850 --> 00:04:36,610
‫Alors je clique ici sur cette

107
00:04:36,610 --> 00:04:38,920
‫ligne et puis vous voyez ce marqueur vert, d'accord ?

108
00:04:38,920 --> 00:04:41,600
‫Et cela signifie que le code s'arrêtera à

109
00:04:41,600 --> 00:04:43,950
‫ce stade lorsque nous l'exécuterons, d'accord ?

110
00:04:43,950 --> 00:04:45,750
‫Et vous pouvez le voir ici

111
00:04:45,750 --> 00:04:48,850
‫sur le côté droit de l'onglet des points d'arrêt ici aussi.

112
00:04:48,850 --> 00:04:50,680
‫Maintenant, notre application est déjà

113
00:04:50,680 --> 00:04:52,360
‫en cours d'exécution à

114
00:04:52,360 --> 00:04:55,350
‫ce stade et attend essentiellement que les demandes arrivent.

115
00:04:55,350 --> 00:04:56,830
‫Et donc ce que nous

116
00:04:56,830 --> 00:05:00,810
‫devons faire ici est de faire un clic droit puis de cliquer sur exécuter ce script.

117
00:05:00,810 --> 00:05:02,670
‫D'accord, et donc cela exécutera à

118
00:05:02,670 --> 00:05:04,153
‫nouveau le script ici.

119
00:05:05,638 --> 00:05:06,720
‫D'accord?

120
00:05:06,720 --> 00:05:08,390
‫Et donc on y va.

121
00:05:08,390 --> 00:05:10,380
‫Donc, vous voyez ici sur le

122
00:05:10,380 --> 00:05:12,940
‫côté droit, qu'il est dit en pause sur le point

123
00:05:12,940 --> 00:05:16,040
‫d'arrêt et donc tout le code qui est au-dessus de ce point

124
00:05:16,040 --> 00:05:18,330
‫d'arrêt ici a déjà été exécuté à ce stade.

125
00:05:18,330 --> 00:05:21,390
‫Et donc nous pouvons maintenant jeter un œil aux variables.

126
00:05:21,390 --> 00:05:24,230
‫Par exemple, nous pouvons survoler cette variable de

127
00:05:24,230 --> 00:05:27,220
‫port et nous voyons qu'elle est définie sur 3 000.

128
00:05:27,220 --> 00:05:29,670
‫Et aussi en fait, touchez cet endroit ici

129
00:05:29,670 --> 00:05:31,560
‫dans le code ici, d'accord.

130
00:05:31,560 --> 00:05:33,830
‫Et puis la troisième façon de le voir est

131
00:05:33,830 --> 00:05:35,380
‫ici sur le côté droit.

132
00:05:35,380 --> 00:05:38,280
‫Nous avons donc essentiellement quelques onglets ici pour les processus

133
00:05:38,280 --> 00:05:40,940
‫de nœud, la surveillance, la pile d'appels, ce qui

134
00:05:40,940 --> 00:05:43,240
‫n'est pas vraiment important pour le moment.

135
00:05:43,240 --> 00:05:46,940
‫La portée, et donc la portée, c'est là où se trouvent

136
00:05:46,940 --> 00:05:49,050
‫toutes nos variables, d'accord ?

137
00:05:49,050 --> 00:05:52,530
‫Et donc ici encore, vous avez le port défini sur 3 000.

138
00:05:52,530 --> 00:05:54,620
‫D'accord, et ici vous pouvez également

139
00:05:54,620 --> 00:05:57,010
‫voir les cinq variables auxquelles nous avons accès

140
00:05:57,010 --> 00:05:58,490
‫dans tous les modules.

141
00:05:58,490 --> 00:06:01,290
‫Vous vous souvenez de la conférence sur les modèles ?

142
00:06:01,290 --> 00:06:03,590
‫Nous avons donc le nom du

143
00:06:03,590 --> 00:06:07,250
‫répertoire, nous avons le nom du fichier, nous avons la fonction

144
00:06:07,250 --> 00:06:10,150
‫require, nous avons le module et nous avons l'exportation.

145
00:06:10,150 --> 00:06:12,690
‫N'oubliez donc pas que ce sont

146
00:06:12,690 --> 00:06:15,400
‫les cinq variables disponibles dans chaque module.

147
00:06:15,400 --> 00:06:17,960
‫Et en fait, lorsque nous exécutons un

148
00:06:17,960 --> 00:06:21,730
‫code comme celui-ci dans le débogueur, nous pouvons voir que tout notre

149
00:06:21,730 --> 00:06:24,383
‫code est en fait enveloppé dans cette fonction.

150
00:06:25,390 --> 00:06:26,560
‫Droit?

151
00:06:26,560 --> 00:06:28,810
‫C'est donc cette fonction wrapper qui

152
00:06:28,810 --> 00:06:31,230
‫nous donne accès à ces cinq variables.

153
00:06:31,230 --> 00:06:34,710
‫Très bien, ensuite, je veux aussi jeter un œil à

154
00:06:34,710 --> 00:06:38,013
‫notre variable d'application, donc essentiellement l'application Express que nous

155
00:06:38,013 --> 00:06:42,330
‫exportons à partir de l'application. js, souviens-toi de ça.

156
00:06:42,330 --> 00:06:44,870
‫Et voici vraiment une tonne de trucs

157
00:06:44,870 --> 00:06:47,330
‫mais ce que je trouve intéressant,

158
00:06:47,330 --> 00:06:50,393
‫c'est de jeter un œil à ce routeur ici.

159
00:06:51,660 --> 00:06:54,763
‫D'accord, et donc dans le routeur, nous avons alors une pile.

160
00:06:56,680 --> 00:06:59,100
‫D'accord, et alors ouvrons cela un peu et

161
00:07:00,240 --> 00:07:02,070
‫donc cette pile ici est

162
00:07:02,070 --> 00:07:05,420
‫essentiellement la pile de middleware que nous avons dans notre application.

163
00:07:05,420 --> 00:07:09,010
‫D'accord, par exemple, nous avons notre jsonParser ici,

164
00:07:09,010 --> 00:07:13,030
‫nous avons le code qui sert les fichiers statiques.

165
00:07:13,030 --> 00:07:16,760
‫Jetez un œil à cela ici dans l'application. js donc cet

166
00:07:16,760 --> 00:07:19,170
‫express. statique.

167
00:07:19,170 --> 00:07:21,380
‫Nous avons également l'enregistreur ici

168
00:07:21,380 --> 00:07:23,910
‫qui provient de l'utilisation de Morgan.

169
00:07:23,910 --> 00:07:26,310
‫Ensuite, vous avez ces deux fonctions middleware

170
00:07:26,310 --> 00:07:27,480
‫suivantes, donc

171
00:07:27,480 --> 00:07:31,590
‫ces deux ici, qui sont anonymes, donc celle-ci et celle-ci et

172
00:07:31,590 --> 00:07:33,740
‫peut-être que nous pouvons les examiner.

173
00:07:33,740 --> 00:07:35,803
‫Mais pas vraiment.

174
00:07:36,640 --> 00:07:38,390
‫D'accord, ce n'est pas grave.

175
00:07:38,390 --> 00:07:40,740
‫Donc, c'est vraiment juste pour la curiosité et pour

176
00:07:40,740 --> 00:07:42,170
‫vous montrer que nous

177
00:07:42,170 --> 00:07:45,520
‫pouvons réellement jeter un œil à notre pile de middleware, d'accord ?

178
00:07:45,520 --> 00:07:47,603
‫Ensuite, nous avons enfin nos deux routeurs.

179
00:07:48,795 --> 00:07:49,970
‫D'accord?

180
00:07:49,970 --> 00:07:53,080
‫Donc, nous avons le routeur, et vous voyez ici en fait

181
00:07:53,080 --> 00:07:55,160
‫la route pour laquelle il s'applique.

182
00:07:55,160 --> 00:08:00,160
‫Donc api/v1/tours c'est bien et je trouve ça vraiment intéressant.

183
00:08:00,980 --> 00:08:03,710
‫Bien sûr, nous avons toujours les utilisateurs ici aussi.

184
00:08:03,710 --> 00:08:07,250
‫Et ainsi, avec cela, vous pouvez vraiment voir comment

185
00:08:07,250 --> 00:08:09,823
‫l'application Express fonctionne dans les coulisses.

186
00:08:10,710 --> 00:08:11,543
‫D'accord?

187
00:08:12,380 --> 00:08:14,623
‫Alors fermons tout ça.

188
00:08:16,140 --> 00:08:18,440
‫Et l'autre chose que je voulais vous

189
00:08:18,440 --> 00:08:20,210
‫montrer est ici dans les

190
00:08:21,120 --> 00:08:24,300
‫variables globales car ici nous avons la variable de processus ou

191
00:08:25,850 --> 00:08:28,453
‫au moins nous devrions l'avoir quelque part ici.

192
00:08:30,700 --> 00:08:32,910
‫Ouais, donc en effet le voici.

193
00:08:32,910 --> 00:08:35,140
‫Nous avons donc ici la variable

194
00:08:35,140 --> 00:08:37,400
‫de processus qui est mémorisable, disponible partout.

195
00:08:37,400 --> 00:08:41,070
‫Et c'est pourquoi on l'appelle ici une variable globale.

196
00:08:41,070 --> 00:08:43,310
‫Ensuite, nous avons un processus. env et

197
00:08:44,300 --> 00:08:46,030
‫de se rappeler que c'est

198
00:08:46,030 --> 00:08:49,250
‫là que toutes nos variables d'environnement sont stockées.

199
00:08:49,250 --> 00:08:52,180
‫Et donc en effet ici, nous avons notre chaîne de base

200
00:08:52,180 --> 00:08:55,340
‫de données, nous avons la base de données locale, le mot de

201
00:08:55,340 --> 00:08:57,910
‫passe et vraiment toutes les autres variables d'environnement que nous

202
00:08:57,910 --> 00:09:01,333
‫avons définies dans notre configuration. n fichier.

203
00:09:02,630 --> 00:09:03,740
‫D'accord?

204
00:09:03,740 --> 00:09:07,070
‫Donc des choses vraiment intéressantes que nous pouvons jeter un œil ici.

205
00:09:07,070 --> 00:09:10,260
‫Mais maintenant, continuons notre débogage.

206
00:09:10,260 --> 00:09:11,093
‫D'accord?

207
00:09:11,093 --> 00:09:13,540
‫Nous avons donc arrêté le code, nous l'avons gelé

208
00:09:13,540 --> 00:09:16,630
‫dans le temps ici à ce stade, donc à la ligne 21.

209
00:09:16,630 --> 00:09:19,720
‫D'accord, et maintenant nous pouvons cliquer ici sur ce bouton,

210
00:09:19,720 --> 00:09:22,400
‫afin de continuer à exécuter le code.

211
00:09:22,400 --> 00:09:24,210
‫Et puisque nous n'avons plus

212
00:09:24,210 --> 00:09:26,070
‫de points d'arrêt, le code ne s'arrêtera

213
00:09:26,070 --> 00:09:28,500
‫alors plus et finira en gros de s'exécuter.

214
00:09:28,500 --> 00:09:29,980
‫Alors faisons-le.

215
00:09:29,980 --> 00:09:32,910
‫Et maintenant, notre application est vraiment en cours d'exécution.

216
00:09:32,910 --> 00:09:33,830
‫Jetons un coup d'oeil à cela.

217
00:09:33,830 --> 00:09:36,600
‫Dans la console, d'accord ?

218
00:09:36,600 --> 00:09:38,720
‫Donc, l'application s'exécute sur le port 3 000 et

219
00:09:38,720 --> 00:09:40,793
‫la connexion DB est réussie, bien sûr.

220
00:09:43,550 --> 00:09:44,793
‫Que s'est-il passé ici ?

221
00:09:46,120 --> 00:09:47,350
‫Maintenant, très bien,

222
00:09:47,350 --> 00:09:50,163
‫alors faisons maintenant rapidement une requête ici.

223
00:09:51,580 --> 00:09:53,650
‫Donc simplement un pour /tours et maintenant

224
00:09:55,532 --> 00:09:57,100
‫nous avons tous ces déchets

225
00:09:57,100 --> 00:09:59,683
‫ici et je vais m'en occuper dans une seconde.

226
00:10:01,050 --> 00:10:04,110
‫Très bien, et si vous revenez maintenant à notre console

227
00:10:04,110 --> 00:10:07,670
‫ici, alors bien sûr, nous avons tout le code que nous avions auparavant.

228
00:10:07,670 --> 00:10:09,220
‫Bonjour du middleware et

229
00:10:09,220 --> 00:10:12,120
‫ensuite combien de temps la requête a pris.

230
00:10:12,120 --> 00:10:14,890
‫Très bien, et maintenant avant de faire quoi que

231
00:10:14,890 --> 00:10:17,693
‫ce soit d'autre, débarrassons-nous en fait de ces tournées indésirables.

232
00:10:19,380 --> 00:10:20,893
‫Je vais donc le recharger ici,

233
00:10:22,270 --> 00:10:24,720
‫et je suppose que ce sera quelque part ici à la fin.

234
00:10:26,720 --> 00:10:29,103
‫Alors, testez n'importe quoi ici.

235
00:10:29,980 --> 00:10:31,593
‫Alors débarrassons-nous en.

236
00:10:32,490 --> 00:10:35,573
‫C'est la visite secrète et je veux vraiment la garder ici.

237
00:10:37,480 --> 00:10:40,413
‫Mais tout à partir de maintenant nous ne voulons plus.

238
00:10:44,720 --> 00:10:45,830
‫Et donc

239
00:10:48,150 --> 00:10:51,490
‫oui, alors maintenant nous sommes de retour à n'avoir

240
00:10:51,490 --> 00:10:53,480
‫que 10 tournées, comme avant.

241
00:10:53,480 --> 00:10:55,860
‫Quoi qu'il en soit, définissons maintenant un point d'arrêt

242
00:10:55,860 --> 00:10:58,203
‫dans la fonction qui gère cet itinéraire.

243
00:10:59,060 --> 00:11:02,150
‫D'accord, et donc nous arrivons à notre dossier de contrôleurs et

244
00:11:02,150 --> 00:11:04,540
‫là nous avons le contrôleur de tournée.

245
00:11:04,540 --> 00:11:05,373
‫D'accord?

246
00:11:05,373 --> 00:11:08,200
‫Et puis la fonction de gestionnaire est d'obtenir toutes les visites.

247
00:11:08,200 --> 00:11:09,760
‫Donc, pour l'instant, tout

248
00:11:09,760 --> 00:11:11,960
‫ce que je voulais faire, c'est simplement définir

249
00:11:11,960 --> 00:11:15,010
‫un point d'arrêt ici afin que nous puissions voir à

250
00:11:15,010 --> 00:11:17,710
‫quoi ressemblent ces variables une fois la requête terminée.

251
00:11:17,710 --> 00:11:20,430
‫Donc, ce code ici obtiendra nos visites et

252
00:11:20,430 --> 00:11:21,900
‫nous arrêterons ensuite

253
00:11:21,900 --> 00:11:25,210
‫le code avant de l'envoyer en tant que réponse.

254
00:11:25,210 --> 00:11:29,790
‫D'accord, et donc tout ce que nous avons à faire est de faire

255
00:11:29,790 --> 00:11:32,730
‫la demande car cela déclenchera alors cette fonction.

256
00:11:32,730 --> 00:11:33,600
‫Droit?

257
00:11:33,600 --> 00:11:36,550
‫Et donc puisque nous avons un point d'arrêt, nous

258
00:11:36,550 --> 00:11:39,440
‫revenons automatiquement à cette fenêtre ici, et au point

259
00:11:39,440 --> 00:11:41,270
‫où le code s'est arrêté.

260
00:11:41,270 --> 00:11:43,713
‫Alors, quel genre de variables avons-nous ici ?

261
00:11:44,830 --> 00:11:47,690
‫Vous voyez donc que nous avons la demande et une réponse,

262
00:11:47,690 --> 00:11:49,630
‫et nous avons aussi la variable

263
00:11:49,630 --> 00:11:51,670
‫de fonctionnalités, et les visites, bien sûr.

264
00:11:51,670 --> 00:11:53,770
‫Voyons donc d'abord la requête.

265
00:11:54,740 --> 00:11:57,500
‫Et là encore, vous voyez qu'on a vraiment toutes

266
00:11:57,500 --> 00:11:58,560
‫sortes de trucs.

267
00:11:58,560 --> 00:12:02,470
‫Donc nous avons, baseurl, nous avons la méthode, nous avons

268
00:12:02,470 --> 00:12:05,150
‫par exemple, request. query, qui est vide pour

269
00:12:05,150 --> 00:12:07,280
‫le moment car nous n'avons pas passé

270
00:12:07,280 --> 00:12:08,560
‫de chaîne de

271
00:12:08,560 --> 00:12:11,170
‫requête, mais vous voyez qu'elle est vraiment déjà là.

272
00:12:11,170 --> 00:12:13,730
‫D'accord, et vous commencez donc à voir à

273
00:12:13,730 --> 00:12:16,810
‫quel point cela peut être pratique pour déboguer notre code.

274
00:12:16,810 --> 00:12:20,060
‫Donc en gros pour geler notre code dans le temps au lieu

275
00:12:20,060 --> 00:12:23,620
‫d'avoir à faire toutes ces consoles. journaux que nous avions l'habitude de

276
00:12:23,620 --> 00:12:25,040
‫faire jusqu'à ce point.

277
00:12:25,040 --> 00:12:27,770
‫Donc généralement, lorsque nous voulions jeter un œil à la requête par

278
00:12:27,770 --> 00:12:31,010
‫exemple, nous faisions un tas de console. logs et utilisez-le pour

279
00:12:31,010 --> 00:12:34,590
‫découvrir un bogue au cas où quelque chose ne

280
00:12:34,590 --> 00:12:35,950
‫fonctionnait pas.

281
00:12:35,950 --> 00:12:38,150
‫D'accord, mais maintenant nous avons cet outil incroyable qui peut nous

282
00:12:38,150 --> 00:12:41,130
‫aider à éviter toutes ces consoles. journaux par

283
00:12:41,130 --> 00:12:42,460
‫exemple.

284
00:12:42,460 --> 00:12:44,530
‫Ensuite, nous avons aussi la réponse bien sûr.

285
00:12:44,530 --> 00:12:48,460
‫Et encore une fois, vous voyez toutes ces propriétés et méthodes qui sont

286
00:12:48,460 --> 00:12:50,890
‫là, et elles ne sont pas vraiment intéressantes

287
00:12:50,890 --> 00:12:51,990
‫pour nous maintenant.

288
00:12:51,990 --> 00:12:54,900
‫Ce que je voulais vous montrer, c'est bien sûr qu'à

289
00:12:54,900 --> 00:12:57,520
‫ce stade, nous avons déjà les tournées, d'accord ?

290
00:12:57,520 --> 00:13:02,450
‫Nous avons donc neuf tournées, alors examinons-les.

291
00:13:02,450 --> 00:13:06,000
‫Et ça a l'air un peu bizarre ici, donc pour

292
00:13:06,000 --> 00:13:10,480
‫avoir accès aux valeurs réelles, nous devons cliquer ici, d'accord, donc c'est

293
00:13:10,480 --> 00:13:11,880
‫un peu bizarre.

294
00:13:11,880 --> 00:13:14,037
‫Mais ça marche bien sur.

295
00:13:14,037 --> 00:13:18,110
‫Et donc vous voyez qu'en fait nos visites sont déjà

296
00:13:18,110 --> 00:13:21,093
‫là et bien sûr les fonctionnalités aussi.

297
00:13:21,930 --> 00:13:24,650
‫Vous voyez donc ici que les fonctionnalités sont une

298
00:13:24,650 --> 00:13:27,670
‫instance de la classe de fonctionnalités API telle que nous l'avons définie.

299
00:13:27,670 --> 00:13:31,130
‫Et là-dedans, nous avons la requête et la chaîne de requête.

300
00:13:31,130 --> 00:13:34,660
‫Génial, c'est ainsi que nous examinons toutes les variables.

301
00:13:34,660 --> 00:13:37,087
‫Et c'est ainsi que fonctionnent les parties les

302
00:13:37,087 --> 00:13:38,680
‫plus importantes du débogueur.

303
00:13:38,680 --> 00:13:41,750
‫Maintenant, afin d'en savoir un peu plus sur

304
00:13:41,750 --> 00:13:45,400
‫le processus de débogage lui-même, introduisons un très petit bogue

305
00:13:45,400 --> 00:13:48,300
‫dans notre code, puis examinons comment nous pouvons

306
00:13:48,300 --> 00:13:51,280
‫utiliser ces outils que nous avons ici pour

307
00:13:51,280 --> 00:13:52,790
‫approfondir notre code.

308
00:13:52,790 --> 00:13:55,410
‫Je ne vais donc pas

309
00:13:55,410 --> 00:13:59,850
‫reprendre l'exécution ignorée afin d'exécuter le reste du code, d'accord ?

310
00:13:59,850 --> 00:14:01,270
‫Cela devrait donc être fait maintenant.

311
00:14:01,270 --> 00:14:03,670
‫Alors maintenant, ici, nous avons toutes les réponses.

312
00:14:03,670 --> 00:14:06,320
‫Donc vous voyez que cela a pris tout ce

313
00:14:06,320 --> 00:14:08,970
‫temps ici, donc trois minutes et 29 secondes, mais

314
00:14:08,970 --> 00:14:11,410
‫c'est juste parce que nous avons suspendu l'exécution pendant

315
00:14:11,410 --> 00:14:12,313
‫si longtemps.

316
00:14:14,130 --> 00:14:15,130
‫D'accord.

317
00:14:15,130 --> 00:14:17,793
‫Venons-en maintenant à notre code ici.

318
00:14:19,160 --> 00:14:21,853
‫Fermons ce dont nous n'avons plus besoin.

319
00:14:23,810 --> 00:14:28,410
‫Donc en fait, dans notre fichier de fonctionnalités API, je veux

320
00:14:28,410 --> 00:14:32,603
‫introduire un petit bug ici dans les champs de limite.

321
00:14:33,570 --> 00:14:36,080
‫Supposons donc que nous essayions d'implémenter cette méthode

322
00:14:36,080 --> 00:14:39,340
‫ici, mais au lieu de nous joindre à un espace ici,

323
00:14:39,340 --> 00:14:41,790
‫nous avons oublié de la mettre ici.

324
00:14:41,790 --> 00:14:45,030
‫Et donc disons simplement que nous nous sommes joints

325
00:14:45,030 --> 00:14:49,010
‫sans aucun espace, et cela nous donnerait alors un résultat bizarre, non?

326
00:14:49,010 --> 00:14:50,633
‫Alors testons-le réellement.

327
00:14:52,650 --> 00:14:54,480
‫Alors disons

328
00:14:56,350 --> 00:14:59,690
‫des champs et qu'on ne voulait

329
00:14:59,690 --> 00:15:04,050
‫que le nom et la durée, non ?

330
00:15:04,050 --> 00:15:07,400
‫Maintenant, avant de pouvoir envoyer cette demande, supprimons le

331
00:15:07,400 --> 00:15:09,050
‫point d'arrêt ici.

332
00:15:10,650 --> 00:15:11,483
‫D'accord?

333
00:15:11,483 --> 00:15:14,410
‫Envoyé la demande, et maintenant nous n'obtenons pas le

334
00:15:14,410 --> 00:15:16,073
‫nom et la durée.

335
00:15:16,920 --> 00:15:19,410
‫Imaginons donc que c'est notre bogue

336
00:15:19,410 --> 00:15:23,510
‫maintenant et nous essayons maintenant de comprendre pourquoi cela ne fonctionne pas.

337
00:15:23,510 --> 00:15:24,520
‫D'accord?

338
00:15:24,520 --> 00:15:26,490
‫Passons donc à notre débogueur.

339
00:15:26,490 --> 00:15:28,470
‫Et nous savons que l'erreur doit probablement

340
00:15:28,470 --> 00:15:31,053
‫se trouver quelque part dans notre méthode de champs limites.

341
00:15:32,090 --> 00:15:35,530
‫Et donc arrêtons l'exécution du code à ce

342
00:15:35,530 --> 00:15:37,320
‫stade, d'accord ?

343
00:15:37,320 --> 00:15:40,880
‫Parce que c'est là que cette méthode sera appelée et donc

344
00:15:40,880 --> 00:15:43,927
‫à partir de là, nous pouvons entrer cette fonction

345
00:15:43,927 --> 00:15:45,130
‫pour cette méthode.

346
00:15:45,130 --> 00:15:46,100
‫D'accord?

347
00:15:46,100 --> 00:15:48,883
‫Alors lançons cette requête maintenant,

348
00:15:50,240 --> 00:15:54,240
‫et maintenant nous retournons automatiquement à notre débogueur.

349
00:15:54,240 --> 00:15:57,250
‫Donc, à ce stade, cette ligne et cette ligne et

350
00:15:57,250 --> 00:16:00,880
‫cette ligne de code ont déjà été exécutées, et utilisons donc maintenant

351
00:16:00,880 --> 00:16:02,980
‫l'outil pas à pas, d'accord ?

352
00:16:02,980 --> 00:16:05,770
‫Quelle étape fera, c'est qu'il exécutera essentiellement la

353
00:16:05,770 --> 00:16:07,430
‫prochaine ligne de code.

354
00:16:07,430 --> 00:16:09,810
‫Et dans ce cas, ce sera à l'intérieur

355
00:16:09,810 --> 00:16:11,790
‫de la méthode des champs limites.

356
00:16:11,790 --> 00:16:16,143
‫Alors faites un pas, et il passera alors directement à cette fonction.

357
00:16:17,000 --> 00:16:20,670
‫Bon alors jetons un coup d'œil à ce que nous avons ici.

358
00:16:20,670 --> 00:16:24,070
‫Par exemple ceci. la chaîne de requête est la durée de

359
00:16:24,070 --> 00:16:26,083
‫la virgule du nom, donc c'est correct, n'est-ce pas ?

360
00:16:26,990 --> 00:16:30,520
‫Bon, passons à la ligne suivante.

361
00:16:30,520 --> 00:16:33,600
‫Très bien et c'est donc là que cette

362
00:16:33,600 --> 00:16:35,263
‫opération se déroule réellement.

363
00:16:36,440 --> 00:16:38,460
‫Ensuite, ensuite.

364
00:16:38,460 --> 00:16:40,823
‫Jetons un coup d'œil à nos variables ici.

365
00:16:42,500 --> 00:16:47,090
‫Et donc ici, nous voyons maintenant le champ, et nous avons donc ici notre bogue.

366
00:16:47,090 --> 00:16:47,930
‫D'accord?

367
00:16:47,930 --> 00:16:50,810
‫Le problème est donc, bien sûr, que nous n'avons pas

368
00:16:50,810 --> 00:16:53,170
‫d'espace entre le nom et la durée.

369
00:16:53,170 --> 00:16:54,830
‫Et c'est pour ça que ça ne marche pas.

370
00:16:54,830 --> 00:16:58,410
‫Donc les champs sont bien sûr définis ici, et comme

371
00:16:58,410 --> 00:17:02,500
‫ça on peut trouver notre bug et le corriger tout de suite.

372
00:17:02,500 --> 00:17:04,940
‫N'oubliez donc pas que l'étape ajoutée que

373
00:17:04,940 --> 00:17:07,780
‫nous faisons ici se reflète immédiatement dans le code.

374
00:17:07,780 --> 00:17:08,823
‫Alors

375
00:17:09,700 --> 00:17:12,560
‫faites-lui une sauvegarde, et il recommencera.

376
00:17:12,560 --> 00:17:14,233
‫Donc je peux continuer à marcher.

377
00:17:15,140 --> 00:17:17,270
‫Et maintenant, les champs sont corrects.

378
00:17:17,270 --> 00:17:19,193
‫Donc, nommez la durée de l'espace.

379
00:17:20,780 --> 00:17:22,670
‫Puis la ligne de code suivante.

380
00:17:22,670 --> 00:17:26,330
‫Et maintenant, nous entrons dans la méthode select sur la requête.

381
00:17:26,330 --> 00:17:28,420
‫Mais cela ne nous intéresse pas du tout, nous pouvons

382
00:17:28,420 --> 00:17:32,543
‫donc dire "sortir de la fonction actuelle. " D'accord?

383
00:17:32,543 --> 00:17:35,730
‫Donc, cette sélection que nous pensions exécuter cette

384
00:17:35,730 --> 00:17:37,880
‫fonction ici, d'accord ?

385
00:17:37,880 --> 00:17:40,150
‫Mais bien sûr, cela ne nous intéressait pas,

386
00:17:40,150 --> 00:17:43,080
‫alors nous l'avons simplement quitté et sommes passés à la ligne suivante.

387
00:17:43,080 --> 00:17:44,950
‫Alors maintenant, nous

388
00:17:44,950 --> 00:17:48,330
‫devons retourner ceci, la ligne suivante, et encore.

389
00:17:48,330 --> 00:17:51,373
‫Alors maintenant, nous sommes de retour là où nous étions, mais dans la ligne suivante.

390
00:17:52,590 --> 00:17:53,840
‫Alors continuons à faire ça.

391
00:17:55,040 --> 00:17:56,750
‫Nous en sommes maintenant à

392
00:17:56,750 --> 00:17:59,060
‫la page huit, mais celle-ci ne nous intéresse pas

393
00:17:59,060 --> 00:18:01,660
‫vraiment, et sortons donc à nouveau de la fonction actuelle.

394
00:18:02,950 --> 00:18:05,190
‫Et maintenant, nous sommes ici à la définition des tournées.

395
00:18:05,190 --> 00:18:07,840
‫Ce qui n'est pas encore fait à ce stade.

396
00:18:07,840 --> 00:18:10,610
‫Et donc disons encore étape.

397
00:18:10,610 --> 00:18:14,070
‫Et maintenant, à ce stade, nos tournées devraient être définies.

398
00:18:14,070 --> 00:18:17,950
‫Très bien, nous avons nos neuf tournées ici.

399
00:18:17,950 --> 00:18:19,250
‫Jetons un coup d'œil à

400
00:18:20,590 --> 00:18:21,810
‫eux, et les voici.

401
00:18:21,810 --> 00:18:23,670
‫Et en fait, ils ont toutes les

402
00:18:23,670 --> 00:18:26,880
‫données, donc pas seulement celle que nous avons définie, mais en fait,

403
00:18:26,880 --> 00:18:28,560
‫ce n'est pas le cas.

404
00:18:28,560 --> 00:18:32,220
‫Donc, nous n'avons vraiment que le nom et la durée,

405
00:18:32,220 --> 00:18:35,490
‫donc la durée, le nom et tous les

406
00:18:35,490 --> 00:18:36,980
‫autres sont indéfinis.

407
00:18:36,980 --> 00:18:40,010
‫C'est simplement parce que nous avons limité une requête à ces deux

408
00:18:40,010 --> 00:18:41,603
‫champs, vous vous souvenez ?

409
00:18:42,500 --> 00:18:45,350
‫Maintenant, ce que je voulais aussi vous montrer, c'est ici

410
00:18:45,350 --> 00:18:49,370
‫dans les fonctionnalités, nous pouvons jeter un œil à notre requête et ici nous avons

411
00:18:49,370 --> 00:18:52,240
‫la propriété field par exemple où nous voyons la durée définie

412
00:18:52,240 --> 00:18:54,780
‫sur un et le nom défini sur un.

413
00:18:54,780 --> 00:18:58,300
‫Et ce sont donc exactement les deux noms que nous avons sélectionnés.

414
00:18:58,300 --> 00:19:00,420
‫Nous avons également ces options

415
00:19:00,420 --> 00:19:05,420
‫ici, qui sont à ce stade définies pour le créer moins un.

416
00:19:05,690 --> 00:19:07,393
‫Et donc ça vient d'ici.

417
00:19:08,560 --> 00:19:10,500
‫Alors ça ici.

418
00:19:10,500 --> 00:19:13,360
‫Donc, fondamentalement, ce que cette méthode ici, cette méthode

419
00:19:13,360 --> 00:19:17,350
‫de tri va faire, c'est qu'elle ajoutera cette propriété de tri ici à

420
00:19:17,350 --> 00:19:18,860
‫ces options, d'accord ?

421
00:19:18,860 --> 00:19:22,110
‫Et puis nous avons aussi la limite et le saut qui viennent bien

422
00:19:22,110 --> 00:19:23,763
‫sûr ici de la page huit.

423
00:19:25,690 --> 00:19:26,523
‫D'accord?

424
00:19:26,523 --> 00:19:29,160
‫J'ai donc pensé que c'était aussi intéressant

425
00:19:29,160 --> 00:19:33,880
‫et oui, donc notre code est maintenant corrigé et continuons à

426
00:19:33,880 --> 00:19:34,713
‫l'exécuter.

427
00:19:35,550 --> 00:19:38,630
‫Et donc nous devrions maintenant avoir notre résultat correct.

428
00:19:38,630 --> 00:19:41,510
‫Maintenant, ici, il est dit que nous n'avons pu obtenir aucune réponse,

429
00:19:41,510 --> 00:19:44,593
‫et c'est parce que nous avons mis trop de temps à corriger notre code.

430
00:19:45,490 --> 00:19:47,280
‫Nous avons donc une erreur de connexion.

431
00:19:47,280 --> 00:19:48,693
‫Mais si nous l'envoyons maintenant à

432
00:19:49,530 --> 00:19:51,050
‫nouveau, et maintenant nous le faisons plus rapidement.

433
00:19:51,050 --> 00:19:53,650
‫Ou en fait, nous pourrions supprimer complètement notre point d'arrêt.

434
00:19:55,280 --> 00:19:56,780
‫Alors continuons à tourner,

435
00:19:56,780 --> 00:19:59,570
‫revenons en arrière et maintenant, en effet, nous obtenons

436
00:19:59,570 --> 00:20:01,570
‫également la durée et le nom.

437
00:20:01,570 --> 00:20:04,260
‫C'est parce que nous venons de corriger notre

438
00:20:04,260 --> 00:20:06,550
‫code à l'aide du débogueur NDB.

439
00:20:06,550 --> 00:20:07,990
‫Tellement bon.

440
00:20:07,990 --> 00:20:10,840
‫C'est un outil vraiment incroyable et utile que

441
00:20:10,840 --> 00:20:13,260
‫nous continuerons à utiliser tout au long

442
00:20:13,260 --> 00:20:14,220
‫du cours.

443
00:20:14,220 --> 00:20:17,530
‫Peut-être pas toujours, parfois il est plus rapide de simplement ajouter

444
00:20:17,530 --> 00:20:19,540
‫un journal de sortie de console.

445
00:20:19,540 --> 00:20:22,350
‫Mais vraiment, dans certains cas plus compliqués, j'aime

446
00:20:22,350 --> 00:20:24,253
‫utiliser ce genre d'outil.