Panduan Sederhana untuk Debugging di JavaScript

Pemrogram menghabiskan banyak waktu untuk mendiagnosis dan memperbaiki kesalahan dan kelalaian dalam kode mereka. Debugging memperlambat eksekusi JavaScript dan menunjukkan bagaimana data dimodifikasi baris demi baris. Karena JavaScript ditafsirkan pada waktu berjalan dan dieksekusi di dalam browser, debugging dilakukan dengan alat yang terpasang di dalam browser.

Kesalahan dalam JavaScript

1️⃣ SyntaxError
Kesalahan dalam penulisan kode menyebabkan kesalahan sintaks. Kesalahan ini terjadi saat mesin JavaScript menafsirkan kode saat dijalankan.

2️⃣ TypeError
Kesalahan ini terjadi ketika tipe data yang digunakan salah. Misalnya, menerapkan metode string.substring ke variabel yang berupa angka.

3️⃣ RangeError
Ketika kode mencoba menggunakan angka yang berada di luar kisaran nilai yang mungkin, JavaScript mendeteksi RangeError

4️⃣ URIError
Beberapa karakter alfanumerik tidak boleh digunakan dalam URL. Sebuah URlError dilempar ketika ada masalah encoding atau decoding URI karena penggunaan karakter yang dicadangkan.

5️⃣ ReferenceError
Kesalahan ini terjadi ketika kode merujuk ke variabel yang tidak ada atau tidak berada dalam cakupan kode yang dieksekusi.

6️⃣ EvalError
Kesalahan ini terjadi ketika ada masalah dengan fungsi eval(). Versi JavaScript yang lebih baru tidak menyebabkan kesalahan ini.

Alat pengembang

Semua browser modern berisi seperangkat alat pengembang untuk membantu programmer bekerja dengan HTML, CSS, dan JavaScript. Alat pengembang berisi fungsionalitas untuk men-debug JavaScript dan melihat status elemen HTML di browser. Untuk membuka alat pengembang untuk browser Google Chrome, tekan Command+Option+I (Mac) & Control+Shift+I (Windows, Linux).

Konsol

Pengembang Web dapat menampilkan pesan ke log konsol untuk memastikan kode mereka dijalankan seperti yang diharapkan. Tab "Konsol" berisi dua area:

1️⃣ Log Output Konsol: Menampilkan pesan sistem dan pengguna dari eksekusi JavaScript.

2️⃣ Antarmuka Baris Perintah Konsol: Menerima instruksi JavaScript apa pun dan segera menjalankannya.

debugger JavaScript

Debugger JavaScript dapat ditemukan di bawah tab Sumber. Debugger memungkinkan untuk menelusuri kode baris demi baris untuk melihat apa yang terjadi pada variabel saat kode dieksekusi. Di sebelah kiri adalah daftar semua file sumber yang digunakan oleh dokumen HTML. Pilih file yang akan di-debug dari daftar ini.

Cakupan

Di tab "Sumber", jendela di sebelah kanan berisi ruang lingkup. Bagian lokal dan global di bawah ini menunjukkan variabel yang didefinisikan dalam lingkup saat ini. Panel cakupan hanya diisi dengan variabel saat skrip sedang di-debug.

Breakpoint

Mesin JavaScript menjeda eksekusi kode saat mencapai breakpoint. Hal ini memungkinkan programmer untuk memeriksanya. Eksekusi dapat dilanjutkan dengan sinus cara berikut.

1️⃣ Resume Script Execution: Melanjutkan eksekusi hingga program mencapai breakpoint lain atau program berakhir.

2️⃣ Step-Over: Mengeksekusi baris kode berikutnya dalam satu langkah dan kemudian berhenti pada baris berikutnya. Ini melangkahi suatu fungsi tanpa men-debug langkah-langkah individual dari fungsi tersebut.

3️⃣ Masuk ke: Mengeksekusi baris kode berikutnya dan kemudian berhenti pada baris berikutnya. Ini akan masuk ke fungsi baris demi baris.

4️⃣ Step out: Mengeksekusi kode yang tersisa di fungsi saat ini, dan berhenti saat runtime kembali ke baris kode setelah fungsi dipanggil.

Penanganan Kesalahan

Dalam JavaScript, pernyataan try…catch memungkinkan pemrogram untuk menangani kesalahan dalam kode. Biasanya eksekusi program berhenti ketika kesalahan dilemparkan oleh mesin JavaScript. Namun, jika kode dibungkus dalam blok coba, eksekusi akan melompat ke blok tangkap jika pengecualian dilemparkan dan program akan berlanjut seperti biasa. Dimungkinkan juga untuk memunculkan kesalahan secara manual menggunakan pernyataan "lempar".

Coba…Tangkap Pernyataan

try{
 noSuchCommand(); // This function does not exist
}
catch (err) { // The code jumps to the catch block instead of stopping the program execution
 console.error(err.message)
}
console.log(“Script continues to run after the exception”); // The error message displayed in the console
```

throw(“Oops there was an error”); // The throw operator generates an error

Jika Anda menyukai posting ini, berlangganan buletin saya untuk tidak pernah ketinggalan blog, peluncuran produk, dan berita teknologi saya, dan ikuti saya di Twitter untuk utas harian tentang sumber daya pengembang web.

Lebih banyak konten di PlainEnglish.io . Mendaftar untuk buletin mingguan gratis kami . Ikuti kami di Twitter dan LinkedIn . Lihat Perselisihan Komunitas kami dan bergabunglah dengan Talent Collective kami .