A volte, il solo log della console non ti porta così lontano, hai
bisogno di più aiuto e in questi casi puoi eseguire il debug del tuo codice da remoto.
Ora, per questo, devi aprire il menu di debug su questi emulatori o anche su
dispositivi reali se lavori con quelli. Puoi farlo premendo sul simulatore
iOS, il comando d e aprirà questo menu qui, su Android, premi comando o controllo m e aprirà questo menu.
Ora vedi alcune opzioni lì e daremo un'occhiata a quelle importanti in questo modulo.
L'opzione che ora sceglieremo è il debug js da remoto.
Se si preme questo, nel browser dovrebbe aprirsi una nuova scheda che passava automaticamente a localhost 1901 nel mio caso, l'interfaccia
utente del debugger della barra, che dovrebbe aprirsi automaticamente. Ora, affinché funzioni correttamente, assicurati che nei tuoi
strumenti di sviluppo expo, hai impostato la connessione come allarme o locale, non tunnel altrimenti questo sarà super lento
e ora ciò che ti dà questo debugger, questa nuova scheda è che puoi apri gli strumenti di sviluppo di Chrome ora
con il collegamento che dovresti vedere qua e là, ora vedi anche lo stesso registro
della console che stai arrivando qui, quindi ora hai anche un'altra console che puoi
esaminare in cui potrebbe essere più comodo lavorare con , solo per mostrare rapidamente quell'esempio con
gli obiettivi del corso.
Se consolo il registro degli obiettivi del mio corso qui e lo salvo, questo viene ricostruito e ora vediamo l'array qui e possiamo
espanderlo.
Quindi potrebbe essere un po 'più conveniente
lavorare con, sostanzialmente come lo sai dallo sviluppo web nel
caso in cui tu sia uno sviluppatore web ma puoi anche fare di più.
Ad esempio, è possibile immergersi nelle fonti per immergersi nel codice sorgente e impostare i punti di interruzione. Semplicemente espandi questa cosa del debugger
worker qui, espandi queste cartelle e troverai la struttura delle cartelle con cui stai
lavorando, ad esempio
lì nella cartella degli utenti, troverai l'app. file js, trovi i componenti.
Quindi ora in app. js se apri quel file, vedrai il tuo codice mentre
lo scrivevi, quindi nella
versione non compilata che è fantastica perché è facile riconoscere il
tuo codice lì e ora qui, per esempio diciamo che vuoi fermare il codice quando stai per aggiungere un nuovo obiettivo, puoi
aggiungere un punto di interruzione facendo clic qui a sinistra del numero
di riga in modo da avere questo
segno blu e ora l'esecuzione del codice si interromperà la prossima volta che colpisci questa riga di codice qui.
Ora ho abilitato il debug sull'emulatore Android, quindi non si fermerà se lo provo
su iOS, si fermerà se lo provo su Android.
Avremmo potuto abilitarlo anche su iOS, qui con debug remoto js ma non l'ho fatto, quindi andiamo con
Android.
Puoi ignorare questo avviso
qui, puoi semplicemente scartarlo e ora premi aggiungi nuovo obiettivo e forse inserisci impara Reagisci nativo, fai clic su Aggiungi e ora vedi,
questo si blocca qui perché se torni agli strumenti di sviluppo, questo è ora in pausa, vedi che ora è evidenziato
in blu, viene superato e ora la cosa
bella è che puoi scorrere il tuo codice passo dopo passo con questi controlli qui, semplicemente giocare con
loro e puoi anche passare il mouse sopra le cose per guardare nel tuo codice, ad esempio
per vedere il valore corrente nel titolo dell'obiettivo.
Ora possiamo semplicemente progredire attraverso queste linee passo dopo passo con questo pulsante, puoi
entrare in una chiamata di funzione con questo pulsante o uscirne con questo pulsante e
puoi sempre riprendere l'esecuzione del codice con questo pulsante blu di riproduzione.
Questo può essere uno strumento molto potente per immergerti davvero profondamente nel tuo flusso di codice perché ti consente
di comprendere appieno cosa sta
succedendo, esaminare i tuoi valori in fase di esecuzione e ottenere il pieno controllo del tuo codice.
Ora, se vuoi saperne di più su come utilizzare gli strumenti di debug di Chrome, troverai un link utile allegato
a questa lezione che contiene ulteriori informazioni sugli strumenti di debug di Chrome.