React Native: Narzędzie do debugowania

0.62.2+

0:00Okej czyli uruchomiliśmy sobie naszą aplikację zarówno z poziomu naszych skryptów

0:04jaki z poziomu projektów natywnych no i teraz chciałbym wam pokazać

0:09w jaki sposób możemy w jakiś podstawowych debugować naszą

0:13aplikację do jakiejś podstawowej wersji no więc pierwszą informacją no to

0:17chcielibyśmy dostawać na przykład informacje o logach tak więc wyświetlmy sobie tutaj loga

0:21jakiegoś Start log

0:25i zobaczymy że nasza

0:29aplikacja w tej chwili jest tutaj uruchamiana na razie tylko w iOS-ie widzimy że nasz start

0:33log pojawił się w naszym w logach naszego serwera no i gdzieś

0:38tam na takich najprostszych rozwiązaniach to pewnie jest okej aczkolwiek no nie

0:44jest do końca wystarczające bo jesteśmy w terminalu nie mamy tutaj możliwości filtrowania wyszukiwania

0:49więc raczej to jest rozwiązanie na szybko jeśli chcielibyśmy tylko coś tam sprawdzi natomiast

0:53z drugie strony jesli tych logów byłoby więcej to ciężko byłoby się w tym wszystkim połapać tak

0:58więc mamy tutaj parę wiecej możliwości po pierwsze

1:02możemy sobie wywołać nasz panel gestem potrząśnięcia albo command d

1:07w OS X zdaje się że to jest command m na

1:12androidzie mamy parę tutaj opcji

1:16o pierwszym już powiedziałem to jest nasz reload który nam przeładowuje całą aplikację

1:20mamy jeszcze parę innych rzeczy mamy takie informacje

1:25jak performance monitor to jest coś co raczej

1:29w trakcie tego kursu nam się nie przyda aczkolwiek może wam się przydać kiedyś w przyszłości

1:33to w skrócie mówi o tym jak płynne są w tej chwili aplikacje

1:37czyli pokazuje nam nasz wontek UI-owy i JS-owy to jest coś o czym mówiłem w

1:42rozdziale o tym jak działa React Native i widzimy że w tej

1:46chwili oczywiście mamy 60 fps-ów i to jest nasza docelowa wartość którą chcemy osiągać

1:50to znaczy jeśli ta wartość spadnie do 50 paru to jeszcze nic strasznego się nie

1:54dzieje natomiast jeśli dojdziemy zobaczymy że podczas przechodzenia między ekranami dojedziemy tutaj do 20

1:58to najprawdopodobniej zaczynamy mieć jakiś problem ważne

2:04jest to że w przypadku zwłaszcza symulatora

2:08iOS-u to jest też istotna informacja mała

2:12szansa żebyśmy zeszli poniżej 60 fps-ów jeśli już to zejdziemy to dopiero

2:17w projekcie androidowym a to wynika z tego że nasz projekt jakby

2:21symulator iOS-a jest symulatorem to znaczy on tylko symuluje nasze środowisko ale korzysta

2:25z zasobów naszego komputera emulator natomiast teoretycznie bo to różnie bywa powinien

2:30emulować ograniczenia jakie ma dany telefon natomiast i tak

2:34najlepiej jeśli chodzi o takie rzeczy związane z performancem testować sobie na

2:38urządzeniu w praktyce wygląda to tak że my podczas deploymentu developmentu

2:43mamy jakiś telefon z androidem słabszy na którym testujemy

2:47wszystko wszystkie animacje z takim performance monitorem dopiero na nim tak naprawdę widać jak

2:51to wygląda bo jeśli byśmy całą aplikację robili na symulatorze albo

2:55na jakimś iphone nowym albo na flagowcu androida to tak naprawdę gdzieś

2:59tam zawężyli byśmy się i nie bylibyśmy w stanie zauważyć że w jakiś

3:03przypadkach może to stwarzać problem natomiast na

3:08tym etapie nam się to za bardzo nie przyda mamy tutaj możliwość konfigurowania naszego

3:12bundlera czyli jeśli z jakiegoś powodu chcielibyśmy łączymy się domyślnie z

3:17po local host jeśli chcielibyśmy coś zmienić to sobie możemy tutaj zmienić tego też nie będziemy na tym

3:21kursie tykać mamy możliwość z wyłączenia fast refresha

3:25to się może przydawać w sytuacji w której będziemy coś konfigurować

3:30zmieniać z naszym stanem i nie chcemy żeby nasza aplikacja się przeładowywała w tle bo

3:34będą wyświetlane cały czas jakieś błędy ale myślę że domyślnie możemy zostawić to włączone mamy

3:38taką opcję jak inspektor to działa na tej zasadzie że klikając

3:42na różne elementy możemy dowiedzieć się o marginesach

3:47o jakiś tam podstawowych informacjach mamy też informacje o networku

3:51i parę ogólnych informacji natomiast generalnie no

3:56nie jest to moje ulubione narzędzie do debugowania bo no nie jest to zbyt wygodne

