1
00:00:02,240 --> 00:00:09,740
W tej nakładce programisty można również otworzyć jedną rzecz, która jest niezwykle pomocna przy debugowaniu

2
00:00:09,740 --> 00:00:11,030
interfejsu użytkownika

3
00:00:11,030 --> 00:00:17,780
i jest to opcja przełączania inspektora. Aby to przełączyć, zobaczysz tę nakładkę na dole tutaj,

4
00:00:17,780 --> 00:00:22,710
a teraz możesz kliknąć elementy w interfejsie użytkownika, aby uzyskać informacje na ich temat,

5
00:00:22,730 --> 00:00:24,260
na przykład tutaj przycisk.

6
00:00:24,260 --> 00:00:29,990
Teraz widzisz margines wokół przycisku, dopełnienie, widzisz jego pozycję w drzewie

7
00:00:30,440 --> 00:00:35,130
komponentów, widzisz pewną konfigurację przycisku, możesz także spojrzeć na

8
00:00:35,130 --> 00:00:38,780
otoczenie i dzięki temu poczuć, dlaczego wszystko

9
00:00:38,900 --> 00:00:45,200
jest ułożone oni są ekranem. Zawsze możesz to zamknąć ponownie, otwierając nakładkę programisty,

10
00:00:45,200 --> 00:00:51,410
a następnie ponownie klikając przycisk inspektora przełączania, i oczywiście jest to również dostępne tutaj na iOS, gdzie możesz

11
00:00:51,410 --> 00:00:56,180
również poczuć, jak rzeczy są ustawione i dlaczego są ustawione w ten sposób.

12
00:00:56,180 --> 00:01:02,670
Istnieje jednak jeszcze lepsze narzędzie do sprawdzania tego, dlatego zamknę to tutaj i to

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

14
00:01:05,060 --> 00:01:10,580
Możesz wyszukać debuger React Native i powinieneś znaleźć tę stronę github tutaj, a

15
00:01:10,580 --> 00:01:18,280
na tej stronie możesz pobrać debuger React Native. Znajdziesz instrukcje instalacji tutaj i możesz po prostu przejść

16
00:01:18,780 --> 00:01:21,070
na stronę wydania na końcu,

17
00:01:24,380 --> 00:01:27,990
aby pobrać jeden z tych plików binarnych dla

18
00:01:27,990 --> 00:01:35,070
systemu operacyjnego, więc dla Windows, plik exe tutaj, plik instalacyjny, dla macOS, plik dmg i tak dalej.

19
00:01:35,070 --> 00:01:37,860
Są to różne rzeczy, które

20
00:01:37,890 --> 00:01:46,460
możesz pobrać, pójdę z plikiem dmg, aby pobrać tutaj najnowszą wersję, zapisz to i poczekaj na zakończenie pobierania, a

21
00:01:46,460 --> 00:01:53,730
następnie pozwól mi po prostu wykonać to i zakończyć instalację, po prostu przeglądając instalator lub w

22
00:01:53,730 --> 00:02:00,000
moim przypadku tutaj na macOS, po prostu przeciągając go do katalogu aplikacji, a teraz

23
00:02:00,000 --> 00:02:07,620
może otworzyć tutaj debugger React Native tutaj i tutaj. Teraz to nie działa, ponieważ aby

24
00:02:07,620 --> 00:02:12,410
to zadziałało, musisz włączyć zdalne debugowanie Javascript na urządzeniach, tak

25
00:02:12,420 --> 00:02:16,820
jak zrobiliśmy to wcześniej, aby debugować to w Chrome.

26
00:02:16,820 --> 00:02:22,270
Teraz to zasadniczo zastępuje to doświadczenie debugowania Chrome lub możesz je ulepszyć.

27
00:02:22,280 --> 00:02:30,140
Teraz, gdy to się otworzy, naciśnij klawisz t na Macu lub kontroluj t na Windows lub Linux tutaj,

28
00:02:30,140 --> 00:02:38,690
aby otworzyć nową kartę i otworzyć i potwierdzić ten port debugowania React Native, z którego wcześniej korzystała również karta

29
00:02:38,690 --> 00:02:46,730
Chrome, i potwierdź to, a teraz próbuje się połączyć tam i aby osiągnąć sukces, otwórz narzędzia programistyczne, powiedzmy

