1
00:00:02,240 --> 00:00:09,740
Ora c'è anche una cosa in quella sovrapposizione dello sviluppatore che puoi aprire, che è estremamente utile per il

2
00:00:09,740 --> 00:00:11,030
debug dell'interfaccia utente

3
00:00:11,030 --> 00:00:17,780
e questa è l'opzione ispettore attiva / disattiva. Per attivare questa opzione, vedrai questo overlay in basso qui

4
00:00:17,780 --> 00:00:22,710
e ora puoi fare clic sugli elementi nell'interfaccia utente per ottenere informazioni su di essi, ad

5
00:00:22,730 --> 00:00:24,260
esempio qui il pulsante.

6
00:00:24,260 --> 00:00:29,990
Ora vedi il margine attorno al pulsante, il padding, vedi la sua posizione nell'albero

7
00:00:30,440 --> 00:00:35,130
dei componenti, vedi una configurazione del pulsante e puoi anche dare un'occhiata

8
00:00:35,130 --> 00:00:38,780
ai dintorni e quindi avere un'idea del perché le

9
00:00:38,900 --> 00:00:45,200
cose sono disposte su lo schermo sono. Puoi sempre chiuderlo di nuovo aprendo l'overlay dello sviluppatore

10
00:00:45,200 --> 00:00:51,410
e quindi facendo nuovamente clic su Attiva / Disattiva ispettore e, naturalmente, è disponibile anche qui su iOS, dove puoi

11
00:00:51,410 --> 00:00:56,180
anche avere un'idea di come sono posizionate le cose e perché sono posizionate in quel modo.

12
00:00:56,180 --> 00:01:02,670
Tuttavia, esiste uno strumento ancora migliore per ispezionarlo e quindi lo chiuderò qui e questo è

13
00:01:02,690 --> 00:01:04,800
il debugger React Native.

14
00:01:05,060 --> 00:01:10,580
Puoi cercare il debugger di React Native e dovresti trovare questa pagina di github qui e

15
00:01:10,580 --> 00:01:18,280
su questa pagina, puoi scaricare il debugger di React Native. Puoi trovare le istruzioni di installazione qui e puoi semplicemente andare

16
00:01:18,780 --> 00:01:21,070
alla pagina di rilascio alla

17
00:01:24,380 --> 00:01:27,990
fine qui per scaricare uno di questi binari per il

18
00:01:27,990 --> 00:01:35,070
tuo sistema operativo, quindi per Windows, file exe qui, file di installazione, per macOS, un file dmg e così via.

19
00:01:35,070 --> 00:01:37,860
Quindi queste sono diverse cose che

20
00:01:37,890 --> 00:01:46,460
puoi scaricare, andrò con il file dmg per scaricare l'ultima versione qui, salvare questo e attendere che il download finisca

21
00:01:46,460 --> 00:01:53,730
e poi lasciami semplicemente eseguire questo e finire l'installazione semplicemente camminando attraverso il programma di installazione o

22
00:01:53,730 --> 00:02:00,000
nel mio caso qui su macOS, trascinandolo semplicemente nella directory delle applicazioni e ora può

23
00:02:00,000 --> 00:02:07,620
aprire il debugger React Native qui ed eccolo qui. Ora, non funziona in questo momento perché per

24
00:02:07,620 --> 00:02:12,410
farlo funzionare, è necessario abilitare il debug Javascript remoto sui dispositivi, proprio

25
00:02:12,420 --> 00:02:16,820
quello che abbiamo fatto prima per eseguire il debug in Chrome.

26
00:02:16,820 --> 00:02:22,270
Ora questo essenzialmente sostituisce questa esperienza di debug di Chrome che potresti dire o migliorarla.

27
00:02:22,280 --> 00:02:30,140
Ora con questo aperto, premi il comando t su Mac o controlla t su Windows o Linux qui per aprire

28
00:02:30,140 --> 00:02:38,690
una nuova scheda e aprire e confermare la porta del debugger React Native che la scheda Chrome ha usato anche prima e

