1
00:00:02,240 --> 00:00:09,740
Jetzt gibt es auch eine Sache in diesem Entwickler-Overlay, die Sie öffnen können, die für das Debuggen Ihrer Benutzeroberfläche äußerst

2
00:00:09,740 --> 00:00:11,030
hilfreich ist, und

3
00:00:11,030 --> 00:00:17,780
das ist die Option zum Umschalten des Inspektors. Um dies umzuschalten, sehen Sie diese Überlagerung unten hier und

4
00:00:17,780 --> 00:00:22,710
jetzt können Sie auf Elemente in Ihrer Benutzeroberfläche klicken, um Informationen darüber zu erhalten, zum

5
00:00:22,730 --> 00:00:24,260
Beispiel hier die Schaltfläche.

6
00:00:24,260 --> 00:00:29,990
Jetzt sehen Sie den Rand um die Schaltfläche, die Polsterung, Sie sehen die Position im Komponentenbaum,

7
00:00:30,440 --> 00:00:35,130
Sie sehen eine Konfiguration der Schaltfläche und Sie können auch einen Blick auf die

8
00:00:35,130 --> 00:00:38,780
Umgebung werfen und erhalten so ein Gefühl dafür, warum die

9
00:00:38,900 --> 00:00:45,200
Dinge angeordnet sind der Bildschirm, den sie sind. Sie können dies jederzeit wieder schließen, indem Sie das

10
00:00:45,200 --> 00:00:51,410
Entwickler-Overlay öffnen und dann erneut auf Toggle Inspector klicken. Dies ist natürlich auch hier unter iOS verfügbar, wo Sie auch

11
00:00:51,410 --> 00:00:56,180
ein Gefühl dafür bekommen, wie Dinge positioniert sind und warum sie auf diese Weise positioniert sind.

12
00:00:56,180 --> 00:01:02,670
Es gibt jedoch ein noch besseres Tool, um dies zu überprüfen, und deshalb werde ich dies hier schließen, und

13
00:01:02,690 --> 00:01:04,800
das ist der React Native-Debugger.

14
00:01:05,060 --> 00:01:10,580
Sie können nach dem React Native-Debugger suchen. Diese Github-Seite finden Sie hier. Auf

15
00:01:10,580 --> 00:01:18,280
dieser Seite können Sie den React Native-Debugger herunterladen. Installationsanweisungen finden Sie hier und Sie können einfach

16
00:01:18,780 --> 00:01:21,070
auf die Release-Seite am

17
00:01:24,380 --> 00:01:27,990
Ende hier gehen, um eine dieser Binärdateien für

18
00:01:27,990 --> 00:01:35,070
Ihr Betriebssystem herunterzuladen. Für Windows also exe-Datei hier, Setup-Datei, für macOS, eine dmg-Datei und so weiter.

19
00:01:35,070 --> 00:01:37,860
Das sind also verschiedene Dinge, die

20
00:01:37,890 --> 00:01:46,460
Sie herunterladen können. Ich werde mit der dmg-Datei die neueste Version hier herunterladen, diese speichern und warten, bis der Download abgeschlossen ist.

21
00:01:46,460 --> 00:01:53,730
Lassen Sie mich dies dann einfach ausführen und die Installation beenden, indem Sie einfach durch die gehen Installer oder

22
00:01:53,730 --> 00:02:00,000
in meinem Fall hier unter MacOS, ziehen Sie dies einfach in das Anwendungsverzeichnis und jetzt kann

23
00:02:00,000 --> 00:02:07,620
es den React Native Debugger hier und hier öffnen. Derzeit funktioniert es nicht, da dies

24
00:02:07,620 --> 00:02:12,410
das Remote-Javascript-Debugging auf den Geräten aktivieren muss, genau wie

25
00:02:12,420 --> 00:02:16,820
zuvor, um dies in Chrome zu debuggen.

26
00:02:16,820 --> 00:02:22,270
Dies ersetzt im Wesentlichen das Chrome-Debugging-Erlebnis, das Sie sagen oder verbessern könnten.

27
00:02:22,280 --> 00:02:30,140
Nachdem dies geöffnet wurde, drücken Sie hier den Befehl t auf dem Mac oder steuern Sie t unter Windows oder

28
00:02:30,140 --> 00:02:38,690
Linux, um einen neuen Tab zu öffnen und den React Native-Debugger-Port zu öffnen und zu bestätigen, den der Chrome-Tab zuvor ebenfalls verwendet

29
00:02:38,690 --> 00:02:46,730
hat, und bestätigen Sie dies. Jetzt wird versucht, eine Verbindung herzustellen Um dies erfolgreich zu machen, öffnen Sie Ihre Entwicklertools, sagen

