Maintenant, il y a une chose dans cette superposition de développeur que vous pouvez ouvrir qui est extrêmement utile
pour déboguer votre
interface utilisateur et c'est l'option d'inspecteur à bascule. Pour basculer cela, vous verrez cette superposition en bas ici et maintenant
vous pouvez cliquer sur les éléments de votre interface utilisateur pour obtenir des informations à leur sujet, par
exemple ici le bouton.
Maintenant, vous voyez la marge autour du bouton, le rembourrage, vous voyez sa position dans l'arborescence des composants,
vous voyez une configuration du bouton et vous pouvez également jeter un coup d'œil
à l'environnement et ainsi avoir une idée de la raison pour
laquelle les choses sont disposées sur l'écran qu'ils sont. Vous pouvez toujours fermer cela à nouveau en ouvrant la superposition
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
avoir une idée de la façon dont les choses sont positionnées et pourquoi elles sont positionnées de cette façon.
Cependant, il existe un outil encore meilleur pour inspecter cela et je vais donc le fermer ici et
c'est le débogueur React Native.
Vous pouvez rechercher le débogueur React Native et vous devriez trouver cette page github ici et
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
à la page de version à
la fin ici pour télécharger l'un de ces fichiers binaires
pour votre système d'exploitation, donc pour Windows, fichier exe ici, fichier d'installation, pour macOS, un fichier dmg et ainsi de suite.
Donc, ce sont différentes choses que
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
se termine, puis laissez-moi simplement l'exécuter et terminer l'installation en parcourant simplement le installateur ou dans mon cas ici
sur macOS, il suffit de le faire glisser dans le répertoire des applications et maintenant il
peut ouvrir le débogueur React Native ici et ici. Maintenant, cela ne fonctionne pas pour le moment car pour
que cela fonctionne, vous devez activer le débogage Javascript à distance sur les appareils,
exactement ce que nous avons fait avant pour déboguer cela dans Chrome.
Maintenant, cela remplace essentiellement cette expérience de débogage Chrome que vous pourriez dire ou l'améliore.
Maintenant que cela est ouvert, appuyez sur la commande t sur Mac ou contrôlez t sur Windows ou Linux ici pour
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
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
et déboguez Javascript à distance et maintenant cela
devrait se connecter ici et vous verrez la sortie de votre console ici maintenant dans les outils de débogage.
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
bien sûr
pas que vous pouvez le faire parce que c'est la même chose que
vous pourriez faire dans le navigateur mais qu'ici, vous avez maintenant les outils assez soignés ici sur la gauche.
Donc, vous pouvez toujours bien
sûr définir des points d'arrêt et tout, mais ici, vous avez maintenant vos outils de débogage Redux
et nous n'utilisons pas Redux ici, donc ils sont assez vides, rien ne se passe ici
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
arborescence de composants dans cette belle interface utilisateur qui est certainement plus agréable que l'inspecteur, vous pouvez basculer ici parce que maintenant
ici, vous pouvez vraiment avoir un regardez ce qui se passe. Vous pouvez plonger dans le composant racine pour trouver notre
composant d'application là-bas et là-bas, nous trouvons notre vue avec ce bouton, nous pouvons cliquer sur le bouton et nous
voyons les accessoires que nous utilisons sur le bouton, comme onPress et le titre que
nous avons défini.
Nous pouvons cliquer sur notre propre composant où nous voyons les accessoires que nous transmettons là-bas,
nous pouvons même changer l'accessoire visible pour basculer ce modal comme ceci si nous le voulons,
donc c'est vraiment sympa.
Nous voyons les crochets que nous utilisons là-dedans, comme l'état que nous gérons actuellement dans
notre composant et si j'ouvre ce modal ici, vous voyez cet état, les accessoires ici changent et si je commence à
taper ici, comme apprendre React Native , vous verrez que cela se met également à jour ici à droite, comme
un léger retard, mais
cela ne devrait pas être un problème, donc c'est vraiment bien.
Nous pouvons ajouter ceci et voir les changements d'état ici, nous
pouvons bien sûr plonger plus profondément dans notre entrée d'objectif pour voir le modal ici.
Vous pouvez explorer la FlatList et ce qui y est configuré et approfondir cette vue si vous
le souhaitez, donc vraiment beaucoup de choses que vous pouvez faire là-bas et vous pouvez globalement explorer votre arborescence de
composants là-bas pour savoir ce qui se passe. Sur les éléments où vous avez directement ajouté un style, comme sur
la vue environnante par
exemple où j'ai défini ce rembourrage, vous pouvez même inspecter le style et non seulement voir le style mais aussi le
changer, par exemple pour augmenter le
rembourrage ou le réduire et cela vous offre un moyen simple de tester différents styles et mises en page à
l'écran pour découvrir ce qui vous convient et ce que vous souhaitez changer.
Vous pouvez également accéder à l'onglet du profileur ici et démarrer une session de profilage, puis faire quelque chose à
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
où vous voyez lesquels de vos composants étaient repeint et vous pouvez vous y plonger pour avoir une idée
de ce qui a été repeint, des accessoires qu'il avait à l'époque et du nombre de cycles de restitution que vous
avez dû, par exemple, savoir s'il y avait une repeinture inutile en cours, évidemment un peu chose plus
avancée à faire et quelque chose que vous voudrez peut-être faire lorsque vous êtes sur le point de terminer
votre application, pour vous assurer d'optimiser les performances et d'éviter les cycles de restitution inutiles, mais ces
outils peuvent vraiment être utiles pour repérer petits problèmes dans votre application et pour vous assurer que tout fonctionne
comme il se doit dans votre application.
Maintenant, une autre chose intéressante que vous pouvez faire avec le débogueur React Native, vous pouvez cliquer avec
le bouton droit n'importe où ici, disons ici et vous pouvez
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.
Maintenant, ce ne sont que des requêtes liées au débogage, mais plus tard dans le cours, lorsque nous ajouterons
nos propres demandes réseau, où nous enverrons des demandes à notre propre serveur Web, nous pouvons même les inspecter ici et
les examiner et voir si nous envoyons et recevoir les bonnes données, quelque chose qui est
autrement assez difficile
à 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
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
code d'application, dans votre interface utilisateur, dans votre logique et de savoir si tout fonctionne comme il se doit et
vous pouvez même aller ici et changer certaines choses comme le style
comme vous l'avez vu, pour expérimentez différents paramètres et découvrez où vous devez modifier votre
application pour qu'elle fonctionne correctement.