Czasami sam dziennik konsoli nie prowadzi tak daleko,
potrzebujesz dodatkowej pomocy iw takich przypadkach możesz zdalnie debugować kod.
Teraz musisz otworzyć menu debugowania na tych emulatorach lub na prawdziwych
urządzeniach, jeśli pracujesz z nimi. Robisz to, naciskając na symulatorze
iOS polecenie d, a to otworzy to menu tutaj, na Androidzie, naciśniesz polecenie lub kontrolujesz m, a to otworzy to menu.
Teraz widzisz tam kilka opcji, a my przyjrzymy się tym ważnym w tym module.
Teraz wybieramy opcję zdalnego debugowania js.
Jeśli naciśniesz ten przycisk, w przeglądarce otworzy się nowa karta, która automatycznie przeszła do localhost 1901 w moim przypadku tutaj,
interfejs użytkownika do debugowania, który powinien otworzyć się automatycznie. Teraz, aby działało to poprawnie, upewnij się, że
w twoich narzędziach dla expo skonfigurowałeś połączenie jako alarmowe lub lokalne, a nie tunelowane, w przeciwnym razie
będzie to bardzo wolne, a teraz to, co oferuje ten debugger, nowa karta umożliwia otwórz teraz narzędzia programistyczne Chrome
za pomocą skrótu, który powinieneś widzieć tu i tam, teraz widzisz również ten sam
dziennik konsoli, który tu otrzymujesz, więc masz teraz także inną konsolę, w której
możesz sprawdzić, z którą wygodniej będzie pracować , aby szybko ponownie pokazać ten przykład
z celami kursu.
Jeśli konsola zarejestruje tutaj moje cele kursu i zapiszę to, przebuduje się i teraz widzimy tablicę tutaj i możemy ją
rozwinąć.
Może to być nieco wygodniejsze w
pracy, w zasadzie, jak wiesz to z tworzenia
stron internetowych w przypadku, gdy jesteś programistą, ale możesz też zrobić więcej.
Możesz nurkować w źródłach, na przykład nurkować w kodzie źródłowym i ustawiać punkty przerwania. Po prostu rozwiń tę funkcję
pracownika debuggera tutaj, rozwiń te foldery, a znajdziesz strukturę folderów, z którą również
pracujesz, na przykład
tutaj, w folderze użytkowników, znajdziesz aplikację. plik js, znajdziesz składniki.
Więc teraz w aplikacji. js, jeśli otworzysz ten plik, zobaczysz swój
kod podczas pisania,
więc w nieskompilowanej wersji, co jest świetne, ponieważ
łatwo jest rozpoznać swój kod tam i teraz, na przykład powiedzmy, że chcesz zatrzymać kod, gdy Zaraz
dodamy nowy cel, możesz dodać punkt przerwania, klikając po
lewej stronie numeru linii, aby mieć
ten niebieski znak, a teraz wykonanie kodu zatrzyma się przy następnym dotknięciu tej linii kodu.
Teraz włączyłem debugowanie na emulatorze Androida, więc nie przestanie, jeśli spróbuję
na iOS, przestanie, jeśli spróbuję na Androidzie.
Mogliśmy też włączyć tę funkcję w iOS, tutaj ze zdalnym debugowaniem js, ale tego nie zrobiłem, więc przejdźmy do
Androida.
Możesz zignorować to
ostrzeżenie tutaj, możesz je po prostu odrzucić, a teraz naciśnij dodać nowy cel i być może wejdź uczyć React Native, kliknij dodaj
i teraz widzisz, to utknie tutaj, ponieważ jeśli wrócisz do narzędzi deweloperskich, to teraz zatrzymany, widzisz, że jest teraz podświetlony
na niebiesko, jest pomijany, a teraz fajną
rzeczą jest to, że możesz krok po kroku przejść przez kod za pomocą tych elementów sterujących, po
prostu się z nimi bawić, a także możesz najechać myszą na rzeczy, aby spojrzeć w kodzie, na
przykład, aby zobaczyć bieżącą wartość w tytule celu.
Teraz możemy po prostu przejść przez te linie krok po kroku za pomocą tego przycisku,
możesz przejść do wywołania funkcji za pomocą tego przycisku lub wyjść z niego za pomocą tego
przycisku i zawsze możesz wznowić wykonywanie kodu za pomocą tego niebieskiego przycisku odtwarzania.
Może to być bardzo potężne narzędzie do głębokiego nurkowania w przepływie kodu, ponieważ pozwala w
pełni zrozumieć, co się
dzieje, przyjrzeć się wartościom w czasie wykonywania i uzyskać pełną kontrolę nad kodem.
Teraz, jeśli chcesz dowiedzieć się więcej o korzystaniu z narzędzi do debugowania w Chrome, znajdziesz przydatne łącze do
tego wykładu, które zawiera więcej informacji o narzędziach do debugowania w Chrome.