29
00:02:38,690 --> 00:02:46,730
confermare e ora sta cercando di connettersi lì e per farlo, apri i tuoi strumenti di sviluppo, diciamo ora su Android

30
00:02:46,730 --> 00:02:49,920
e esegui il debug di JavaScript da remoto

31
00:02:50,000 --> 00:02:57,030
e ora questo dovrebbe connettersi qui e vedrai l'output della tua console qui ora negli strumenti di debugger.

32
00:02:57,020 --> 00:03:05,240
Vedrai anche, se espanderò questo, che nelle fonti, puoi di nuovo tuffarti nel tuo codice qui se vuoi farlo proprio come prima e la

33
00:03:05,250 --> 00:03:05,960
grande differenza

34
00:03:06,650 --> 00:03:10,520
ovviamente non è che puoi farlo perché è lo stesso che

35
00:03:10,520 --> 00:03:15,770
potresti fare nel browser, ma qui, ora hai gli strumenti piuttosto accurati qui a sinistra.

36
00:03:15,770 --> 00:03:17,950
Quindi puoi ovviamente impostare punti

37
00:03:17,960 --> 00:03:23,480
di interruzione e tutto, ma qui, ora per uno hai i tuoi strumenti di debug di

38
00:03:23,480 --> 00:03:28,790
Redux e non stiamo usando Redux qui, quindi sono piuttosto vuoti, nulla sta succedendo qui

39
00:03:28,790 --> 00:03:37,760
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

40
00:03:37,790 --> 00:03:45,140
il tuo elemento, l'albero dei componenti in questa bella interfaccia utente che è decisamente più bello dell'ispettore che potresti attivare qui

41
00:03:45,140 --> 00:03:52,660
perché ora qui puoi davvero avere un guarda cosa sta succedendo. Puoi immergerti nel componente root per trovare il

42
00:03:52,660 --> 00:04:00,200
nostro componente app laggiù e lì, troviamo la nostra vista con quel pulsante, possiamo fare clic sul pulsante

43
00:04:00,200 --> 00:04:06,080
e vediamo i puntelli che stiamo usando sul pulsante, come suPress e il titolo

44
00:04:07,720 --> 00:04:09,170
che abbiamo impostato.

45
00:04:09,250 --> 00:04:14,020
Possiamo fare clic sul nostro componente dove vediamo gli oggetti di scena che stiamo inoltrando lì,

46
00:04:14,140 --> 00:04:18,720
possiamo anche cambiare l'elica visibile per attivare questo modale in questo modo se vogliamo,

47
00:04:18,790 --> 00:04:20,220
quindi è davvero bello.

48
00:04:20,290 --> 00:04:25,070
Vediamo gli hook che stiamo usando lì, come lo stato che stiamo attualmente gestendo

49
00:04:25,150 --> 00:04:31,540
nel nostro componente e se apro quel modale qui, vedi quello stato, i puntelli qui cambiano e se inizio

50
00:04:31,540 --> 00:04:37,870
a digitare qui, come imparare React Native , vedrai che questo si aggiorna anche qui a destra, come un

51
00:04:37,870 --> 00:04:39,220
leggero ritardo ma

52
00:04:39,280 --> 00:04:42,730
questo non dovrebbe essere un problema, quindi è davvero pulito.

53
00:04:42,820 --> 00:04:46,600
Possiamo aggiungere questo e vedere i cambiamenti di stato qui, possiamo

54
00:04:46,600 --> 00:04:51,340
ovviamente immergerci più a fondo nel nostro input obiettivo per vedere qui il modale.

55
00:04:51,400 --> 00:04:57,490
Puoi esplorare la FlatList e ciò che è configurato lì e approfondire questa vista se

56
00:04:57,490 --> 00:05:04,600
vuoi, quindi davvero un sacco di cose che puoi fare lì e puoi esplorare il tuo albero dei

