1
00:00:02,240 --> 00:00:09,740
Sekarang ada satu hal dalam overlay pengembang yang dapat Anda buka yang sangat membantu untuk debugging

2
00:00:09,740 --> 00:00:11,030
antarmuka pengguna

3
00:00:11,030 --> 00:00:17,780
Anda dan itu adalah opsi pengalih sakelar. Untuk beralih ini, Anda akan melihat overlay ini di bagian bawah di

4
00:00:17,780 --> 00:00:22,710
sini dan sekarang Anda dapat mengklik ke item di antarmuka pengguna Anda untuk mendapatkan informasi tentang mereka,

5
00:00:22,730 --> 00:00:24,260
misalnya di sini tombol.

6
00:00:24,260 --> 00:00:29,990
Sekarang Anda melihat margin di sekitar tombol, padding, Anda melihat posisinya di

7
00:00:30,440 --> 00:00:35,130
pohon komponen, Anda melihat beberapa konfigurasi tombol dan Anda juga

8
00:00:35,130 --> 00:00:38,780
dapat melihat-lihat sekelilingnya dan karena itu dapat merasakan

9
00:00:38,900 --> 00:00:45,200
mengapa hal-hal diletakkan pada layar mereka. Anda selalu dapat menutup ini lagi dengan membuka overlay

10
00:00:45,200 --> 00:00:51,410
pengembang dan kemudian mengklik lagi toggle inspector dan tentu saja, itu juga tersedia di sini di iOS di mana

11
00:00:51,410 --> 00:00:56,180
Anda juga bisa merasakan bagaimana posisi barang dan mengapa mereka diposisikan dengan cara itu.

12
00:00:56,180 --> 00:01:02,670
Namun, ada alat yang lebih baik untuk memeriksa ini dan oleh karena itu saya akan menutup ini di sini

13
00:01:02,690 --> 00:01:04,800
dan itulah debugger Asli Bereaksi.

14
00:01:05,060 --> 00:01:10,580
Anda dapat mencari debugger React Native dan Anda harus menemukan halaman github ini di sini

15
00:01:10,580 --> 00:01:18,280
dan di halaman ini, Anda dapat mengunduh debugger React Native. Anda menemukan instruksi instalasi di sini dan Anda dapat pergi

16
00:01:18,780 --> 00:01:21,070
ke halaman rilis pada akhirnya

17
00:01:24,380 --> 00:01:27,990
di sini untuk mengunduh salah satu dari binari ini

18
00:01:27,990 --> 00:01:35,070
untuk sistem operasi Anda, jadi untuk Windows, file exe di sini, file setup, untuk macOS, file dmg dan sebagainya.

19
00:01:35,070 --> 00:01:37,860
Jadi ini adalah hal-hal berbeda yang

20
00:01:37,890 --> 00:01:46,460
dapat Anda unduh, saya akan pergi dengan file dmg untuk mengunduh versi terbaru di sini, simpan ini dan tunggu unduhan ini

21
00:01:46,460 --> 00:01:53,730
selesai dan kemudian izinkan saya menjalankan ini dan menyelesaikan instalasi dengan hanya berjalan melalui installer atau dalam

22
00:01:53,730 --> 00:02:00,000
kasus saya di sini di macOS, cukup menyeret ini ke direktori aplikasi dan sekarang dapat

23
00:02:00,000 --> 00:02:07,620
membuka debugger React Native di sini dan di sini. Sekarang, itu tidak berfungsi sekarang karena untuk ini

24
00:02:07,620 --> 00:02:12,410
berfungsi, Anda perlu mengaktifkan debugging Javascript jarak jauh pada perangkat, persis

25
00:02:12,420 --> 00:02:16,820
seperti yang kami lakukan sebelumnya untuk men-debug ini di Chrome.

26
00:02:16,820 --> 00:02:22,270
Sekarang ini pada dasarnya menggantikan pengalaman debugging Chrome yang bisa Anda katakan atau tingkatkan.

27
00:02:22,280 --> 00:02:30,140
Sekarang dengan ini dibuka, tekan perintah t pada Mac atau kontrol t pada Windows atau Linux di sini untuk membuka

28
00:02:30,140 --> 00:02:38,690
tab baru dan buka dan konfirmasi bahwa Bereaksi port debugger asli yang juga digunakan tab Chrome sebelumnya dan konfirmasikan ini dan sekarang

29
00:02:38,690 --> 00:02:46,730
sedang mencoba untuk menghubungkan di sana dan untuk membuat ini berhasil, buka alat pengembang Anda, katakanlah pada Android sekarang dan

