1
00:00:02,300 --> 00:00:06,340
Czasami sam dziennik konsoli nie prowadzi tak daleko,

2
00:00:06,380 --> 00:00:11,270
potrzebujesz dodatkowej pomocy iw takich przypadkach możesz zdalnie debugować kod.

3
00:00:11,270 --> 00:00:17,750
Teraz musisz otworzyć menu debugowania na tych emulatorach lub na prawdziwych

4
00:00:17,750 --> 00:00:23,650
urządzeniach, jeśli pracujesz z nimi. Robisz to, naciskając na symulatorze

5
00:00:23,660 --> 00:00:34,030
iOS polecenie d, a to otworzy to menu tutaj, na Androidzie, naciśniesz polecenie lub kontrolujesz m, a to otworzy to menu.

6
00:00:34,030 --> 00:00:38,360
Teraz widzisz tam kilka opcji, a my przyjrzymy się tym ważnym w tym module.

7
00:00:38,360 --> 00:00:41,780
Teraz wybieramy opcję zdalnego debugowania js.

8
00:00:42,050 --> 00:00:48,290
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,

9
00:00:48,680 --> 00:00:54,700
interfejs użytkownika do debugowania, który powinien otworzyć się automatycznie. Teraz, aby działało to poprawnie, upewnij się, że

10
00:00:54,690 --> 00:01:01,160
w twoich narzędziach dla expo skonfigurowałeś połączenie jako alarmowe lub lokalne, a nie tunelowane, w przeciwnym razie

11
00:01:01,160 --> 00:01:08,490
będzie to bardzo wolne, a teraz to, co oferuje ten debugger, nowa karta umożliwia otwórz teraz narzędzia programistyczne Chrome

12
00:01:08,500 --> 00:01:13,650
za pomocą skrótu, który powinieneś widzieć tu i tam, teraz widzisz również ten sam

13
00:01:14,790 --> 00:01:19,890
dziennik konsoli, który tu otrzymujesz, więc masz teraz także inną konsolę, w której

14
00:01:19,890 --> 00:01:25,320
możesz sprawdzić, z którą wygodniej będzie pracować , aby szybko ponownie pokazać ten przykład

15
00:01:25,320 --> 00:01:26,930
z celami kursu.

16
00:01:26,940 --> 00:01:36,290
Jeśli konsola zarejestruje tutaj moje cele kursu i zapiszę to, przebuduje się i teraz widzimy tablicę tutaj i możemy ją

17
00:01:36,290 --> 00:01:37,040
rozwinąć.

18
00:01:37,040 --> 00:01:39,050
Może to być nieco wygodniejsze w

19
00:01:39,140 --> 00:01:41,420
pracy, w zasadzie, jak wiesz to z tworzenia

20
00:01:41,420 --> 00:01:44,760
stron internetowych w przypadku, gdy jesteś programistą, ale możesz też zrobić więcej.

21
00:01:44,780 --> 00:01:50,570
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ę

22
00:01:50,570 --> 00:01:56,870
pracownika debuggera tutaj, rozwiń te foldery, a znajdziesz strukturę folderów, z którą również

23
00:01:56,900 --> 00:01:58,750
pracujesz, na przykład

24
00:01:58,820 --> 00:02:05,000
tutaj, w folderze użytkowników, znajdziesz aplikację. plik js, znajdziesz składniki.

25
00:02:05,450 --> 00:02:10,950
Więc teraz w aplikacji. js, jeśli otworzysz ten plik, zobaczysz swój

26
00:02:10,960 --> 00:02:12,510
kod podczas pisania,

27
00:02:12,550 --> 00:02:15,560
więc w nieskompilowanej wersji, co jest świetne, ponieważ

28
00:02:15,700 --> 00:02:21,880
łatwo jest rozpoznać swój kod tam i teraz, na przykład powiedzmy, że chcesz zatrzymać kod, gdy Zaraz

29
00:02:21,880 --> 00:02:25,350
dodamy nowy cel, możesz dodać punkt przerwania, klikając po

30
00:02:25,360 --> 00:02:27,370
lewej stronie numeru linii, aby mieć

31
00:02:27,370 --> 00:02:32,730
ten niebieski znak, a teraz wykonanie kodu zatrzyma się przy następnym dotknięciu tej linii kodu.

32
00:02:32,830 --> 00:02:36,930
Teraz włączyłem debugowanie na emulatorze Androida, więc nie przestanie, jeśli spróbuję

33
00:02:36,940 --> 00:02:39,980
na iOS, przestanie, jeśli spróbuję na Androidzie.

34
00:02:40,000 --> 00:02:47,500
Mogliśmy też włączyć tę funkcję w iOS, tutaj ze zdalnym debugowaniem js, ale tego nie zrobiłem, więc przejdźmy do

35
00:02:47,500 --> 00:02:48,250
Androida.

36
00:02:48,310 --> 00:02:49,800
Możesz zignorować to

37
00:02:49,840 --> 00:02:57,340
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

38
00:02:57,340 --> 00:03:04,030
i teraz widzisz, to utknie tutaj, ponieważ jeśli wrócisz do narzędzi deweloperskich, to teraz zatrzymany, widzisz, że jest teraz podświetlony

39
00:03:04,060 --> 00:03:06,580
na niebiesko, jest pomijany, a teraz fajną

40
00:03:06,670 --> 00:03:12,610
rzeczą jest to, że możesz krok po kroku przejść przez kod za pomocą tych elementów sterujących, po

41
00:03:12,760 --> 00:03:18,400
prostu się z nimi bawić, a także możesz najechać myszą na rzeczy, aby spojrzeć w kodzie, na

42
00:03:18,400 --> 00:03:21,060
przykład, aby zobaczyć bieżącą wartość w tytule celu.

43
00:03:21,070 --> 00:03:25,480
Teraz możemy po prostu przejść przez te linie krok po kroku za pomocą tego przycisku,

44
00:03:25,480 --> 00:03:30,220
możesz przejść do wywołania funkcji za pomocą tego przycisku lub wyjść z niego za pomocą tego

45
00:03:31,210 --> 00:03:35,430
przycisku i zawsze możesz wznowić wykonywanie kodu za pomocą tego niebieskiego przycisku odtwarzania.

46
00:03:38,030 --> 00:03:43,850
Może to być bardzo potężne narzędzie do głębokiego nurkowania w przepływie kodu, ponieważ pozwala w

47
00:03:43,850 --> 00:03:45,810
pełni zrozumieć, co się

48
00:03:45,890 --> 00:03:51,240
dzieje, przyjrzeć się wartościom w czasie wykonywania i uzyskać pełną kontrolę nad kodem.

49
00:03:51,260 --> 00:03:56,960
Teraz, jeśli chcesz dowiedzieć się więcej o korzystaniu z narzędzi do debugowania w Chrome, znajdziesz przydatne łącze do

50
00:03:56,990 --> 00:04:01,040
tego wykładu, które zawiera więcej informacji o narzędziach do debugowania w Chrome.