1 00:00:02,300 --> 00:00:06,340 A volte, il solo log della console non ti porta così lontano, hai 2 00:00:06,380 --> 00:00:11,270 bisogno di più aiuto e in questi casi puoi eseguire il debug del tuo codice da remoto. 3 00:00:11,270 --> 00:00:17,750 Ora, per questo, devi aprire il menu di debug su questi emulatori o anche su 4 00:00:17,750 --> 00:00:23,650 dispositivi reali se lavori con quelli. Puoi farlo premendo sul simulatore 5 00:00:23,660 --> 00:00:34,030 iOS, il comando d e aprirà questo menu qui, su Android, premi comando o controllo m e aprirà questo menu. 6 00:00:34,030 --> 00:00:38,360 Ora vedi alcune opzioni lì e daremo un'occhiata a quelle importanti in questo modulo. 7 00:00:38,360 --> 00:00:41,780 L'opzione che ora sceglieremo è il debug js da remoto. 8 00:00:42,050 --> 00:00:48,290 Se si preme questo, nel browser dovrebbe aprirsi una nuova scheda che passava automaticamente a localhost 1901 nel mio caso, l'interfaccia 9 00:00:48,680 --> 00:00:54,700 utente del debugger della barra, che dovrebbe aprirsi automaticamente. Ora, affinché funzioni correttamente, assicurati che nei tuoi 10 00:00:54,690 --> 00:01:01,160 strumenti di sviluppo expo, hai impostato la connessione come allarme o locale, non tunnel altrimenti questo sarà super lento 11 00:01:01,160 --> 00:01:08,490 e ora ciò che ti dà questo debugger, questa nuova scheda è che puoi apri gli strumenti di sviluppo di Chrome ora 12 00:01:08,500 --> 00:01:13,650 con il collegamento che dovresti vedere qua e là, ora vedi anche lo stesso registro 13 00:01:14,790 --> 00:01:19,890 della console che stai arrivando qui, quindi ora hai anche un'altra console che puoi 14 00:01:19,890 --> 00:01:25,320 esaminare in cui potrebbe essere più comodo lavorare con , solo per mostrare rapidamente quell'esempio con 15 00:01:25,320 --> 00:01:26,930 gli obiettivi del corso. 16 00:01:26,940 --> 00:01:36,290 Se consolo il registro degli obiettivi del mio corso qui e lo salvo, questo viene ricostruito e ora vediamo l'array qui e possiamo 17 00:01:36,290 --> 00:01:37,040 espanderlo. 18 00:01:37,040 --> 00:01:39,050 Quindi potrebbe essere un po 'più conveniente 19 00:01:39,140 --> 00:01:41,420 lavorare con, sostanzialmente come lo sai dallo sviluppo web nel 20 00:01:41,420 --> 00:01:44,760 caso in cui tu sia uno sviluppatore web ma puoi anche fare di più. 21 00:01:44,780 --> 00:01:50,570 Ad esempio, è possibile immergersi nelle fonti per immergersi nel codice sorgente e impostare i punti di interruzione. Semplicemente espandi questa cosa del debugger 22 00:01:50,570 --> 00:01:56,870 worker qui, espandi queste cartelle e troverai la struttura delle cartelle con cui stai 23 00:01:56,900 --> 00:01:58,750 lavorando, ad esempio 24 00:01:58,820 --> 00:02:05,000 lì nella cartella degli utenti, troverai l'app. file js, trovi i componenti. 25 00:02:05,450 --> 00:02:10,950 Quindi ora in app. js se apri quel file, vedrai il tuo codice mentre 26 00:02:10,960 --> 00:02:12,510 lo scrivevi, quindi nella 27 00:02:12,550 --> 00:02:15,560 versione non compilata che è fantastica perché è facile riconoscere il 28 00:02:15,700 --> 00:02:21,880 tuo codice lì e ora qui, per esempio diciamo che vuoi fermare il codice quando stai per aggiungere un nuovo obiettivo, puoi 29 00:02:21,880 --> 00:02:25,350 aggiungere un punto di interruzione facendo clic qui a sinistra del numero 30 00:02:25,360 --> 00:02:27,370 di riga in modo da avere questo 31 00:02:27,370 --> 00:02:32,730 segno blu e ora l'esecuzione del codice si interromperà la prossima volta che colpisci questa riga di codice qui. 32 00:02:32,830 --> 00:02:36,930 Ora ho abilitato il debug sull'emulatore Android, quindi non si fermerà se lo provo 33 00:02:36,940 --> 00:02:39,980 su iOS, si fermerà se lo provo su Android. 34 00:02:40,000 --> 00:02:47,500 Avremmo potuto abilitarlo anche su iOS, qui con debug remoto js ma non l'ho fatto, quindi andiamo con 35 00:02:47,500 --> 00:02:48,250 Android. 36 00:02:48,310 --> 00:02:49,800 Puoi ignorare questo avviso 37 00:02:49,840 --> 00:02:57,340 qui, puoi semplicemente scartarlo e ora premi aggiungi nuovo obiettivo e forse inserisci impara Reagisci nativo, fai clic su Aggiungi e ora vedi, 38 00:02:57,340 --> 00:03:04,030 questo si blocca qui perché se torni agli strumenti di sviluppo, questo è ora in pausa, vedi che ora è evidenziato 39 00:03:04,060 --> 00:03:06,580 in blu, viene superato e ora la cosa 40 00:03:06,670 --> 00:03:12,610 bella è che puoi scorrere il tuo codice passo dopo passo con questi controlli qui, semplicemente giocare con 41 00:03:12,760 --> 00:03:18,400 loro e puoi anche passare il mouse sopra le cose per guardare nel tuo codice, ad esempio 42 00:03:18,400 --> 00:03:21,060 per vedere il valore corrente nel titolo dell'obiettivo. 43 00:03:21,070 --> 00:03:25,480 Ora possiamo semplicemente progredire attraverso queste linee passo dopo passo con questo pulsante, puoi 44 00:03:25,480 --> 00:03:30,220 entrare in una chiamata di funzione con questo pulsante o uscirne con questo pulsante e 45 00:03:31,210 --> 00:03:35,430 puoi sempre riprendere l'esecuzione del codice con questo pulsante blu di riproduzione. 46 00:03:38,030 --> 00:03:43,850 Questo può essere uno strumento molto potente per immergerti davvero profondamente nel tuo flusso di codice perché ti consente 47 00:03:43,850 --> 00:03:45,810 di comprendere appieno cosa sta 48 00:03:45,890 --> 00:03:51,240 succedendo, esaminare i tuoi valori in fase di esecuzione e ottenere il pieno controllo del tuo codice. 49 00:03:51,260 --> 00:03:56,960 Ora, se vuoi saperne di più su come utilizzare gli strumenti di debug di Chrome, troverai un link utile allegato 50 00:03:56,990 --> 00:04:01,040 a questa lezione che contiene ulteriori informazioni sugli strumenti di debug di Chrome.