4:00żeby to gdzieś tam wewnątrz tego symulatora nam latało więc raczej

4:04w praktyce się z tego nie korzysta i mamy taką opcję debug

4:08i ta opcja debug jest bardzo ciekawa jeśli sobie ją odpalimy to

4:12zauważymy uruchomi nam się osobna zakładka najprawdopodobniej w chrome

4:18w której będziemy mieli nasze logi tak jakby

4:22byśmy odpalili naszą stronę internetową czyli w tej chwili to co się stało ja mogę to

4:26jeszcze raz przeładować i pokazać zauważcie że mamy nasze logi

4:30o tutaj coś się nie zbudowało jeszcze raz odpalimy mamy

4:34nasz log start log i teraz to co się tej chwili dzieje to nasz kod

4:38tak naprawdę tej aplikacji uruchamiany jest w silniku przeglądarki

4:43a tutaj jest tylko prezentowany i to generalnie jest

4:47okej bo jak widać już mamy dostęp do całkiem pokaźnego edytora

4:51i debugera chrome'a natomiast minus ewidentnie

4:55jest taki że nasz kod nie jest uruchamiany na tym urządzeniu i tak jak

4:59w dziewięćdziesieciu pewnie pięciu procentach przypadków to nie zrobi nam różnicy tak są

5:04sytuacje w których to rozwiązanie

5:08będzie powodowało u nas pewne zdziwienie bo coś może nam tu nie działać

5:12a coś może działać a później jeśli będziemy budować wersję release'ową to będzie działać troszkę inaczej

5:16tak więc no z jednej strony jest to okej bo faktycznie mamy dostęp mamy dostęp do kodu

5:20możemy sobie ten kod przeglądać natomiast i ja z tego wielokrotnie

5:24korzystałem natomiast nie jest to rozwiązanie idealne aczkolwiek

5:29ciężko było znaleźć jakieś lepsze w świecie React Native'a oczywiście mamy

5:33coś takiego jak stand alone react devtools czyli

5:37jakby taką takie narzędzie które już nie jest jakby debugerem w chrome tylko

5:41możemy sobie jakby zainstalować osobną aplikację która będzie posiadała te logi i

5:45parę innych rzeczy profiler i tak dalej natomiast dalej to się ograniczało do tego że

5:52no nie było to narzędzie najlepsze i również nasz kod nie był uruchamiany na naszym urządzeniu ale na

5:56szczęście ten kurs nagrywany jest już po tym jak wyszła wersja

6:01React Native 0.62 i ta wersja całkiem sporo zmieniła dlaczego dlatego

6:05że wyłączmy sobie też to debugowanie dlatego że od tej wersji natywnie

6:11wspierany defaultowo jest Flipper Flipper

6:15to jest takie dość zaawansowane narzędzie do debugowania aplikacji mobilnych natywnych

6:19które od niedawna właśnie dostało wsparcie na React Native'a i to

6:25jest o tyle fajne że pozwala nam nie korzystać z tej

6:29opcji mode debuggera i odpalmy sobie tego Flippera zobaczymy

6:33jak to będzie wyglądało tak jak widać w naszym Flipperze mamy

6:38tutaj nasze logi mamy właśnie ten react devtools który też jest dostępny

6:42jakby wewnątrz Flippera ale zaraz do tego przejdziemy i jak

6:46widać mamy nasze logi które są naszego z naszej aplikacji czyli możemy sobie wejść

6:50przeładować mamy dostępne nasze logi możemy sobie to filtrować czyli na przykład interesuje mnie

6:54log start możemy sobie dodawać

6:59countery czyli jeśli na przykład chcielibyśmy zliczać ile razy na log start się pojawił to

7:03też możemy to dodać to jest fajne w przypadku jakiegoś takiego debugowania bardziej zagnieżdżonego

7:07gdzieś gdzie chcielibyśmy sprawdzać czy coś tam się odpowiednio wywołało lub nie mamy

7:11ez dostęp do naszego do naszych devtoolsów właśnie w których możemy mamy

7:15podgląd na strukturę widoków i możemy na przykład wejść

7:20sobie w nasz tekst tutaj mamy nasz tekst Hi Android and iOS i tak

7:24jak w przypadku debugowania strony w przeglądarce możemy

7:28sobie ten tekst zmienić na test title i

7:33jak widać ten test title tu się nam zmienia możemy sobie nasz font na przykład na 32

7:37czyli takie bardzo proste UI-owe rzeczy czasem nawet wygodnie jest robić tutaj

7:41aczkolwiek jeśli korzystamy z fast refresha to

7:47to też całkiem spoko to działa po prostu w emulatorze jeśli mamy

7:51dwa monitory na jednym sobie uruchomimy naszą nasz symulator a na drugim

7:55nasz kod to tak naprawdę to jakoś nie jest nie jest to jakiś game changer ale zawsze fajnie

8:00na szybko możemy coś sobie zmienić i podpatrzeć całą strukturę tych widoków to

8:05co jest fajne to to że jakby całe to narzędzie jest