30
00:02:46,730 --> 00:02:49,920
teraz na Androida i zdalnie debuguj

31
00:02:50,000 --> 00:02:57,030
Javascript, a teraz powinno się to połączyć tutaj, a zobaczysz teraz wyjście konsoli w narzędziach debuggera.

32
00:02:57,020 --> 00:03:05,240
Zobaczysz również, jeśli rozwinę to, że w źródłach możesz ponownie zanurzyć się w kodzie tutaj, jeśli chcesz tak jak poprzednio, a duża

33
00:03:05,250 --> 00:03:05,960
różnica

34
00:03:06,650 --> 00:03:10,520
oczywiście nie polega na tym, że możesz to zrobić, ponieważ

35
00:03:10,520 --> 00:03:15,770
to samo możesz zrobić w przeglądarce, ale tutaj masz ładne narzędzia po lewej stronie.

36
00:03:15,770 --> 00:03:17,950
Więc nadal możesz oczywiście ustawić

37
00:03:17,960 --> 00:03:23,480
punkty przerwania i wszystko, ale tutaj masz już narzędzia do debugowania Redux i nie

38
00:03:23,480 --> 00:03:28,790
używamy tutaj Redux, więc są dość puste, nic się tu nie dzieje, ale

39
00:03:28,790 --> 00:03:37,760
na dole, masz je narzędzie do debugowania elementów, a to pozwala ci odkryć kod React Native jsx, że tak powiem, więc twój element,

40
00:03:37,790 --> 00:03:45,140
twoje drzewo komponentów w tym przyjemnym interfejsie użytkownika, który jest zdecydowanie ładniejszy niż inspektor, który możesz tutaj przełączać, ponieważ

41
00:03:45,140 --> 00:03:52,660
teraz tutaj naprawdę możesz mieć zobacz co się dzieje. Możesz zanurzyć się w komponencie głównym, a następnie

42
00:03:52,660 --> 00:04:00,200
tam znaleźć nasz komponent aplikacji, a tam znajdujemy nasz widok za pomocą tego przycisku, możemy kliknąć

43
00:04:00,200 --> 00:04:06,080
przycisk i zobaczyć rekwizyty, których używamy na przycisku, takie jak onPress i tytuł,

44
00:04:07,720 --> 00:04:09,170
który ustaliliśmy.

45
00:04:09,250 --> 00:04:14,020
Możemy kliknąć własny komponent, w którym widzimy rekwizyty, które tam przesyłamy, możemy nawet

46
00:04:14,140 --> 00:04:18,720
zmienić widoczny rekwizyt, aby przełączyć ten modal w ten sposób, jeśli chcemy, więc

47
00:04:18,790 --> 00:04:20,220
to naprawdę miłe.

48
00:04:20,290 --> 00:04:25,070
Widzimy używane przez nas haki, takie jak stan, którym obecnie zarządzamy w naszym

49
00:04:25,150 --> 00:04:31,540
komponencie, a jeśli otworzę ten modal tutaj, zobaczysz ten stan, rekwizyty tutaj się zmienią, a jeśli zacznę pisać tutaj,

50
00:04:31,540 --> 00:04:37,870
na przykład naucz się React Native , zobaczysz, że to również aktualizuje się tutaj po prawej stronie, na

51
00:04:37,870 --> 00:04:39,220
przykład niewielkie opóźnienie,

52
00:04:39,280 --> 00:04:42,730
ale to nie powinno być problemem, więc to naprawdę fajne.

53
00:04:42,820 --> 00:04:46,600
Możemy to dodać i zobaczyć zmiany stanu tutaj, możemy

54
00:04:46,600 --> 00:04:51,340
oczywiście zanurzyć się głębiej w nasze dane wejściowe celu, aby zobaczyć modal tutaj.

55
00:04:51,400 --> 00:04:57,490
Możesz eksplorować FlatList i jej skonfigurowane elementy, a jeśli chcesz, możesz zagłębić się głębiej

56
00:04:57,490 --> 00:05:04,600
w ten widok, więc naprawdę możesz tam zrobić wiele rzeczy i możesz ogólnie eksplorować swoje drzewo komponentów,

57
00:05:04,660 --> 00:05:10,780
aby dowiedzieć się, co się dzieje. W elementach, w których bezpośrednio dodałeś styl, na przykład w

58
00:05:10,780 --> 00:05:11,970
widoku otaczającym, na

