1 00:00:02,300 --> 00:00:06,340 Sekarang kadang-kadang, konsol log saja tidak membuat Anda sejauh itu, Anda perlu 2 00:00:06,380 --> 00:00:11,270 bantuan lebih lanjut dan dalam kasus seperti itu, Anda dapat men-debug kode Anda dari jarak jauh. 3 00:00:11,270 --> 00:00:17,750 Sekarang untuk itu, Anda perlu membuka menu debug pada emulator ini atau pada perangkat nyata 4 00:00:17,750 --> 00:00:23,650 juga jika Anda bekerja dengan mereka. Anda melakukannya dengan menekan pada simulator 5 00:00:23,660 --> 00:00:34,030 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. 6 00:00:34,030 --> 00:00:38,360 Sekarang Anda melihat beberapa opsi di sana dan kita akan melihat yang penting di seluruh modul ini. 7 00:00:38,360 --> 00:00:41,780 Opsi yang sekarang akan kita pilih adalah men-debug js dari jarak jauh. 8 00:00:42,050 --> 00:00:48,290 Jika Anda menekan ini, tab baru akan terbuka di browser yang secara otomatis dinavigasi ke localhost 1901 dalam kasus saya di 9 00:00:48,680 --> 00:00:54,700 sini, slash debugger UI, yang seharusnya terbuka secara otomatis. Sekarang agar ini berfungsi dengan benar, pastikan bahwa dalam 10 00:00:54,690 --> 00:01:01,160 alat dev pameran Anda, Anda telah mengatur koneksi menjadi alarm atau lokal, bukan terowongan kalau tidak ini akan sangat 11 00:01:01,160 --> 00:01:08,490 lambat dan sekarang apa yang dihasilkan debugger ini Anda, tab baru ini adalah bahwa Anda dapat buka alat pengembang Chrome sekarang dengan 12 00:01:08,500 --> 00:01:13,650 pintasan yang seharusnya Anda lihat di sana-sini, Anda sekarang juga melihat log konsol yang sama 13 00:01:14,790 --> 00:01:19,890 dengan yang Anda dapatkan di sini, jadi sekarang Anda juga memiliki konsol lain yang dapat 14 00:01:19,890 --> 00:01:25,320 Anda lihat yang mungkin lebih nyaman untuk bekerja dengan , hanya dengan cepat menunjukkan contoh itu 15 00:01:25,320 --> 00:01:26,930 dengan tujuan kursus lagi. 16 00:01:26,940 --> 00:01:36,290 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 17 00:01:36,290 --> 00:01:37,040 dapat mengembangkannya. 18 00:01:37,040 --> 00:01:39,050 Jadi ini mungkin sedikit lebih nyaman untuk 19 00:01:39,140 --> 00:01:41,420 dikerjakan, pada dasarnya seperti yang Anda ketahui dari pengembangan 20 00:01:41,420 --> 00:01:44,760 web jika Anda seorang pengembang web tetapi Anda juga dapat melakukan lebih banyak. 21 00:01:44,780 --> 00:01:50,570 Anda dapat menyelam ke sumber-sumber misalnya untuk menyelam ke dalam kode sumber Anda dan mengatur breakpoints. Di sana cukup rentangkan pekerja debugger ini 22 00:01:50,570 --> 00:01:56,870 di sini, perluas folder ini dan Anda akan menemukan struktur folder yang juga Anda kerjakan, 23 00:01:56,900 --> 00:01:58,750 misalnya di folder 24 00:01:58,820 --> 00:02:05,000 pengguna Anda di sini, Anda akan menemukan aplikasinya. File js, Anda menemukan komponen. 25 00:02:05,450 --> 00:02:10,950 Jadi sekarang di aplikasi. js jika Anda membuka file itu, Anda akan melihat 26 00:02:10,960 --> 00:02:12,510 kode Anda ketika Anda 27 00:02:12,550 --> 00:02:15,560 menulisnya, jadi dalam versi yang tidak dikompilasi yang bagus karena 28 00:02:15,700 --> 00:02:21,880 mudah untuk mengenali kode Anda di sana dan sekarang di sini, misalnya katakanlah Anda ingin menghentikan kode ketika Anda Anda akan 29 00:02:21,880 --> 00:02:25,350 menambahkan tujuan baru, Anda dapat menambahkan breakpoint dengan mengklik di sebelah kiri 30 00:02:25,360 --> 00:02:27,370 nomor baris di sini sehingga Anda memiliki 31 00:02:27,370 --> 00:02:32,730 tanda biru ini dan sekarang eksekusi kode Anda akan berhenti saat Anda menekan baris kode ini lagi di sini. 32 00:02:32,830 --> 00:02:36,930 Sekarang saya mengaktifkan debugging pada emulator Android, jadi itu tidak akan berhenti jika saya mencobanya 33 00:02:36,940 --> 00:02:39,980 di iOS, itu akan berhenti jika saya mencobanya di Android. 34 00:02:40,000 --> 00:02:47,500 Kita bisa mengaktifkannya di iOS juga, di sini dengan debug remote js tapi saya tidak melakukannya, jadi mari kita pergi 35 00:02:47,500 --> 00:02:48,250 dengan Android. 36 00:02:48,310 --> 00:02:49,800 Anda dapat mengabaikan 37 00:02:49,840 --> 00:02:57,340 peringatan ini di sini, Anda dapat mengabaikannya dan sekarang tekan tambah tujuan baru dan mungkin masukkan pelajari Bereaksi Asli, klik tambahkan dan sekarang 38 00:02:57,340 --> 00:03:04,030 Anda lihat, ini macet di sini karena jika Anda kembali ke alat dev, ini sekarang dijeda, Anda melihat ini sekarang 39 00:03:04,060 --> 00:03:06,580 disorot dengan warna biru, sudah berlalu dan 40 00:03:06,670 --> 00:03:12,610 sekarang yang keren adalah Anda dapat berjalan melalui kode Anda langkah-demi-langkah dengan kontrol ini di sini, cukup bermain-main 41 00:03:12,760 --> 00:03:18,400 dengan mereka dan Anda juga dapat mengarahkan kursor ke hal-hal untuk dilihat ke dalam kode Anda, misalnya 42 00:03:18,400 --> 00:03:21,060 untuk melihat nilai saat ini dalam judul sasaran. 43 00:03:21,070 --> 00:03:25,480 Sekarang kita cukup maju melalui langkah ini selangkah demi selangkah dengan tombol ini, Anda 44 00:03:25,480 --> 00:03:30,220 dapat masuk ke panggilan fungsi dengan tombol ini atau keluar dari sana dengan tombol ini 45 00:03:31,210 --> 00:03:35,430 dan Anda selalu dapat melanjutkan eksekusi kode dengan tombol putar biru ini. 46 00:03:38,030 --> 00:03:43,850 Ini bisa menjadi alat yang sangat kuat untuk benar-benar menyelami aliran kode Anda karena memungkinkan Anda 47 00:03:43,850 --> 00:03:45,810 untuk sepenuhnya memahami apa yang 48 00:03:45,890 --> 00:03:51,240 terjadi, untuk melihat nilai-nilai Anda saat runtime dan untuk mendapatkan kontrol penuh atas kode Anda. 49 00:03:51,260 --> 00:03:56,960 Sekarang jika Anda ingin mempelajari lebih lanjut tentang cara menggunakan alat debugging Chrome, Anda akan menemukan tautan bermanfaat yang 50 00:03:56,990 --> 00:04:01,040 dilampirkan pada kuliah ini yang memiliki informasi lebih lanjut tentang alat debugging Chrome.