30
00:02:46,730 --> 00:02:49,920
wir jetzt auf Android, und debuggen Sie Javascript

31
00:02:50,000 --> 00:02:57,030
remote. Jetzt sollte dies hier eine Verbindung herstellen, und Sie sehen Ihre Konsolenausgabe jetzt hier in den Debugger-Tools.

32
00:02:57,020 --> 00:03:05,240
Sie werden auch sehen, wenn ich dies erweitere, dass Sie in Quellen hier wieder in Ihren Code eintauchen können, wenn Sie dies wie zuvor möchten, und der große

33
00:03:05,250 --> 00:03:05,960
Unterschied besteht

34
00:03:06,650 --> 00:03:10,520
natürlich nicht darin, dass Sie dies tun können, weil dies das gleiche ist,

35
00:03:10,520 --> 00:03:15,770
was Sie tun könnten im Browser aber das hier, Sie haben jetzt die hübschen ordentlichen Werkzeuge hier links.

36
00:03:15,770 --> 00:03:17,950
Sie können also natürlich immer

37
00:03:17,960 --> 00:03:23,480
noch Haltepunkte und alles setzen, aber hier haben Sie jetzt Ihre Redux-Debugging-Tools und wir verwenden

38
00:03:23,480 --> 00:03:28,790
Redux hier nicht, also sind sie ziemlich leer, hier ist nichts los, aber unten

39
00:03:28,790 --> 00:03:37,760
haben Sie diese Das Debugging-Tool für Elemente und dies ermöglicht es Ihnen, Ihren React Native-JSX-Code sozusagen zu erkunden, also Ihr Element, Ihren Komponentenbaum in

40
00:03:37,790 --> 00:03:45,140
dieser netten Benutzeroberfläche, die definitiv besser ist als der Inspektor, den Sie hier umschalten können, denn jetzt können Sie hier

41
00:03:45,140 --> 00:03:52,660
wirklich einen haben Schau dir an, was los ist. Sie können in die Root-Komponente eintauchen, um dort unten unsere

42
00:03:52,660 --> 00:04:00,200
App-Komponente zu finden. Dort finden wir unsere Ansicht mit dieser Schaltfläche. Wir können auf die Schaltfläche klicken und sehen die

43
00:04:00,200 --> 00:04:06,080
Requisiten, die wir auf der Schaltfläche verwenden, wie z. B. onPress und der Titel, den

44
00:04:07,720 --> 00:04:09,170
wir gesetzt haben.

45
00:04:09,250 --> 00:04:14,020
Wir können auf unsere eigene Komponente klicken, wo wir die Requisiten sehen, die wir dort weiterleiten.

46
00:04:14,140 --> 00:04:18,720
Wir können sogar die sichtbare Requisite ändern, um dieses Modal so umzuschalten, wenn wir wollen, also

47
00:04:18,790 --> 00:04:20,220
ist das wirklich schön.

48
00:04:20,290 --> 00:04:25,070
Wir sehen die Hooks, die wir dort verwenden, wie den Status, den wir derzeit in

49
00:04:25,150 --> 00:04:31,540
unserer Komponente verwalten, und wenn ich dieses Modal hier öffne, sehen Sie diesen Status, die Requisiten hier ändern sich und wenn

50
00:04:31,540 --> 00:04:37,870
ich hier anfange zu tippen, wie React Native lernen Sie werden sehen, dass dies auch hier rechts aktualisiert wird, wie

51
00:04:37,870 --> 00:04:39,220
eine leichte Verzögerung,

52
00:04:39,280 --> 00:04:42,730
aber das sollte kein Problem sein, also ist das wirklich ordentlich.

53
00:04:42,820 --> 00:04:46,600
Wir können dies hinzufügen und die Zustandsänderungen hier sehen. Wir

54
00:04:46,600 --> 00:04:51,340
können natürlich tiefer in unsere Zieleingabe eintauchen, um das Modal hier zu sehen.

55
00:04:51,400 --> 00:04:57,490
Sie können die FlatList und die dort konfigurierten Elemente erkunden und tiefer in

56
00:04:57,490 --> 00:05:04,600
diese Ansicht eintauchen, wenn Sie möchten. Sie können also wirklich viel tun und dort Ihren Komponentenbaum

57
00:05:04,660 --> 00:05:10,780
erkunden, um herauszufinden, was los ist. Bei Elementen, bei denen Sie einen Stil direkt hinzugefügt haben, z.

58
00:05:10,780 --> 00:05:11,970
B. in der Umgebungsansicht,

