1
00:00:02,300 --> 00:00:06,340
Maintenant, parfois, le journal de la console à lui seul ne vous permet pas d'aller

2
00:00:06,380 --> 00:00:11,270
aussi loin, vous avez besoin de plus d'aide et dans de tels cas, vous pouvez déboguer votre code à distance.

3
00:00:11,270 --> 00:00:17,750
Maintenant, pour cela, vous devez ouvrir le menu de débogage sur ces émulateurs ou sur de vrais

4
00:00:17,750 --> 00:00:23,650
appareils aussi si vous travaillez avec ceux-ci. Vous faites cela en appuyant sur le

5
00:00:23,660 --> 00:00:34,030
simulateur iOS, la commande d et cela ouvrira ce menu ici, sur Android, vous appuyez sur la commande ou le contrôle m et cela ouvrira ce menu.

6
00:00:34,030 --> 00:00:38,360
Maintenant, vous voyez quelques options et nous allons voir les plus importantes de ce module.

7
00:00:38,360 --> 00:00:41,780
L'option que nous allons maintenant choisir est de déboguer js à distance.

8
00:00:42,050 --> 00:00:48,290
Si vous appuyez sur ceci, un nouvel onglet devrait s'ouvrir dans le navigateur qui accède automatiquement à localhost 1901 dans mon

9
00:00:48,680 --> 00:00:54,700
cas ici, slash debugger UI, qui devrait s'ouvrir automatiquement. Maintenant, pour que cela fonctionne correctement, assurez-vous que dans vos

10
00:00:54,690 --> 00:01:01,160
outils de développement expo, vous avez configuré la connexion pour qu'elle soit d'alarme ou locale, pas de tunnel sinon ce sera super

11
00:01:01,160 --> 00:01:08,490
lent et maintenant ce que ce débogueur vous rapporte, ce nouvel onglet est que vous pouvez ouvrez les outils de développement Chrome maintenant avec

12
00:01:08,500 --> 00:01:13,650
le raccourci que vous devriez voir ici et là, vous voyez maintenant également le même journal de

13
00:01:14,790 --> 00:01:19,890
console que vous obtenez ici, vous avez donc également une autre console que vous pouvez consulter,

14
00:01:19,890 --> 00:01:25,320
qui pourrait être plus pratique de travailler avec , juste pour montrer à nouveau rapidement cet exemple avec

15
00:01:25,320 --> 00:01:26,930
les objectifs du cours.

16
00:01:26,940 --> 00:01:36,290
Si je console mes objectifs de cours ici et je les enregistre, cela se reconstruit et maintenant nous voyons le tableau ici et nous pouvons

17
00:01:36,290 --> 00:01:37,040
l'étendre.

18
00:01:37,040 --> 00:01:39,050
Donc, cela pourrait être un peu plus pratique

19
00:01:39,140 --> 00:01:41,420
à utiliser, essentiellement comme vous le savez du développement Web

20
00:01:41,420 --> 00:01:44,760
au cas où vous êtes un développeur Web, mais vous pouvez également en faire plus.

21
00:01:44,780 --> 00:01:50,570
Vous pouvez plonger dans les sources par exemple pour plonger dans votre code source et définir des points d'arrêt. Développez simplement ce truc du débogueur js

22
00:01:50,570 --> 00:01:56,870
ici, développez ces dossiers et vous trouverez la structure de dossiers avec laquelle vous travaillez

23
00:01:56,900 --> 00:01:58,750
également, par exemple

24
00:01:58,820 --> 00:02:05,000
dans votre dossier d'utilisateurs ici, vous trouverez l'application. fichier js, vous trouvez les composants.

25
00:02:05,450 --> 00:02:10,950
Alors maintenant, dans l'application. js si vous ouvrez ce fichier, vous verrez votre code tel

26
00:02:10,960 --> 00:02:12,510
que vous l'avez écrit, donc

27
00:02:12,550 --> 00:02:15,560
dans la version non compilée qui est géniale car il est facile

28
00:02:15,700 --> 00:02:21,880
de reconnaître votre code là et maintenant ici, par exemple disons que vous voulez arrêter le code lorsque vous êtes sur le point d'ajouter un

29
00:02:21,880 --> 00:02:25,350
nouvel objectif, vous pouvez ajouter un point d'arrêt en cliquant sur la gauche du

30
00:02:25,360 --> 00:02:27,370
numéro de ligne ici afin que vous ayez

31
00:02:27,370 --> 00:02:32,730
cette marque bleue et maintenant votre exécution de code s'arrêtera la prochaine fois que vous frapperez cette ligne de code ici.

32
00:02:32,830 --> 00:02:36,930
Maintenant, j'ai activé le débogage sur l'émulateur Android, donc ça ne s'arrêtera pas si je

33
00:02:36,940 --> 00:02:39,980
l'essaye sur iOS, ça s'arrêtera si je l'essaye sur Android.

34
00:02:40,000 --> 00:02:47,500
Nous aurions également pu l'activer sur iOS, ici avec le débogage de js à distance, mais je ne l'ai pas fait, alors allons-y

35
00:02:47,500 --> 00:02:48,250
avec Android.

36
00:02:48,310 --> 00:02:49,800
Vous pouvez ignorer cet

37
00:02:49,840 --> 00:02:57,340
avertissement ici, vous pouvez simplement le rejeter et maintenant appuyer sur ajouter un nouvel objectif et peut-être entrer apprendre React Native, cliquer sur ajouter et

38
00:02:57,340 --> 00:03:04,030
maintenant vous voyez, cela reste bloqué ici parce que si vous revenez aux outils de développement, c'est maintenant en pause, vous voyez que

39
00:03:04,060 --> 00:03:06,580
cela est maintenant surligné en bleu, il est

40
00:03:06,670 --> 00:03:12,610
passé et maintenant la chose cool est que vous pouvez parcourir votre code étape par étape avec ces contrôles ici,

41
00:03:12,760 --> 00:03:18,400
simplement jouer avec eux et vous pouvez également survoler les choses à regarder dans votre code, par exemple pour

42
00:03:18,400 --> 00:03:21,060
voir la valeur actuelle dans le titre de l'objectif.

43
00:03:21,070 --> 00:03:25,480
Maintenant, nous pouvons simplement progresser à travers ces lignes étape par étape avec ce bouton,

44
00:03:25,480 --> 00:03:30,220
vous pouvez entrer dans un appel de fonction avec ce bouton ou en sortir avec ce bouton

45
00:03:31,210 --> 00:03:35,430
et vous pouvez toujours reprendre l'exécution du code avec ce bouton de lecture bleu.

46
00:03:38,030 --> 00:03:43,850
Cela peut être un outil très puissant pour plonger vraiment profondément dans votre flux de code car il vous

47
00:03:43,850 --> 00:03:45,810
permet de comprendre pleinement ce qui

48
00:03:45,890 --> 00:03:51,240
se passe, d'examiner vos valeurs au moment de l'exécution et d'avoir un contrôle total sur votre code.

49
00:03:51,260 --> 00:03:56,960
Maintenant, si vous souhaitez en savoir plus sur l'utilisation des outils de débogage Chrome, vous trouverez un lien utile attaché

50
00:03:56,990 --> 00:04:01,040
à cette conférence qui contient plus d'informations sur les outils de débogage Chrome.