1 00:00:02,240 --> 00:00:09,740 Maintenant, il y a une chose dans cette superposition de développeur que vous pouvez ouvrir qui est extrêmement utile 2 00:00:09,740 --> 00:00:11,030 pour déboguer votre 3 00:00:11,030 --> 00:00:17,780 interface utilisateur et c'est l'option d'inspecteur à bascule. Pour basculer cela, vous verrez cette superposition en bas ici et maintenant 4 00:00:17,780 --> 00:00:22,710 vous pouvez cliquer sur les éléments de votre interface utilisateur pour obtenir des informations à leur sujet, par 5 00:00:22,730 --> 00:00:24,260 exemple ici le bouton. 6 00:00:24,260 --> 00:00:29,990 Maintenant, vous voyez la marge autour du bouton, le rembourrage, vous voyez sa position dans l'arborescence des composants, 7 00:00:30,440 --> 00:00:35,130 vous voyez une configuration du bouton et vous pouvez également jeter un coup d'œil 8 00:00:35,130 --> 00:00:38,780 à l'environnement et ainsi avoir une idée de la raison pour 9 00:00:38,900 --> 00:00:45,200 laquelle les choses sont disposées sur l'écran qu'ils sont. Vous pouvez toujours fermer cela à nouveau en ouvrant la superposition 10 00:00:45,200 --> 00:00:51,410 de développeur, puis en cliquant à nouveau sur l'inspecteur de bascule et bien sûr, cela est également disponible ici sur iOS où vous pouvez également 11 00:00:51,410 --> 00:00:56,180 avoir une idée de la façon dont les choses sont positionnées et pourquoi elles sont positionnées de cette façon. 12 00:00:56,180 --> 00:01:02,670 Cependant, il existe un outil encore meilleur pour inspecter cela et je vais donc le fermer ici et 13 00:01:02,690 --> 00:01:04,800 c'est le débogueur React Native. 14 00:01:05,060 --> 00:01:10,580 Vous pouvez rechercher le débogueur React Native et vous devriez trouver cette page github ici et 15 00:01:10,580 --> 00:01:18,280 sur cette page, vous pouvez télécharger le débogueur React Native. Vous trouverez les instructions d'installation ici et vous pouvez simplement aller 16 00:01:18,780 --> 00:01:21,070 à la page de version à 17 00:01:24,380 --> 00:01:27,990 la fin ici pour télécharger l'un de ces fichiers binaires 18 00:01:27,990 --> 00:01:35,070 pour votre système d'exploitation, donc pour Windows, fichier exe ici, fichier d'installation, pour macOS, un fichier dmg et ainsi de suite. 19 00:01:35,070 --> 00:01:37,860 Donc, ce sont différentes choses que 20 00:01:37,890 --> 00:01:46,460 vous pouvez télécharger, je vais aller avec le fichier dmg pour télécharger la dernière version ici, l'enregistrer et attendre que ce téléchargement 21 00:01:46,460 --> 00:01:53,730 se termine, puis laissez-moi simplement l'exécuter et terminer l'installation en parcourant simplement le installateur ou dans mon cas ici 22 00:01:53,730 --> 00:02:00,000 sur macOS, il suffit de le faire glisser dans le répertoire des applications et maintenant il 23 00:02:00,000 --> 00:02:07,620 peut ouvrir le débogueur React Native ici et ici. Maintenant, cela ne fonctionne pas pour le moment car pour 24 00:02:07,620 --> 00:02:12,410 que cela fonctionne, vous devez activer le débogage Javascript à distance sur les appareils, 25 00:02:12,420 --> 00:02:16,820 exactement ce que nous avons fait avant pour déboguer cela dans Chrome. 26 00:02:16,820 --> 00:02:22,270 Maintenant, cela remplace essentiellement cette expérience de débogage Chrome que vous pourriez dire ou l'améliore. 27 00:02:22,280 --> 00:02:30,140 Maintenant que cela est ouvert, appuyez sur la commande t sur Mac ou contrôlez t sur Windows ou Linux ici pour 28 00:02:30,140 --> 00:02:38,690 ouvrir un nouvel onglet et ouvrez et confirmez le port de débogage React Native que l'onglet Chrome a également utilisé auparavant et confirmez-le 29 00:02:38,690 --> 00:02:46,730 et maintenant il essaie de se connecter là-bas et pour que cela réussisse, ouvrez vos outils de développement, disons sur Android maintenant 30 00:02:46,730 --> 00:02:49,920 et déboguez Javascript à distance et maintenant cela 31 00:02:50,000 --> 00:02:57,030 devrait se connecter ici et vous verrez la sortie de votre console ici maintenant dans les outils de débogage. 32 00:02:57,020 --> 00:03:05,240 Vous verrez également, si j'élargis ceci, que dans les sources, vous pouvez à nouveau plonger dans votre code ici si vous voulez comme avant et la grande différence n'est 33 00:03:05,250 --> 00:03:05,960 bien sûr 34 00:03:06,650 --> 00:03:10,520 pas que vous pouvez le faire parce que c'est la même chose que 35 00:03:10,520 --> 00:03:15,770 vous pourriez faire dans le navigateur mais qu'ici, vous avez maintenant les outils assez soignés ici sur la gauche. 36 00:03:15,770 --> 00:03:17,950 Donc, vous pouvez toujours bien 37 00:03:17,960 --> 00:03:23,480 sûr définir des points d'arrêt et tout, mais ici, vous avez maintenant vos outils de débogage Redux 38 00:03:23,480 --> 00:03:28,790 et nous n'utilisons pas Redux ici, donc ils sont assez vides, rien ne se passe ici 39 00:03:28,790 --> 00:03:37,760 mais en bas, vous avez ces outil de débogage d'éléments et cela vous permet d'explorer votre code jsx React Native pour ainsi dire, donc votre élément, votre 40 00:03:37,790 --> 00:03:45,140 arborescence de composants dans cette belle interface utilisateur qui est certainement plus agréable que l'inspecteur, vous pouvez basculer ici parce que maintenant 41 00:03:45,140 --> 00:03:52,660 ici, vous pouvez vraiment avoir un regardez ce qui se passe. Vous pouvez plonger dans le composant racine pour trouver notre 42 00:03:52,660 --> 00:04:00,200 composant d'application là-bas et là-bas, nous trouvons notre vue avec ce bouton, nous pouvons cliquer sur le bouton et nous 43 00:04:00,200 --> 00:04:06,080 voyons les accessoires que nous utilisons sur le bouton, comme onPress et le titre que 44 00:04:07,720 --> 00:04:09,170 nous avons défini. 45 00:04:09,250 --> 00:04:14,020 Nous pouvons cliquer sur notre propre composant où nous voyons les accessoires que nous transmettons là-bas, 46 00:04:14,140 --> 00:04:18,720 nous pouvons même changer l'accessoire visible pour basculer ce modal comme ceci si nous le voulons, 47 00:04:18,790 --> 00:04:20,220 donc c'est vraiment sympa. 48 00:04:20,290 --> 00:04:25,070 Nous voyons les crochets que nous utilisons là-dedans, comme l'état que nous gérons actuellement dans 49 00:04:25,150 --> 00:04:31,540 notre composant et si j'ouvre ce modal ici, vous voyez cet état, les accessoires ici changent et si je commence à 50 00:04:31,540 --> 00:04:37,870 taper ici, comme apprendre React Native , vous verrez que cela se met également à jour ici à droite, comme 51 00:04:37,870 --> 00:04:39,220 un léger retard, mais 52 00:04:39,280 --> 00:04:42,730 cela ne devrait pas être un problème, donc c'est vraiment bien. 53 00:04:42,820 --> 00:04:46,600 Nous pouvons ajouter ceci et voir les changements d'état ici, nous 54 00:04:46,600 --> 00:04:51,340 pouvons bien sûr plonger plus profondément dans notre entrée d'objectif pour voir le modal ici. 55 00:04:51,400 --> 00:04:57,490 Vous pouvez explorer la FlatList et ce qui y est configuré et approfondir cette vue si vous 56 00:04:57,490 --> 00:05:04,600 le souhaitez, donc vraiment beaucoup de choses que vous pouvez faire là-bas et vous pouvez globalement explorer votre arborescence de 57 00:05:04,660 --> 00:05:10,780 composants là-bas pour savoir ce qui se passe. Sur les éléments où vous avez directement ajouté un style, comme sur 58 00:05:10,780 --> 00:05:11,970 la vue environnante par 59 00:05:11,980 --> 00:05:17,320 exemple où j'ai défini ce rembourrage, vous pouvez même inspecter le style et non seulement voir le style mais aussi le 60 00:05:17,320 --> 00:05:18,960 changer, par exemple pour augmenter le 61 00:05:19,030 --> 00:05:24,010 rembourrage ou le réduire et cela vous offre un moyen simple de tester différents styles et mises en page à 62 00:05:24,010 --> 00:05:27,190 l'écran pour découvrir ce qui vous convient et ce que vous souhaitez changer. 63 00:05:27,250 --> 00:05:33,310 Vous pouvez également accéder à l'onglet du profileur ici et démarrer une session de profilage, puis faire quelque chose à 64 00:05:33,310 --> 00:05:39,760 l'écran comme ouvrir et fermer le modal et arrêter cela et vous obtiendrez l'expérience par défaut des outils de développement React ici 65 00:05:39,760 --> 00:05:45,400 où vous voyez lesquels de vos composants étaient repeint et vous pouvez vous y plonger pour avoir une idée 66 00:05:45,400 --> 00:05:51,640 de ce qui a été repeint, des accessoires qu'il avait à l'époque et du nombre de cycles de restitution que vous 67 00:05:51,640 --> 00:05:57,070 avez dû, par exemple, savoir s'il y avait une repeinture inutile en cours, évidemment un peu chose plus 68 00:05:57,070 --> 00:06:02,800 avancée à faire et quelque chose que vous voudrez peut-être faire lorsque vous êtes sur le point de terminer 69 00:06:02,800 --> 00:06:08,230 votre application, pour vous assurer d'optimiser les performances et d'éviter les cycles de restitution inutiles, mais ces 70 00:06:08,230 --> 00:06:13,870 outils peuvent vraiment être utiles pour repérer petits problèmes dans votre application et pour vous assurer que tout fonctionne 71 00:06:13,870 --> 00:06:16,360 comme il se doit dans votre application. 72 00:06:16,360 --> 00:06:20,890 Maintenant, une autre chose intéressante que vous pouvez faire avec le débogueur React Native, vous pouvez cliquer avec 73 00:06:21,130 --> 00:06:24,110 le bouton droit n'importe où ici, disons ici et vous pouvez 74 00:06:24,250 --> 00:06:29,800 activer l'inspection du réseau et si vous faites cela, alors vous pouvez aller dans l'onglet réseau et vous verrez sortant demandes de réseau. 75 00:06:29,800 --> 00:06:35,770 Maintenant, ce ne sont que des requêtes liées au débogage, mais plus tard dans le cours, lorsque nous ajouterons 76 00:06:35,770 --> 00:06:42,070 nos propres demandes réseau, où nous enverrons des demandes à notre propre serveur Web, nous pouvons même les inspecter ici et 77 00:06:42,070 --> 00:06:47,140 les examiner et voir si nous envoyons et recevoir les bonnes données, quelque chose qui est 78 00:06:47,380 --> 00:06:48,560 autrement assez difficile 79 00:06:48,580 --> 00:06:55,480 à faire avec des applications natives, ici, c'est un jeu d'enfant. Le débogueur React Native est donc vraiment un outil génial pour consulter votre application, pour définir des points 80 00:06:55,720 --> 00:07:02,860 d'arrêt, afficher la console, afficher l'arborescence de vos composants, afficher les styles que vous utilisez là-bas et bien plus encore. Cela vous permet vraiment de plonger profondément dans votre 81 00:07:02,860 --> 00:07:10,570 code d'application, dans votre interface utilisateur, dans votre logique et de savoir si tout fonctionne comme il se doit et 82 00:07:10,660 --> 00:07:15,490 vous pouvez même aller ici et changer certaines choses comme le style 83 00:07:15,490 --> 00:07:21,220 comme vous l'avez vu, pour expérimentez différents paramètres et découvrez où vous devez modifier votre 84 00:07:21,220 --> 00:07:23,380 application pour qu'elle fonctionne correctement.