8:09Flipper jest stworzony również do aplikacji natywnych w związku z tym mamy

8:13tutaj podgląd na wszystkie elementy natywne

8:18tej aplikacji ponieważ tak jak wspominałem w rozdziale o tym jak działa React Native nasz kod

8:23React Native'owy jest powoduje stworzenie tak

8:27naprawdę natywnych komponentów w związku z tym zauważcie że jak mamy naszą strukturę widoków

8:32React Native'owych czyli własciwie Reactowych to mamy

8:36również odpowiednik natywnych widoków iOS-owych tak

8:40czyli możemy sobie zobaczyć co w danym miejscu zostało wygenerowane przez

8:45React Native tak widzimy że tu mamy nagłówek widzimy że coś co u

8:49nas było jakimś komponentem jest tutaj zamienione na RCTView czyli

8:53tak naprawdę natywny widok iOS-owy równie dobrze moglibyśmy uruchomić

8:57sobie tą aplikację o tutaj sprawdzić to jak to wygląda w przypadku androida i tu też

9:01mamy zupełnie inne już zauważcie mamy linearlayout mamy jakiś view które

9:06które są wygenerowane właśnie na podstawie naszego kodu Reactowego i

9:10to jest całkiem fajne co wiecej sam Flipper jest narzędziem dość

9:15rozbudowanym pozwala nam zarządzać pluginam możemy sobie poinstalować mnóstwo pluginów

9:19do tego żeby na przykład przeglądać połączenia network

9:23tak żebyśmy mogli sprawdzać jak jakie jakie

9:27pakiety wysyłamy co dostajemy w odpowiedzi możemy sobie doinstalować te pakiety to jest

9:32każdy z nas może sobie dopisać tutaj swój plugin

9:36co jest bardzo fajne i przyszłościowe bo jeśli weźmiemy pod uwagę

9:40na przykład reduxa to też możemy znaleźć tu jakiś plugin który będzie nam

9:44tego redaxa fajnie debugować mamy możliwość

9:49poddania grafik jakie są cache'owane czyli na przykład tutaj mamy bitmapę

9:53z naszym logiem które gdzieś tam jest w tle i widzimy że on tutaj jest możemy sobie odświeżyć

9:59mamy całkiem całkiem sporo opcji możemy sobie przeglądać

10:04nasze shared preferences więc jeśli chcielibyśmy jeśli zapisujemy coś do

10:08waszej takiej shared preferences czyli takich szybkich szybkiego storageu

10:12które jest na urządzeniu też możemy sobie to podejrzeć zarówno na iOS-ie jaki i na androidzie

10:16no i tak naprawdę to narzędzie jest całkiem zaawansowane i będziemy z niego korzystać

10:20w trakcie całego kursu przy czym raczej ograniczymy się tutaj do logów ewentualnie

10:25do właśnie naszej struktury widoków z takich rzeczy które jeszcze warto

10:29wspomnieć mówiąc o Flipperze to na pewno jest Profiler Profiler to jest takie narzędzie

10:34które które pozwala nam sprawdzać w jaki

10:38sposób w jakim czasie regenerują się poszczególne elementy tutaj na razie ten widok jest tak prosty że poza

10:42startowym renderem nic się nie dzieje może później sobie to uruchomimy i sprawdzimy natomiast

10:46jest to fajne przy badaniu wydajności czyli znowu jeśli uruchamiamy sobie

10:51nasze naszą aplikację na jakimś androidzie i widzimy że coś nie do końca działa coś coś nie

10:55jest do końca płynne i nie jesteśmy w stanie stwierdzić co to możemy sobie właśnie w tym profilerze

10:59zobaczyć gdzie gdzie może być problem natomiast

11:05tak jak mówię dla nas na razie najbardziej pożyteczną informacją będą właśnie

11:09te logi tutaj mówimy o logach React Native'owych

11:13bo możemy sobie również odpalić logi naszego

11:18urządzenia o tutaj

11:23musimy sobie nasz projekt jeszcze raz zbudować może

11:28no w tej chwili nam się te logi nie wyświetlają natomiast jeśli mielibyśmy jakieś logi

11:32iOS-owe czyli takie które są generowane z poziomu aplikacji

11:36natywnej to te logi również również mielibyśmy do niej wgląd co na pewnym etapie może

11:41nam się przydać zwłaszcza w przypadku jeśli nie wiem korzystalibyśmy z jakiś zewnętrznych bibliotek które

11:45na przykład powodowałyby jakieś crushe i również mamy tutaj taką możliwość jeśli

11:49jakiś kod natywny generuje nam crash to możemy sobie takie crashe logować i je sprawdzać

11:53jest naprawdę Flipper jest całkiem całkiem rozbudowanym narzędziem

11:57i na pewno będziecie go używać produkcyjnie i zachęcam was do

12:01zgłębienia wszystkich tajników tego tego narzędzia my tak jak mówiłem

12:05ograniczymy się raczej na razie tutaj do do tych logów to

12:10myślę tyle jeśli chodzi o te podstawowe narzędzia debugujące