59
00:05:11,980 --> 00:05:17,320
in der ich diese Auffüllung festgelegt habe, können Sie den Stil sogar überprüfen und nicht nur den Stil anzeigen, sondern

60
00:05:17,320 --> 00:05:18,960
auch ändern, um beispielsweise die Auffüllung

61
00:05:19,030 --> 00:05:24,010
zu erhöhen oder zu verringern bietet Ihnen eine einfache Möglichkeit, verschiedene Looks und Layouts auf dem Bildschirm zu testen,

62
00:05:24,010 --> 00:05:27,190
um herauszufinden, was für Sie gut aussieht und was Sie ändern möchten.

63
00:05:27,250 --> 00:05:33,310
Sie können hier auch zur Registerkarte "Profiler" gehen und eine Profilerstellungssitzung starten, dann auf dem Bildschirm etwas tun,

64
00:05:33,310 --> 00:05:39,760
z. B. das Modal öffnen und schließen und dies beenden. Hier erhalten Sie die Standarderfahrung der React Dev-Tools, in der

65
00:05:39,760 --> 00:05:45,400
Sie sehen, welche Ihrer Komponenten vorhanden waren neu gestrichen, und Sie können sich darauf einlassen, um eine

66
00:05:45,400 --> 00:05:51,640
Vorstellung davon zu bekommen, was neu gestrichen wurde, welche Requisiten es zu diesem Zeitpunkt hatte und wie viele Re-Render-Zyklen

67
00:05:51,640 --> 00:05:57,070
Sie beispielsweise durchführen mussten, um herauszufinden, ob unnötiges Neulackieren stattfindet, offensichtlich ein bisschen a Fortgeschrittenere Aufgaben

68
00:05:57,070 --> 00:06:02,800
und Aufgaben, die Sie möglicherweise ausführen möchten, wenn Sie kurz vor dem Abschluss Ihrer App stehen, um

69
00:06:02,800 --> 00:06:08,230
sicherzustellen, dass Sie die Leistung optimieren und unnötige Wiederholungszyklen vermeiden. Diese Tools können jedoch beim

70
00:06:08,230 --> 00:06:13,870
Erkennen sehr hilfreich sein kleine Probleme in Ihrer App und um sicherzustellen, dass alles so funktioniert, wie

71
00:06:13,870 --> 00:06:16,360
es in Ihrer App funktionieren sollte.

72
00:06:16,360 --> 00:06:20,890
Eine weitere coole Sache, die Sie mit dem React Native-Debugger machen können: Klicken Sie hier mit

73
00:06:21,130 --> 00:06:24,110
der rechten Maustaste, sagen wir hier, und aktivieren Sie

74
00:06:24,250 --> 00:06:29,800
die Netzwerkinspektion. Wenn Sie dies tun, können Sie zur Registerkarte "Netzwerk" wechseln und sehen, dass sie ausgehend angezeigt wird Netzwerkanforderungen.

75
00:06:29,800 --> 00:06:35,770
Jetzt sind dies alles nur Debugging-bezogene Anfragen, aber später im Kurs, wenn wir unsere eigenen Netzwerkanforderungen

76
00:06:35,770 --> 00:06:42,070
hinzufügen, wo wir Anfragen an unseren eigenen Webserver senden, können wir diese hier sogar überprüfen und sie

77
00:06:42,070 --> 00:06:47,140
untersuchen und sehen, ob wir senden und das Empfangen der richtigen Daten, was

78
00:06:47,380 --> 00:06:48,560
mit nativen

79
00:06:48,580 --> 00:06:55,480
Apps sonst ziemlich schwierig ist, ist hier ein Kinderspiel. Der React Native-Debugger ist also wirklich ein cooles Tool, um in Ihre App zu schauen,

80
00:06:55,720 --> 00:07:02,860
Haltepunkte festzulegen, die Konsole anzuzeigen, Ihren Komponentenbaum anzuzeigen, die dort verwendeten Stile anzuzeigen und vieles mehr. Es ermöglicht Ihnen wirklich, tief in Ihren Anwendungscode, in

81
00:07:02,860 --> 00:07:10,570
Ihre Benutzeroberfläche, in Ihre Logik einzutauchen und herauszufinden, ob alles so funktioniert, wie es funktionieren sollte, und Sie können sogar

82
00:07:10,660 --> 00:07:15,490
hier hineingehen und bestimmte Dinge wie das Styling ändern, wie Sie es gesehen

83
00:07:15,490 --> 00:07:21,220
haben Experimentieren Sie mit verschiedenen Einstellungen und finden Sie heraus, wo Sie Ihre App optimieren

84
00:07:21,220 --> 00:07:23,380
müssen, damit sie ordnungsgemäß funktioniert.