57
00:05:04,660 --> 00:05:10,780
componenti lì per scoprire cosa sta succedendo. Sugli elementi in cui hai aggiunto direttamente uno stile, come

58
00:05:10,780 --> 00:05:11,970
nella vista circostante,

59
00:05:11,980 --> 00:05:17,320
ad esempio dove ho impostato questo padding, puoi persino ispezionare lo stile e non solo vedere lo stile ma

60
00:05:17,320 --> 00:05:18,960
anche cambiarlo, ad esempio per aumentare

61
00:05:19,030 --> 00:05:24,010
il padding o ridurlo e questo ti offre un modo semplice per testare diversi aspetti e layout sullo

62
00:05:24,010 --> 00:05:27,190
schermo per scoprire cosa ti sta bene e cosa vuoi cambiare.

63
00:05:27,250 --> 00:05:33,310
Puoi anche andare alla scheda del profiler qui e avviare una sessione di profilazione, quindi fare qualcosa sullo schermo

64
00:05:33,310 --> 00:05:39,760
come aprire e chiudere il modale e fermarlo e otterrai l'esperienza predefinita degli strumenti di sviluppo React qui dove vedi

65
00:05:39,760 --> 00:05:45,400
quali dei tuoi componenti erano riverniciato e puoi immergerti in quello per avere un'idea di ciò che

66
00:05:45,400 --> 00:05:51,640
è stato ridipinto, quali oggetti di scena aveva in quel momento e quanti cicli di rilavorazione dovevi, ad esempio, scoprire

67
00:05:51,640 --> 00:05:57,070
se ci sono ridipinture inutili in corso, ovviamente un po 'di cose più avanzate da fare

68
00:05:57,070 --> 00:06:02,800
e qualcosa che potresti voler fare quando sei più vicino a finire la tua app, per assicurarti di

69
00:06:02,800 --> 00:06:08,230
ottimizzare le prestazioni e di evitare cicli di re-rendering non necessari, ma questi strumenti possono davvero

70
00:06:08,230 --> 00:06:13,870
essere utili per individuare piccoli problemi nella tua app e per assicurarti che tutto funzioni nel modo

71
00:06:13,870 --> 00:06:16,360
in cui dovrebbe funzionare nella tua app.

72
00:06:16,360 --> 00:06:20,890
Ora un'altra cosa interessante che puoi fare con il debugger React Native, puoi fare clic con il

73
00:06:21,130 --> 00:06:24,110
tasto destro in qualsiasi punto qui, diciamo qui e puoi

74
00:06:24,250 --> 00:06:29,800
abilitare l'ispezione della rete e se lo fai, puoi andare alla scheda della rete e vedrai in uscita richieste di rete.

75
00:06:29,800 --> 00:06:35,770
Ora queste sono solo richieste relative al debug, ma più avanti nel corso quando aggiungeremo le nostre

76
00:06:35,770 --> 00:06:42,070
richieste di rete, dove inviamo richieste al nostro server web, possiamo persino ispezionarle qui e guardarle e vedere

77
00:06:42,070 --> 00:06:47,140
se stiamo inviando e ricevere i dati giusti, cosa che altrimenti sarebbe piuttosto difficile

78
00:06:47,380 --> 00:06:48,560
da fare con

79
00:06:48,580 --> 00:06:55,480
le app native, qui è un gioco da ragazzi. Quindi il debugger React Native è davvero uno strumento interessante per esaminare la tua app, impostare i

80
00:06:55,720 --> 00:07:02,860
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

81
00:07:02,860 --> 00:07:10,570
codice dell'applicazione, nell'interfaccia utente, nella logica e scoprire se tutto funziona come dovrebbe funzionare e puoi anche

82
00:07:10,660 --> 00:07:15,490
andare qui e cambiare alcune cose come lo stile come

83
00:07:15,490 --> 00:07:21,220
hai visto, per sperimentare impostazioni diverse e scoprire dove è necessario modificare

84
00:07:21,220 --> 00:07:23,380
l'app affinché funzioni correttamente.