Sekarang kadang-kadang, konsol log saja tidak membuat Anda sejauh itu, Anda perlu
bantuan lebih lanjut dan dalam kasus seperti itu, Anda dapat men-debug kode Anda dari jarak jauh.
Sekarang untuk itu, Anda perlu membuka menu debug pada emulator ini atau pada perangkat nyata
juga jika Anda bekerja dengan mereka. Anda melakukannya dengan menekan pada simulator
iOS, perintah d dan itu akan membuka menu ini di sini, di Android, Anda menekan perintah atau kontrol m dan itu akan membuka menu ini.
Sekarang Anda melihat beberapa opsi di sana dan kita akan melihat yang penting di seluruh modul ini.
Opsi yang sekarang akan kita pilih adalah men-debug js dari jarak jauh.
Jika Anda menekan ini, tab baru akan terbuka di browser yang secara otomatis dinavigasi ke localhost 1901 dalam kasus saya di
sini, slash debugger UI, yang seharusnya terbuka secara otomatis. Sekarang agar ini berfungsi dengan benar, pastikan bahwa dalam
alat dev pameran Anda, Anda telah mengatur koneksi menjadi alarm atau lokal, bukan terowongan kalau tidak ini akan sangat
lambat dan sekarang apa yang dihasilkan debugger ini Anda, tab baru ini adalah bahwa Anda dapat buka alat pengembang Chrome sekarang dengan
pintasan yang seharusnya Anda lihat di sana-sini, Anda sekarang juga melihat log konsol yang sama
dengan yang Anda dapatkan di sini, jadi sekarang Anda juga memiliki konsol lain yang dapat
Anda lihat yang mungkin lebih nyaman untuk bekerja dengan , hanya dengan cepat menunjukkan contoh itu
dengan tujuan kursus lagi.
Jika saya menghibur log tujuan kursus saya di sini dan saya simpan ini, ini membangun kembali dan sekarang kita melihat array di sini dan kita
dapat mengembangkannya.
Jadi ini mungkin sedikit lebih nyaman untuk
dikerjakan, pada dasarnya seperti yang Anda ketahui dari pengembangan
web jika Anda seorang pengembang web tetapi Anda juga dapat melakukan lebih banyak.
Anda dapat menyelam ke sumber-sumber misalnya untuk menyelam ke dalam kode sumber Anda dan mengatur breakpoints. Di sana cukup rentangkan pekerja debugger ini
di sini, perluas folder ini dan Anda akan menemukan struktur folder yang juga Anda kerjakan,
misalnya di folder
pengguna Anda di sini, Anda akan menemukan aplikasinya. File js, Anda menemukan komponen.
Jadi sekarang di aplikasi. js jika Anda membuka file itu, Anda akan melihat
kode Anda ketika Anda
menulisnya, jadi dalam versi yang tidak dikompilasi yang bagus karena
mudah untuk mengenali kode Anda di sana dan sekarang di sini, misalnya katakanlah Anda ingin menghentikan kode ketika Anda Anda akan
menambahkan tujuan baru, Anda dapat menambahkan breakpoint dengan mengklik di sebelah kiri
nomor baris di sini sehingga Anda memiliki
tanda biru ini dan sekarang eksekusi kode Anda akan berhenti saat Anda menekan baris kode ini lagi di sini.
Sekarang saya mengaktifkan debugging pada emulator Android, jadi itu tidak akan berhenti jika saya mencobanya
di iOS, itu akan berhenti jika saya mencobanya di Android.
Kita bisa mengaktifkannya di iOS juga, di sini dengan debug remote js tapi saya tidak melakukannya, jadi mari kita pergi
dengan Android.
Anda dapat mengabaikan
peringatan ini di sini, Anda dapat mengabaikannya dan sekarang tekan tambah tujuan baru dan mungkin masukkan pelajari Bereaksi Asli, klik tambahkan dan sekarang
Anda lihat, ini macet di sini karena jika Anda kembali ke alat dev, ini sekarang dijeda, Anda melihat ini sekarang
disorot dengan warna biru, sudah berlalu dan
sekarang yang keren adalah Anda dapat berjalan melalui kode Anda langkah-demi-langkah dengan kontrol ini di sini, cukup bermain-main
dengan mereka dan Anda juga dapat mengarahkan kursor ke hal-hal untuk dilihat ke dalam kode Anda, misalnya
untuk melihat nilai saat ini dalam judul sasaran.
Sekarang kita cukup maju melalui langkah ini selangkah demi selangkah dengan tombol ini, Anda
dapat masuk ke panggilan fungsi dengan tombol ini atau keluar dari sana dengan tombol ini
dan Anda selalu dapat melanjutkan eksekusi kode dengan tombol putar biru ini.
Ini bisa menjadi alat yang sangat kuat untuk benar-benar menyelami aliran kode Anda karena memungkinkan Anda
untuk sepenuhnya memahami apa yang
terjadi, untuk melihat nilai-nilai Anda saat runtime dan untuk mendapatkan kontrol penuh atas kode Anda.
Sekarang jika Anda ingin mempelajari lebih lanjut tentang cara menggunakan alat debugging Chrome, Anda akan menemukan tautan bermanfaat yang
dilampirkan pada kuliah ini yang memiliki informasi lebih lanjut tentang alat debugging Chrome.