Menerapkan Chrome Developer Tools secara efektif (Tutorial)

Debugging yang efektif di Chrome: Menggunakan Exception-Breakpoints

Semua video tutorial Menerapkan Chrome Developer Tools dengan efektif (Tutorial)

Di panduan ini, Anda akan belajar cara bekerja secara efisien dengan Poin-Poin Exception di Chrome Developer Tools. Poin-Poin Exception memungkinkan Anda mendepur JavaScript Anda dengan cara secara otomatis menghentikan program ketika pengecualian (exception) terjadi. Hal ini sangat berguna ketika Anda ingin melacak dan memahami kesalahan dalam kode Anda, di mana dan mengapa mereka terjadi. Penggunaan Poin-Poin (Breakpoints) adalah keterampilan yang sangat penting bagi setiap pengembang yang ingin memastikan kode mereka bebas dari kesalahan. Mari langsung masuk ke detailnya!

Poin-Poin Penting

  • Poin-Poin Exception akan menghentikan program ketika terjadi pengecualian.
  • Anda dapat membedakan antara Pengecualian yang "Tidak Ditangkap" dan "Ditangkap".
  • Menyisipkan pernyataan debugger; memungkinkan Anda untuk menghentikan program di titik tertentu.
  • Penting untuk menghapus pernyataan debugger; setelah selesai mendepur untuk menjaga kode produksi tetap bersih.

Panduan Langkah Demi Langkah

1. Mengaktifkan Poin-Poin Exception

Untuk mengaktifkan penghentian otomatis saat pengecualian terjadi, buka Chrome Developer Tools. Pergi ke menu "Sources" dan temukan bagian "Breakpoints". Centang kotak "Pause on Exceptions" dan "Pause on Caught Exceptions".

Dengan demikian, program akan berhenti secara otomatis ketika terjadi pengecualian. Lakukan ini dengan menggunakan kode berikut, yang memicu sebuah pengecualian sederhana.

Debugging yang efektif di Chrome: Menggunakan Exception-Breakpoints

Ketika Anda menjalankan kode tersebut, program akan berhenti di tempat di mana pengecualian dilempar.

Debugging yang efektif di Chrome: Menggunakan Exception-Breakpoints

2. Mengelola Pengecualian "Ditangkap" dan "Tidak Ditangkap"

Jika Anda menonaktifkan opsi untuk "Pengecualian Ditangkap", Anda akan melihat bahwa program tidak berhenti ketika pengecualian ditangkap.

Debugging efektif di Chrome: Menggunakan Exception-Breakpoints

Namun, jika Anda memiliki pengecualian dalam blok try-catch, pengecualian akan ditangkap di blok Catch dan program akan melanjutkan di sana.

Debugging yang efektif di Chrome: Menggunakan Exception-Breakpoints

Di sini Anda dapat melihat bahwa pengecualian telah ditangkap dan Anda dapat melihat keluaran konsol dengan kesalahan yang terkandung dalam pengecualian tersebut.

Debugging yang efektif di Chrome: Menggunakan Exception-Breakpoints

3. Aplikasi ke Berbagai Poin-Poin (Breakpoints)

Jika Anda memiliki beberapa Poin-Poin di file yang berbeda, akan sulit diatur. Namun, Anda dapat dengan mudah menonaktifkan semua Poin-Poin dengan mengklik kanan pada salah satu Poin-Poin dan memilih opsi "Menonaktifkan semua Poin-Poin".

Debugging yang efektif di Chrome: Menggunakan Exception-Breakpoints

Dengan cara ini, semua Poin-Poin akan dinonaktifkan, dan Anda dapat mengaktifkannya kembali nanti jika diperlukan.

4. Menggunakan Pernyataan debugger;-

Salah satu teknik yang berguna dalam Depurasi adalah menyisipkan pernyataan debugger; dalam kode Anda. Ini akan membuat program berhenti di titik tersebut sekali halaman dimuat kembali.

Debugging yang efektif di Chrome: Menggunakan Exception-Breakpoints

Yang perlu diingat saat menggunakan Pernyataan Debugging adalah menghapusnya dari kode Anda sebelum menuju ke lingkungan produksi, karena tidak akan membantu dalam aplikasi langsung.

Debugging yang efektif di Chrome: Menggunakan Exception-Breakpoints

Saat Anda menyisipkan pernyataan debugger;, program akan berhenti di titik tersebut, memungkinkan Anda untuk memeriksa variabel saat ini dan sejarah program.

5. Tindakan Pencegahan saat Bekerja dengan Pengecualian

Saat bekerja dengan pengecualian, Anda harus berhati-hati, terutama jika Anda menggunakan banyak Perpustakaan Pihak Ketiga. Mereka juga dapat memicu pengecualian, dan hal ini dapat mengganggu jika kode Anda terus-menerus berhenti.

Debugging yang efektif di Chrome: Menggunakan Exception-Breakpoints

Jika Anda tahu bahwa aplikasi Anda menghasilkan pengecualian, berguna untuk mengaktifkan opsi "Pengecualian Yang Tidak Ditangkap" untuk mendeteksinya selama proses debugging.

Debugging yang efektif di Chrome: Menggunakan Exception-Breakpoints

Ingatlah bahwa tidak setiap pengecualian mengakibatkan masalah. Sebuah pengecualian mungkin hanya ditangkap dan tidak mempengaruhi pengalaman pengguna secara negatif.

Rangkuman

Dalam panduan ini, Anda telah belajar bagaimana menggunakan Poin Pengecualian di Chrome Developer Tools untuk menemukan kesalahan dalam kode JavaScript Anda. Anda telah melihat bagaimana cara mengaktifkan dan menggunakan Poin Pengecualian ini secara efektif untuk memastikan aplikasi Anda berjalan lancar. Memahami dan menerapkan teknik-teknik ini akan secara signifikan meningkatkan efisiensi Anda dalam proses debugging.

Pertanyaan Umum

Bagaimana cara mengaktifkan Poin Pengecualian di Chrome Developer Tools?Buka Chrome Developer Tools, pergi ke "Sumber" dan aktifkan "Pause on Exceptions" dan "Pause on Caught Exceptions".

Apa perbedaan antara Pengecualian "Caught" dan "Uncaught"?"Pengecualian yang Ditangkap" adalah yang ditangani dalam blok try-catch, sedangkan "Pengecualian yang Tidak Ditangkap" tidak ditangkap dan langsung diteruskan ke penangan kesalahan.

Bagaimana cara menonaktifkan semua Poin Pengecualian saya?Klik kanan pada satu Poin Pengecualian dan pilih "Disable all Breakpoints" dari menu konteks.

Apa itu pernyataan debugger;- dan bagaimana cara menggunakannya?Pernyataan debugger;- adalah perintah JavaScript yang menghentikan program di titik tersebut. Anda harus menghapusnya dari kode Anda setelah selesai debugging.

Mengapa saya harus menghapus pernyataan debugger;- sebelum masuk produksi?Ini dapat membuat aplikasi berhenti di titik yang tidak Anda inginkan, dan oleh karena itu mempengaruhi pengalaman pengguna secara negatif.