Ora c'è anche una cosa in quella sovrapposizione dello sviluppatore che puoi aprire, che è estremamente utile per il
debug dell'interfaccia utente
e questa è l'opzione ispettore attiva / disattiva. Per attivare questa opzione, vedrai questo overlay in basso qui
e ora puoi fare clic sugli elementi nell'interfaccia utente per ottenere informazioni su di essi, ad
esempio qui il pulsante.
Ora vedi il margine attorno al pulsante, il padding, vedi la sua posizione nell'albero
dei componenti, vedi una configurazione del pulsante e puoi anche dare un'occhiata
ai dintorni e quindi avere un'idea del perché le
cose sono disposte su lo schermo sono. Puoi sempre chiuderlo di nuovo aprendo l'overlay dello sviluppatore
e quindi facendo nuovamente clic su Attiva / Disattiva ispettore e, naturalmente, è disponibile anche qui su iOS, dove puoi
anche avere un'idea di come sono posizionate le cose e perché sono posizionate in quel modo.
Tuttavia, esiste uno strumento ancora migliore per ispezionarlo e quindi lo chiuderò qui e questo è
il debugger React Native.
Puoi cercare il debugger di React Native e dovresti trovare questa pagina di github qui e
su questa pagina, puoi scaricare il debugger di React Native. Puoi trovare le istruzioni di installazione qui e puoi semplicemente andare
alla pagina di rilascio alla
fine qui per scaricare uno di questi binari per il
tuo sistema operativo, quindi per Windows, file exe qui, file di installazione, per macOS, un file dmg e così via.
Quindi queste sono diverse cose che
puoi scaricare, andrò con il file dmg per scaricare l'ultima versione qui, salvare questo e attendere che il download finisca
e poi lasciami semplicemente eseguire questo e finire l'installazione semplicemente camminando attraverso il programma di installazione o
nel mio caso qui su macOS, trascinandolo semplicemente nella directory delle applicazioni e ora può
aprire il debugger React Native qui ed eccolo qui. Ora, non funziona in questo momento perché per
farlo funzionare, è necessario abilitare il debug Javascript remoto sui dispositivi, proprio
quello che abbiamo fatto prima per eseguire il debug in Chrome.
Ora questo essenzialmente sostituisce questa esperienza di debug di Chrome che potresti dire o migliorarla.
Ora con questo aperto, premi il comando t su Mac o controlla t su Windows o Linux qui per aprire
una nuova scheda e aprire e confermare la porta del debugger React Native che la scheda Chrome ha usato anche prima e
confermare e ora sta cercando di connettersi lì e per farlo, apri i tuoi strumenti di sviluppo, diciamo ora su Android
e esegui il debug di JavaScript da remoto
e ora questo dovrebbe connettersi qui e vedrai l'output della tua console qui ora negli strumenti di debugger.
Vedrai anche, se espanderò questo, che nelle fonti, puoi di nuovo tuffarti nel tuo codice qui se vuoi farlo proprio come prima e la
grande differenza
ovviamente non è che puoi farlo perché è lo stesso che
potresti fare nel browser, ma qui, ora hai gli strumenti piuttosto accurati qui a sinistra.
Quindi puoi ovviamente impostare punti
di interruzione e tutto, ma qui, ora per uno hai i tuoi strumenti di debug di
Redux e non stiamo usando Redux qui, quindi sono piuttosto vuoti, nulla sta succedendo qui
ma in fondo, hai questi strumento di debug degli elementi e questo ti consente di esplorare il tuo codice jsx React Native per così dire, quindi
il tuo elemento, l'albero dei componenti in questa bella interfaccia utente che è decisamente più bello dell'ispettore che potresti attivare qui
perché ora qui puoi davvero avere un guarda cosa sta succedendo. Puoi immergerti nel componente root per trovare il
nostro componente app laggiù e lì, troviamo la nostra vista con quel pulsante, possiamo fare clic sul pulsante
e vediamo i puntelli che stiamo usando sul pulsante, come suPress e il titolo
che abbiamo impostato.
Possiamo fare clic sul nostro componente dove vediamo gli oggetti di scena che stiamo inoltrando lì,
possiamo anche cambiare l'elica visibile per attivare questo modale in questo modo se vogliamo,
quindi è davvero bello.
Vediamo gli hook che stiamo usando lì, come lo stato che stiamo attualmente gestendo
nel nostro componente e se apro quel modale qui, vedi quello stato, i puntelli qui cambiano e se inizio
a digitare qui, come imparare React Native , vedrai che questo si aggiorna anche qui a destra, come un
leggero ritardo ma
questo non dovrebbe essere un problema, quindi è davvero pulito.
Possiamo aggiungere questo e vedere i cambiamenti di stato qui, possiamo
ovviamente immergerci più a fondo nel nostro input obiettivo per vedere qui il modale.
Puoi esplorare la FlatList e ciò che è configurato lì e approfondire questa vista se
vuoi, quindi davvero un sacco di cose che puoi fare lì e puoi esplorare il tuo albero dei
componenti lì per scoprire cosa sta succedendo. Sugli elementi in cui hai aggiunto direttamente uno stile, come
nella vista circostante,
ad esempio dove ho impostato questo padding, puoi persino ispezionare lo stile e non solo vedere lo stile ma
anche cambiarlo, ad esempio per aumentare
il padding o ridurlo e questo ti offre un modo semplice per testare diversi aspetti e layout sullo
schermo per scoprire cosa ti sta bene e cosa vuoi cambiare.
Puoi anche andare alla scheda del profiler qui e avviare una sessione di profilazione, quindi fare qualcosa sullo schermo
come aprire e chiudere il modale e fermarlo e otterrai l'esperienza predefinita degli strumenti di sviluppo React qui dove vedi
quali dei tuoi componenti erano riverniciato e puoi immergerti in quello per avere un'idea di ciò che
è stato ridipinto, quali oggetti di scena aveva in quel momento e quanti cicli di rilavorazione dovevi, ad esempio, scoprire
se ci sono ridipinture inutili in corso, ovviamente un po 'di cose più avanzate da fare
e qualcosa che potresti voler fare quando sei più vicino a finire la tua app, per assicurarti di
ottimizzare le prestazioni e di evitare cicli di re-rendering non necessari, ma questi strumenti possono davvero
essere utili per individuare piccoli problemi nella tua app e per assicurarti che tutto funzioni nel modo
in cui dovrebbe funzionare nella tua app.
Ora un'altra cosa interessante che puoi fare con il debugger React Native, puoi fare clic con il
tasto destro in qualsiasi punto qui, diciamo qui e puoi
abilitare l'ispezione della rete e se lo fai, puoi andare alla scheda della rete e vedrai in uscita richieste di rete.
Ora queste sono solo richieste relative al debug, ma più avanti nel corso quando aggiungeremo le nostre
richieste di rete, dove inviamo richieste al nostro server web, possiamo persino ispezionarle qui e guardarle e vedere
se stiamo inviando e ricevere i dati giusti, cosa che altrimenti sarebbe piuttosto difficile
da fare con
le app native, qui è un gioco da ragazzi. Quindi il debugger React Native è davvero uno strumento interessante per esaminare la tua app, impostare i
punti di interruzione, visualizzare la console, visualizzare l'albero dei componenti, visualizzare gli stili che stai utilizzando e molto altro. Ti consente davvero di immergerti profondamente nel
codice dell'applicazione, nell'interfaccia utente, nella logica e scoprire se tutto funziona come dovrebbe funzionare e puoi anche
andare qui e cambiare alcune cose come lo stile come
hai visto, per sperimentare impostazioni diverse e scoprire dove è necessario modificare
l'app affinché funzioni correttamente.