W tej nakładce programisty można również otworzyć jedną rzecz, która jest niezwykle pomocna przy debugowaniu
interfejsu użytkownika
i jest to opcja przełączania inspektora. Aby to przełączyć, zobaczysz tę nakładkę na dole tutaj,
a teraz możesz kliknąć elementy w interfejsie użytkownika, aby uzyskać informacje na ich temat,
na przykład tutaj przycisk.
Teraz widzisz margines wokół przycisku, dopełnienie, widzisz jego pozycję w drzewie
komponentów, widzisz pewną konfigurację przycisku, możesz także spojrzeć na
otoczenie i dzięki temu poczuć, dlaczego wszystko
jest ułożone oni są ekranem. Zawsze możesz to zamknąć ponownie, otwierając nakładkę programisty,
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
również poczuć, jak rzeczy są ustawione i dlaczego są ustawione w ten sposób.
Istnieje jednak jeszcze lepsze narzędzie do sprawdzania tego, dlatego zamknę to tutaj i to
jest debugger React Native.
Możesz wyszukać debuger React Native i powinieneś znaleźć tę stronę github tutaj, a
na tej stronie możesz pobrać debuger React Native. Znajdziesz instrukcje instalacji tutaj i możesz po prostu przejść
na stronę wydania na końcu,
aby pobrać jeden z tych plików binarnych dla
systemu operacyjnego, więc dla Windows, plik exe tutaj, plik instalacyjny, dla macOS, plik dmg i tak dalej.
Są to różne rzeczy, które
możesz pobrać, pójdę z plikiem dmg, aby pobrać tutaj najnowszą wersję, zapisz to i poczekaj na zakończenie pobierania, a
następnie pozwól mi po prostu wykonać to i zakończyć instalację, po prostu przeglądając instalator lub w
moim przypadku tutaj na macOS, po prostu przeciągając go do katalogu aplikacji, a teraz
może otworzyć tutaj debugger React Native tutaj i tutaj. Teraz to nie działa, ponieważ aby
to zadziałało, musisz włączyć zdalne debugowanie Javascript na urządzeniach, tak
jak zrobiliśmy to wcześniej, aby debugować to w Chrome.
Teraz to zasadniczo zastępuje to doświadczenie debugowania Chrome lub możesz je ulepszyć.
Teraz, gdy to się otworzy, naciśnij klawisz t na Macu lub kontroluj t na Windows lub Linux tutaj,
aby otworzyć nową kartę i otworzyć i potwierdzić ten port debugowania React Native, z którego wcześniej korzystała również karta
Chrome, i potwierdź to, a teraz próbuje się połączyć tam i aby osiągnąć sukces, otwórz narzędzia programistyczne, powiedzmy
teraz na Androida i zdalnie debuguj
Javascript, a teraz powinno się to połączyć tutaj, a zobaczysz teraz wyjście konsoli w narzędziach debuggera.
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
różnica
oczywiście nie polega na tym, że możesz to zrobić, ponieważ
to samo możesz zrobić w przeglądarce, ale tutaj masz ładne narzędzia po lewej stronie.
Więc nadal możesz oczywiście ustawić
punkty przerwania i wszystko, ale tutaj masz już narzędzia do debugowania Redux i nie
używamy tutaj Redux, więc są dość puste, nic się tu nie dzieje, ale
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,
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ż
teraz tutaj naprawdę możesz mieć zobacz co się dzieje. Możesz zanurzyć się w komponencie głównym, a następnie
tam znaleźć nasz komponent aplikacji, a tam znajdujemy nasz widok za pomocą tego przycisku, możemy kliknąć
przycisk i zobaczyć rekwizyty, których używamy na przycisku, takie jak onPress i tytuł,
który ustaliliśmy.
Możemy kliknąć własny komponent, w którym widzimy rekwizyty, które tam przesyłamy, możemy nawet
zmienić widoczny rekwizyt, aby przełączyć ten modal w ten sposób, jeśli chcemy, więc
to naprawdę miłe.
Widzimy używane przez nas haki, takie jak stan, którym obecnie zarządzamy w naszym
komponencie, a jeśli otworzę ten modal tutaj, zobaczysz ten stan, rekwizyty tutaj się zmienią, a jeśli zacznę pisać tutaj,
na przykład naucz się React Native , zobaczysz, że to również aktualizuje się tutaj po prawej stronie, na
przykład niewielkie opóźnienie,
ale to nie powinno być problemem, więc to naprawdę fajne.
Możemy to dodać i zobaczyć zmiany stanu tutaj, możemy
oczywiście zanurzyć się głębiej w nasze dane wejściowe celu, aby zobaczyć modal tutaj.
Możesz eksplorować FlatList i jej skonfigurowane elementy, a jeśli chcesz, możesz zagłębić się głębiej
w ten widok, więc naprawdę możesz tam zrobić wiele rzeczy i możesz ogólnie eksplorować swoje drzewo komponentów,
aby dowiedzieć się, co się dzieje. W elementach, w których bezpośrednio dodałeś styl, na przykład w
widoku otaczającym, na
przykład w którym ustawiłem tę dopełnienie, możesz nawet sprawdzić styl i nie tylko zobaczyć styl, ale także go
zmienić, na przykład, aby zwiększyć
dopełnienie lub zmniejszyć go, a to daje łatwy sposób testowania różnych wyglądów i układów na ekranie, aby
dowiedzieć się, co jest dla Ciebie dobre i co chcesz zmienić.
Możesz również przejść do zakładki profilowania tutaj i rozpocząć sesję profilowania, a następnie zrobić coś na
ekranie, na przykład otworzyć i zamknąć modal i zatrzymać to, a otrzymasz domyślną obsługę narzędzi programistycznych React,
w której zobaczysz, które z twoich komponentów były przemalowałeś i możesz w to zagłębić się,
aby dowiedzieć się, co zostało przemalowane, jakie podpory miał w tym czasie i ile cykli ponownego renderowania
musiałeś na przykład dowiedzieć się, czy trwa niepotrzebna odmalowanie, oczywiście trochę coś bardziej zaawansowanego
do zrobienia i coś, co możesz zrobić, gdy zbliżasz się do ukończenia aplikacji, aby upewnić
się, że optymalizujesz wydajność i unikasz niepotrzebnych cykli renderowania, ale te narzędzia mogą być
naprawdę pomocne w wykrywaniu małe problemy z aplikacją i upewnienie się, że wszystko działa tak,
jak powinno działać w Twojej aplikacji.
Teraz jeszcze jedna fajna rzecz, którą możesz zrobić za pomocą debugera React Native, możesz kliknąć
prawym przyciskiem myszy w dowolnym miejscu tutaj, powiedzmy tutaj
i możesz włączyć inspekcję sieci, a jeśli to zrobisz, możesz przejść do karty sieci, a zobaczysz wychodzące żądania sieciowe.
Teraz są to tylko zapytania związane z debugowaniem, ale później w trakcie dodawania własnych żądań
sieciowych, w których wysyłamy żądania do naszego własnego serwera internetowego, możemy nawet je sprawdzić i
sprawdzić, czy wysyłamy i otrzymywanie właściwych danych, co w innym przypadku byłoby
dość trudne
w przypadku natywnych aplikacji, tutaj jest bardzo proste. Debuger React Native to naprawdę fajne narzędzie do przeglądania aplikacji, ustawiania punktów
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
kodzie aplikacji, w interfejsie użytkownika, w logice i dowiedzieć się, czy wszystko działa tak, jak powinno, a
nawet możesz wejść tutaj i zmienić niektóre elementy, takie jak styl,
jak widziałeś, aby eksperymentuj z różnymi ustawieniami i dowiedz się, gdzie musisz poprawić
aplikację, aby działała poprawnie.