30
00:02:46,730 --> 00:02:49,920
debug Javascript jarak jauh dan sekarang ini

31
00:02:50,000 --> 00:02:57,030
harus terhubung di sini dan Anda akan melihat output konsol Anda di sini sekarang di alat debugger.

32
00:02:57,020 --> 00:03:05,240
Anda juga akan melihat, jika saya memperluas ini, bahwa dalam sumber, Anda dapat kembali menyelam ke dalam kode Anda di sini jika Anda ingin seperti sebelumnya dan

33
00:03:05,250 --> 00:03:05,960
perbedaan besar

34
00:03:06,650 --> 00:03:10,520
tentu saja bukan bahwa Anda dapat melakukan ini karena itu sama yang

35
00:03:10,520 --> 00:03:15,770
dapat Anda lakukan di browser tetapi di sini, Anda sekarang memiliki alat yang cukup rapi di sebelah kiri.

36
00:03:15,770 --> 00:03:17,950
Jadi Anda tentu saja masih

37
00:03:17,960 --> 00:03:23,480
dapat mengatur breakpoints dan semuanya tetapi di sini, Anda sekarang dapat satu alat Redux debugging Anda

38
00:03:23,480 --> 00:03:28,790
dan kami tidak menggunakan Redux di sini, jadi mereka cukup kosong, tidak ada yang terjadi di

39
00:03:28,790 --> 00:03:37,760
sini tetapi di bagian bawah, Anda memiliki ini elemen alat debugging dan ini memungkinkan Anda untuk menjelajahi kode JSS React Native Anda sehingga bisa dikatakan, jadi elemen

40
00:03:37,790 --> 00:03:45,140
Anda, pohon komponen Anda dalam antarmuka pengguna yang bagus ini jelas lebih bagus daripada inspektur yang dapat Anda beralih di sini karena

41
00:03:45,140 --> 00:03:52,660
sekarang di sini, Anda benar-benar dapat memiliki lihat apa yang terjadi. Anda dapat menyelam ke komponen root untuk kemudian menemukan

42
00:03:52,660 --> 00:04:00,200
komponen aplikasi kami di sana dan di sana, kami menemukan pandangan kami dengan tombol itu, kami dapat mengklik tombol

43
00:04:00,200 --> 00:04:06,080
dan kami melihat alat peraga yang kami gunakan pada tombol, seperti onPress dan judul

44
00:04:07,720 --> 00:04:09,170
yang kita tentukan.

45
00:04:09,250 --> 00:04:14,020
Kita dapat mengklik pada komponen kita sendiri di mana kita melihat alat peraga yang kita teruskan di sana,

46
00:04:14,140 --> 00:04:18,720
kita bahkan dapat mengubah alat peraga yang terlihat untuk mengubah modal ini seperti ini jika kita mau,

47
00:04:18,790 --> 00:04:20,220
jadi itu sangat bagus.

48
00:04:20,290 --> 00:04:25,070
Kami melihat kait yang kami gunakan di sana, seperti keadaan yang saat ini kami kelola

49
00:04:25,150 --> 00:04:31,540
dalam komponen kami dan jika saya membuka modal itu di sini, Anda melihat keadaan itu, alat peraga di sini berubah dan

50
00:04:31,540 --> 00:04:37,870
jika saya mulai mengetik di sini, seperti belajar React Native , Anda akan melihat bahwa ini juga memperbarui di sini di

51
00:04:37,870 --> 00:04:39,220
sebelah kanan, seperti sedikit

52
00:04:39,280 --> 00:04:42,730
keterlambatan tetapi itu seharusnya tidak menjadi masalah, jadi itu sangat rapi.

53
00:04:42,820 --> 00:04:46,600
Kita dapat menambahkan ini dan melihat perubahan status di sini, tentu

54
00:04:46,600 --> 00:04:51,340
saja kita bisa masuk lebih dalam ke input tujuan untuk melihat modal di sini.

55
00:04:51,400 --> 00:04:57,490
Anda dapat menjelajahi FlatList dan apa yang dikonfigurasikan di sana dan menyelam lebih dalam ke tampilan ini

56
00:04:57,490 --> 00:05:04,600
jika Anda mau, jadi benar-benar banyak hal yang dapat Anda lakukan di sana dan Anda secara keseluruhan dapat menjelajahi pohon komponen

57
00:05:04,660 --> 00:05:10,780
Anda di sana untuk mengetahui apa yang terjadi. Pada elemen di mana Anda secara langsung menambahkan gaya, seperti pada

58
00:05:10,780 --> 00:05:11,970
tampilan sekitarnya misalnya

