Mendebug aplikasi web bisa menjadi tugas yang menantang, terutama ketika dealing dengan kerangka kerja kompleks seperti React. Dalam panduan ini, saya akan menunjukkan kepada Anda cara menguasai debugging aplikasi React menggunakan Developer Tools Google Chrome secara efektif. Saya akan membahas teknik-teknik khusus untuk menemukan dan memperbaiki kesalahan yang paling umum. Anda harus memiliki pengetahuan tentang React untuk memahami konsep-konsep ini.
Pengetahuan Utama
- Pahami peran peta sumber saat debugging aplikasi React Anda.
- Letakkan breakpoint di tempat-tempat strategis untuk melacak alur aplikasi.
- Analisis tumpukan panggilan untuk memahami fungsi-fungsi mana yang dipanggil kapan.
Panduan Langkah Demi Langkah
Untuk memulai debugging, saya telah menyiapkan contoh sederhana aplikasi React yang menyediakan dua tombol untuk meningkatkan nilai hitung. Kami ingin memastikan bahwa status aplikasi diperbarui dengan benar.
Pertama, buka Developer Tools di Chrome. Anda dapat melakukannya dengan mengklik kanan pada halaman dan pilih "Periksa" atau cukup tekan tombol "F12".
Langkah pertama adalah menyegarkan aplikasi React Anda untuk memastikan bahwa Anda bekerja dengan status terkini. Setelah aplikasi dimuat, Anda akan melihat dua tombol untuk menghitung. Tombol pertama akan meningkatkan hitungan pertama dan tombol kedua hitungan kedua.
Ketika Anda mengklik tombol, Anda akan melihat nilai hitungan meningkat. Anda dapat memeriksa nilai-nilai ini di konsol, yang juga dapat Anda temukan di Developer Tools. Tekan dua kali "Escape" untuk menampilkan atau menyembunyikan konsol.
Langkah selanjutnya adalah mengubah kode aplikasi Anda, terutama Hook UseEffect. Hook UseEffect digunakan untuk menangani efek samping dalam React. Dalam contoh saya, saya mengaturnya untuk mencetak nilai hitungan saat ini ke konsol. Ini membantu Anda memahami seberapa sering efek ini dipicu.
Melalui konsol, Anda dapat melacak kode dan memeriksa apakah nilai-nilai ini dicetak dengan benar. Namun, jika Anda tidak mengidentifikasi array dependensi dengan benar dalam UseEffect, ini bisa mengakibatkan perilaku yang tidak diinginkan.
Untuk menguji hal ini, hapus sementara array dependensi dan amati apa yang terjadi. Kembali ke aplikasi Anda sekarang, Anda dapat menetapkan breakpoint. Klik pada angka di kolom kiri untuk menetapkan breakpoint.
Sekarang klik tombol pertama dan perhatikan bahwa eksekusi akan berhenti pada breakpoint yang ditetapkan. Ini memungkinkan Anda untuk menganalisis status aplikasi saat penanganan klik dilakukan.
Perhatikan bahwa setiap kali Anda mengklik tombol, status hanya diperbarui untuk tombol yang diklik, tetapi saat Anda mengklik tombol lain, perilaku aplikasi tidak sesuai harapan.
Sekarang Anda mulai menyelidiki kesalahan tersebut. Anda akan melihat bahwa UseEffect selalu mencetak nilai hitungan sebelumnya, bahkan saat Anda mengklik tombol hitungan lain.
Di sini, Anda harus menambahkan array dependensi kembali dan memastikan bahwa nilai hitungan saat ini adalah dependensinya. Dengan demikian, efek hanya akan dipicu saat nilai hitungan yang relevan berubah.
Ketika Anda mengulang aplikasi dan menekan tombol, Anda akan melihat bahwa keluaran konsol hanya dipicu saat hitungan berubah. Tambahkan breakpoint lain dalam pernyataan Console.Log Anda untuk memeriksa apakah nilai yang diharapkan benar-benar dicetak di sana.
Perhatikan bahwa dalam representasi kode React juga terdapat opsi Show ignore listed Frames. Ini dapat membantu untuk mencegah kode Library terkait muncul di Stack Call, yang dapat mengganggu analisis Anda.
Saat Anda telah memperbaiki kesalahan tersebut, akan bermanfaat untuk memeriksanya lagi. Anda harus memastikan bahwa kode dalam fungsi Press diuji kembali untuk mengkonfirmasi bahwa perubahan tersebut memiliki efek yang diinginkan.
Selain itu, Anda dapat menetapkan Breakpoints strategis di berbagai titik percakapan untuk memeriksa pemanggilan fungsi lebih lanjut. Secara teratur, periksa Stack Call untuk melacak semua fungsi yang dipanggil pada saat tertentu.
Ingatlah juga bahwa operasi asinkron dapat menyebabkan kehilangan state lokal, oleh karena itu, memeriksa Stack Call di titik sentral penting untuk menjaga pemahaman tentang keadaan aplikasi React Anda.
Ringkasan
Dalam tutorial ini, Anda telah belajar betapa pentingnya Chrome Developer Tools untuk mendepurasi aplikasi React dengan efektif. Menetapkan Breakpoints dan menganalisis Stack Call adalah langkah penting untuk memahami alur kode Anda dan memecahkan masalah. Dengan mengelola dependensi di UseEffect dengan benar, Anda bisa memastikan bahwa aplikasi Anda menampilkan state yang diinginkan.
Pertanyaan yang Sering Diajukan
Apa itu Breakpoint?Breakpoint adalah titik dalam kode di mana eksekusi program dihentikan untuk memeriksa eksekusi saat ini.
Bagaimana cara menggunakan array dependensi di UseEffect?Array dependensi memungkinkan Anda menentukan variabel mana yang akan memicu efek saat berubah.
Apa itu Source Maps?Source Maps menghubungkan kode yang dikompres dan diproses kembali dengan kode asli, memudahkan proses debugging.
Bagaimana cara memperhatikan operasi asinkron di Stack Call?Perhatikan bahwa pemanggilan asinkron melalui SetTimeout atau Promises mempengaruhi keadaan aplikasi dan dapat membuat variabel lokal tidak tersedia pada suatu waktu.
