Maintenant, parfois, le journal de la console à lui seul ne vous permet pas d'aller
aussi loin, vous avez besoin de plus d'aide et dans de tels cas, vous pouvez déboguer votre code à distance.
Maintenant, pour cela, vous devez ouvrir le menu de débogage sur ces émulateurs ou sur de vrais
appareils aussi si vous travaillez avec ceux-ci. Vous faites cela en appuyant sur le
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.
Maintenant, vous voyez quelques options et nous allons voir les plus importantes de ce module.
L'option que nous allons maintenant choisir est de déboguer js à distance.
Si vous appuyez sur ceci, un nouvel onglet devrait s'ouvrir dans le navigateur qui accède automatiquement à localhost 1901 dans mon
cas ici, slash debugger UI, qui devrait s'ouvrir automatiquement. Maintenant, pour que cela fonctionne correctement, assurez-vous que dans vos
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
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
le raccourci que vous devriez voir ici et là, vous voyez maintenant également le même journal de
console que vous obtenez ici, vous avez donc également une autre console que vous pouvez consulter,
qui pourrait être plus pratique de travailler avec , juste pour montrer à nouveau rapidement cet exemple avec
les objectifs du cours.
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
l'étendre.
Donc, cela pourrait être un peu plus pratique
à utiliser, essentiellement comme vous le savez du développement Web
au cas où vous êtes un développeur Web, mais vous pouvez également en faire plus.
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
ici, développez ces dossiers et vous trouverez la structure de dossiers avec laquelle vous travaillez
également, par exemple
dans votre dossier d'utilisateurs ici, vous trouverez l'application. fichier js, vous trouvez les composants.
Alors maintenant, dans l'application. js si vous ouvrez ce fichier, vous verrez votre code tel
que vous l'avez écrit, donc
dans la version non compilée qui est géniale car il est facile
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
nouvel objectif, vous pouvez ajouter un point d'arrêt en cliquant sur la gauche du
numéro de ligne ici afin que vous ayez
cette marque bleue et maintenant votre exécution de code s'arrêtera la prochaine fois que vous frapperez cette ligne de code ici.
Maintenant, j'ai activé le débogage sur l'émulateur Android, donc ça ne s'arrêtera pas si je
l'essaye sur iOS, ça s'arrêtera si je l'essaye sur Android.
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
avec Android.
Vous pouvez ignorer cet
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
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
cela est maintenant surligné en bleu, il est
passé et maintenant la chose cool est que vous pouvez parcourir votre code étape par étape avec ces contrôles ici,
simplement jouer avec eux et vous pouvez également survoler les choses à regarder dans votre code, par exemple pour
voir la valeur actuelle dans le titre de l'objectif.
Maintenant, nous pouvons simplement progresser à travers ces lignes étape par étape avec ce bouton,
vous pouvez entrer dans un appel de fonction avec ce bouton ou en sortir avec ce bouton
et vous pouvez toujours reprendre l'exécution du code avec ce bouton de lecture bleu.
Cela peut être un outil très puissant pour plonger vraiment profondément dans votre flux de code car il vous
permet de comprendre pleinement ce qui
se passe, d'examiner vos valeurs au moment de l'exécution et d'avoir un contrôle total sur votre code.
Maintenant, si vous souhaitez en savoir plus sur l'utilisation des outils de débogage Chrome, vous trouverez un lien utile attaché
à cette conférence qui contient plus d'informations sur les outils de débogage Chrome.