Sekarang ada satu hal dalam overlay pengembang yang dapat Anda buka yang sangat membantu untuk debugging
antarmuka pengguna
Anda dan itu adalah opsi pengalih sakelar. Untuk beralih ini, Anda akan melihat overlay ini di bagian bawah di
sini dan sekarang Anda dapat mengklik ke item di antarmuka pengguna Anda untuk mendapatkan informasi tentang mereka,
misalnya di sini tombol.
Sekarang Anda melihat margin di sekitar tombol, padding, Anda melihat posisinya di
pohon komponen, Anda melihat beberapa konfigurasi tombol dan Anda juga
dapat melihat-lihat sekelilingnya dan karena itu dapat merasakan
mengapa hal-hal diletakkan pada layar mereka. Anda selalu dapat menutup ini lagi dengan membuka overlay
pengembang dan kemudian mengklik lagi toggle inspector dan tentu saja, itu juga tersedia di sini di iOS di mana
Anda juga bisa merasakan bagaimana posisi barang dan mengapa mereka diposisikan dengan cara itu.
Namun, ada alat yang lebih baik untuk memeriksa ini dan oleh karena itu saya akan menutup ini di sini
dan itulah debugger Asli Bereaksi.
Anda dapat mencari debugger React Native dan Anda harus menemukan halaman github ini di sini
dan di halaman ini, Anda dapat mengunduh debugger React Native. Anda menemukan instruksi instalasi di sini dan Anda dapat pergi
ke halaman rilis pada akhirnya
di sini untuk mengunduh salah satu dari binari ini
untuk sistem operasi Anda, jadi untuk Windows, file exe di sini, file setup, untuk macOS, file dmg dan sebagainya.
Jadi ini adalah hal-hal berbeda yang
dapat Anda unduh, saya akan pergi dengan file dmg untuk mengunduh versi terbaru di sini, simpan ini dan tunggu unduhan ini
selesai dan kemudian izinkan saya menjalankan ini dan menyelesaikan instalasi dengan hanya berjalan melalui installer atau dalam
kasus saya di sini di macOS, cukup menyeret ini ke direktori aplikasi dan sekarang dapat
membuka debugger React Native di sini dan di sini. Sekarang, itu tidak berfungsi sekarang karena untuk ini
berfungsi, Anda perlu mengaktifkan debugging Javascript jarak jauh pada perangkat, persis
seperti yang kami lakukan sebelumnya untuk men-debug ini di Chrome.
Sekarang ini pada dasarnya menggantikan pengalaman debugging Chrome yang bisa Anda katakan atau tingkatkan.
Sekarang dengan ini dibuka, tekan perintah t pada Mac atau kontrol t pada Windows atau Linux di sini untuk membuka
tab baru dan buka dan konfirmasi bahwa Bereaksi port debugger asli yang juga digunakan tab Chrome sebelumnya dan konfirmasikan ini dan sekarang
sedang mencoba untuk menghubungkan di sana dan untuk membuat ini berhasil, buka alat pengembang Anda, katakanlah pada Android sekarang dan
debug Javascript jarak jauh dan sekarang ini
harus terhubung di sini dan Anda akan melihat output konsol Anda di sini sekarang di alat debugger.
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
perbedaan besar
tentu saja bukan bahwa Anda dapat melakukan ini karena itu sama yang
dapat Anda lakukan di browser tetapi di sini, Anda sekarang memiliki alat yang cukup rapi di sebelah kiri.
Jadi Anda tentu saja masih
dapat mengatur breakpoints dan semuanya tetapi di sini, Anda sekarang dapat satu alat Redux debugging Anda
dan kami tidak menggunakan Redux di sini, jadi mereka cukup kosong, tidak ada yang terjadi di
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
Anda, pohon komponen Anda dalam antarmuka pengguna yang bagus ini jelas lebih bagus daripada inspektur yang dapat Anda beralih di sini karena
sekarang di sini, Anda benar-benar dapat memiliki lihat apa yang terjadi. Anda dapat menyelam ke komponen root untuk kemudian menemukan
komponen aplikasi kami di sana dan di sana, kami menemukan pandangan kami dengan tombol itu, kami dapat mengklik tombol
dan kami melihat alat peraga yang kami gunakan pada tombol, seperti onPress dan judul
yang kita tentukan.
Kita dapat mengklik pada komponen kita sendiri di mana kita melihat alat peraga yang kita teruskan di sana,
kita bahkan dapat mengubah alat peraga yang terlihat untuk mengubah modal ini seperti ini jika kita mau,
jadi itu sangat bagus.
Kami melihat kait yang kami gunakan di sana, seperti keadaan yang saat ini kami kelola
dalam komponen kami dan jika saya membuka modal itu di sini, Anda melihat keadaan itu, alat peraga di sini berubah dan
jika saya mulai mengetik di sini, seperti belajar React Native , Anda akan melihat bahwa ini juga memperbarui di sini di
sebelah kanan, seperti sedikit
keterlambatan tetapi itu seharusnya tidak menjadi masalah, jadi itu sangat rapi.
Kita dapat menambahkan ini dan melihat perubahan status di sini, tentu
saja kita bisa masuk lebih dalam ke input tujuan untuk melihat modal di sini.
Anda dapat menjelajahi FlatList dan apa yang dikonfigurasikan di sana dan menyelam lebih dalam ke tampilan ini
jika Anda mau, jadi benar-benar banyak hal yang dapat Anda lakukan di sana dan Anda secara keseluruhan dapat menjelajahi pohon komponen
Anda di sana untuk mengetahui apa yang terjadi. Pada elemen di mana Anda secara langsung menambahkan gaya, seperti pada
tampilan sekitarnya misalnya
di mana saya mengatur padding ini, Anda bahkan dapat memeriksa gaya dan tidak hanya melihat gaya tetapi juga mengubahnya,
misalnya untuk menambah padding atau menguranginya
dan ini memberi Anda cara mudah menguji berbagai tampilan dan tata letak di layar untuk mencari tahu apa
yang tampak baik untuk Anda dan apa yang ingin Anda ubah.
Anda juga dapat pergi ke tab profiler di sini dan memulai sesi profil, kemudian melakukan sesuatu di layar
seperti membuka dan menutup modal dan menghentikan ini dan Anda akan mendapatkan pengalaman Bereaksi dev alat default di sini di
mana Anda melihat komponen Anda yang mana dicat ulang dan Anda dapat menyelam ke dalamnya untuk mendapatkan
ide untuk apa yang dicat ulang, yang memiliki alat itu pada saat itu dan berapa banyak siklus render Anda
harus misalnya mencari tahu apakah ada pengecatan ulang yang tidak perlu terjadi, jelas sedikit dari hal
yang lebih canggih untuk dilakukan dan sesuatu yang mungkin ingin Anda lakukan ketika Anda lebih dekat untuk
menyelesaikan aplikasi Anda, untuk memastikan Anda mengoptimalkan kinerja dan Anda menghindari siklus re-render yang tidak perlu,
tetapi alat ini benar-benar dapat membantu untuk melihat sedikit masalah di aplikasi Anda dan untuk memastikan bahwa
semuanya berfungsi seperti seharusnya di aplikasi Anda.
Sekarang satu hal keren lainnya yang dapat Anda lakukan dengan debugger React Native, Anda dapat mengklik kanan
di mana saja di sini, katakanlah di sini dan Anda dapat
mengaktifkan pemeriksaan jaringan dan jika Anda melakukan ini, maka Anda dapat pergi ke tab jaringan dan Anda akan melihat keluar permintaan jaringan.
Sekarang ini semua hanya permintaan debugging terkait tetapi kemudian dalam kursus ketika kami akan menambahkan permintaan jaringan
kami sendiri, di mana kami mengirim permintaan ke server web kami sendiri, kami bahkan dapat memeriksa mereka di
sini dan melihat ke dalamnya dan melihat apakah kami mengirim dan menerima data yang tepat,
sesuatu yang sebaliknya
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
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
aplikasi Anda, ke UI Anda, ke dalam logika Anda dan mencari tahu apakah semuanya berfungsi sebagaimana mestinya dan Anda bahkan dapat
masuk ke sini dan mengubah hal-hal tertentu seperti penataan seperti yang Anda lihat,
untuk bereksperimenlah dengan pengaturan yang berbeda dan cari tahu di mana Anda perlu mengubah aplikasi Anda
agar dapat berfungsi dengan benar.