59
00:05:11,980 --> 00:05:17,320
di mana saya mengatur padding ini, Anda bahkan dapat memeriksa gaya dan tidak hanya melihat gaya tetapi juga mengubahnya,

60
00:05:17,320 --> 00:05:18,960
misalnya untuk menambah padding atau menguranginya

61
00:05:19,030 --> 00:05:24,010
dan ini memberi Anda cara mudah menguji berbagai tampilan dan tata letak di layar untuk mencari tahu apa

62
00:05:24,010 --> 00:05:27,190
yang tampak baik untuk Anda dan apa yang ingin Anda ubah.

63
00:05:27,250 --> 00:05:33,310
Anda juga dapat pergi ke tab profiler di sini dan memulai sesi profil, kemudian melakukan sesuatu di layar

64
00:05:33,310 --> 00:05:39,760
seperti membuka dan menutup modal dan menghentikan ini dan Anda akan mendapatkan pengalaman Bereaksi dev alat default di sini di

65
00:05:39,760 --> 00:05:45,400
mana Anda melihat komponen Anda yang mana dicat ulang dan Anda dapat menyelam ke dalamnya untuk mendapatkan

66
00:05:45,400 --> 00:05:51,640
ide untuk apa yang dicat ulang, yang memiliki alat itu pada saat itu dan berapa banyak siklus render Anda

67
00:05:51,640 --> 00:05:57,070
harus misalnya mencari tahu apakah ada pengecatan ulang yang tidak perlu terjadi, jelas sedikit dari hal

68
00:05:57,070 --> 00:06:02,800
yang lebih canggih untuk dilakukan dan sesuatu yang mungkin ingin Anda lakukan ketika Anda lebih dekat untuk

69
00:06:02,800 --> 00:06:08,230
menyelesaikan aplikasi Anda, untuk memastikan Anda mengoptimalkan kinerja dan Anda menghindari siklus re-render yang tidak perlu,

70
00:06:08,230 --> 00:06:13,870
tetapi alat ini benar-benar dapat membantu untuk melihat sedikit masalah di aplikasi Anda dan untuk memastikan bahwa

71
00:06:13,870 --> 00:06:16,360
semuanya berfungsi seperti seharusnya di aplikasi Anda.

72
00:06:16,360 --> 00:06:20,890
Sekarang satu hal keren lainnya yang dapat Anda lakukan dengan debugger React Native, Anda dapat mengklik kanan

73
00:06:21,130 --> 00:06:24,110
di mana saja di sini, katakanlah di sini dan Anda dapat

74
00:06:24,250 --> 00:06:29,800
mengaktifkan pemeriksaan jaringan dan jika Anda melakukan ini, maka Anda dapat pergi ke tab jaringan dan Anda akan melihat keluar permintaan jaringan.

75
00:06:29,800 --> 00:06:35,770
Sekarang ini semua hanya permintaan debugging terkait tetapi kemudian dalam kursus ketika kami akan menambahkan permintaan jaringan

76
00:06:35,770 --> 00:06:42,070
kami sendiri, di mana kami mengirim permintaan ke server web kami sendiri, kami bahkan dapat memeriksa mereka di

77
00:06:42,070 --> 00:06:47,140
sini dan melihat ke dalamnya dan melihat apakah kami mengirim dan menerima data yang tepat,

78
00:06:47,380 --> 00:06:48,560
sesuatu yang sebaliknya

79
00:06:48,580 --> 00:06:55,480
sangat sulit dilakukan dengan aplikasi asli, ini sangat mudah. Jadi Bereaksi asli debugger benar-benar adalah alat keren untuk melihat ke dalam aplikasi Anda, untuk mengatur

80
00:06:55,720 --> 00:07:02,860
breakpoints, melihat konsol, melihat pohon komponen Anda, melihat gaya yang Anda gunakan di sana dan banyak lagi. Ini benar-benar memungkinkan Anda untuk menyelam lebih dalam ke kode

81
00:07:02,860 --> 00:07:10,570
aplikasi Anda, ke UI Anda, ke dalam logika Anda dan mencari tahu apakah semuanya berfungsi sebagaimana mestinya dan Anda bahkan dapat

82
00:07:10,660 --> 00:07:15,490
masuk ke sini dan mengubah hal-hal tertentu seperti penataan seperti yang Anda lihat,

83
00:07:15,490 --> 00:07:21,220
untuk bereksperimenlah dengan pengaturan yang berbeda dan cari tahu di mana Anda perlu mengubah aplikasi Anda

84
00:07:21,220 --> 00:07:23,380
agar dapat berfungsi dengan benar.