59
00:05:11,980 --> 00:05:17,320
przykład w którym ustawiłem tę dopełnienie, możesz nawet sprawdzić styl i nie tylko zobaczyć styl, ale także go

60
00:05:17,320 --> 00:05:18,960
zmienić, na przykład, aby zwiększyć

61
00:05:19,030 --> 00:05:24,010
dopełnienie lub zmniejszyć go, a to daje łatwy sposób testowania różnych wyglądów i układów na ekranie, aby

62
00:05:24,010 --> 00:05:27,190
dowiedzieć się, co jest dla Ciebie dobre i co chcesz zmienić.

63
00:05:27,250 --> 00:05:33,310
Możesz również przejść do zakładki profilowania tutaj i rozpocząć sesję profilowania, a następnie zrobić coś na

64
00:05:33,310 --> 00:05:39,760
ekranie, na przykład otworzyć i zamknąć modal i zatrzymać to, a otrzymasz domyślną obsługę narzędzi programistycznych React,

65
00:05:39,760 --> 00:05:45,400
w której zobaczysz, które z twoich komponentów były przemalowałeś i możesz w to zagłębić się,

66
00:05:45,400 --> 00:05:51,640
aby dowiedzieć się, co zostało przemalowane, jakie podpory miał w tym czasie i ile cykli ponownego renderowania

67
00:05:51,640 --> 00:05:57,070
musiałeś na przykład dowiedzieć się, czy trwa niepotrzebna odmalowanie, oczywiście trochę coś bardziej zaawansowanego

68
00:05:57,070 --> 00:06:02,800
do zrobienia i coś, co możesz zrobić, gdy zbliżasz się do ukończenia aplikacji, aby upewnić

69
00:06:02,800 --> 00:06:08,230
się, że optymalizujesz wydajność i unikasz niepotrzebnych cykli renderowania, ale te narzędzia mogą być

70
00:06:08,230 --> 00:06:13,870
naprawdę pomocne w wykrywaniu małe problemy z aplikacją i upewnienie się, że wszystko działa tak,

71
00:06:13,870 --> 00:06:16,360
jak powinno działać w Twojej aplikacji.

72
00:06:16,360 --> 00:06:20,890
Teraz jeszcze jedna fajna rzecz, którą możesz zrobić za pomocą debugera React Native, możesz kliknąć

73
00:06:21,130 --> 00:06:24,110
prawym przyciskiem myszy w dowolnym miejscu tutaj, powiedzmy tutaj

74
00:06:24,250 --> 00:06:29,800
i możesz włączyć inspekcję sieci, a jeśli to zrobisz, możesz przejść do karty sieci, a zobaczysz wychodzące żądania sieciowe.

75
00:06:29,800 --> 00:06:35,770
Teraz są to tylko zapytania związane z debugowaniem, ale później w trakcie dodawania własnych żądań

76
00:06:35,770 --> 00:06:42,070
sieciowych, w których wysyłamy żądania do naszego własnego serwera internetowego, możemy nawet je sprawdzić i

77
00:06:42,070 --> 00:06:47,140
sprawdzić, czy wysyłamy i otrzymywanie właściwych danych, co w innym przypadku byłoby

78
00:06:47,380 --> 00:06:48,560
dość trudne

79
00:06:48,580 --> 00:06:55,480
w przypadku natywnych aplikacji, tutaj jest bardzo proste. Debuger React Native to naprawdę fajne narzędzie do przeglądania aplikacji, ustawiania punktów

80
00:06:55,720 --> 00:07:02,860
przerwania, przeglądania konsoli, przeglądania drzewa komponentów, przeglądania stylów, które tam używasz i wiele więcej. To naprawdę pozwala zanurzyć się głęboko w

81
00:07:02,860 --> 00:07:10,570
kodzie aplikacji, w interfejsie użytkownika, w logice i dowiedzieć się, czy wszystko działa tak, jak powinno, a

82
00:07:10,660 --> 00:07:15,490
nawet możesz wejść tutaj i zmienić niektóre elementy, takie jak styl,

83
00:07:15,490 --> 00:07:21,220
jak widziałeś, aby eksperymentuj z różnymi ustawieniami i dowiedz się, gdzie musisz poprawić

84
00:07:21,220 --> 00:07:23,380
aplikację, aby działała poprawnie.