Dalam postingan ini, kami membahas proses debugging aplikasi NodeJS.

Untuk versi video tutorial ini, lihat tautan ini.

Mengapa tidak console.log saja?

Pertanyaan bagus. Faktanya adalah console.log berfungsi dengan baik dan mungkin itulah cara semua orang (termasuk saya) mempelajari cara melihat apa yang terjadi di aplikasi mereka — baik di Node atau di browser. Masalah ini berskala ketika Anda mulai menangani aplikasi yang lebih kompleks yang memiliki beberapa lapisan abstraksi dan paket yang diimpor.

const users = await axios.get('url');

for (const user of users) {
  const [firstName, lastName] = user.names;
  // ...
}

Pada kode di atas, Anda mungkin dapat menebak apa yang terjadi, tetapi bagaimana jika kita tidak mengetahui apa yang dihasilkan dari permintaan API? Kita mungkin harus console.log melihat isi objek beberapa kali untuk memahami strukturnya. Bagaimana dengan kode ini?

const fetchUsers = async (url) => {
  const users = await axios.get(url);
  if (!users.length) {
    return [];
  }
  return users;
};

(async () => {
  const users = await fetchUsers('https:/someurl.com');
  console.log(users);
})();

Masih cukup mudah bukan? Bisakah Anda menemukan kesalahannya? Mungkin Anda memerlukan beberapa console.logs untuk mempersempitnya. Tapi tidak dengan debugger!

Oke baiklah, bagaimana cara kerjanya?

Pertama, Anda perlu membuat file launch.json di proyek yang sedang Anda kerjakan. Anda dapat melakukannya jika Anda mengklik bagian Run & Debug dari VSCode (tombol keempat di sebelah kiri) Dalam kasus tutorial saya, saya memilih untuk men-debug file index.js saya, jadi launch.json saya

Setelah ini, Anda dapat menavigasi kembali ke editor Anda dan mengatur breakpoint di mana saja di file Anda (lingkaran merah yang muncul saat Anda mengarahkan mouse ke kiri nomor baris). Lalu, luncurkan kode Anda menggunakan tombol putar di kiri atas editor kode Anda.

Anda berada dalam mode debug! Di bagian tengah atas layar, Anda akan melihat beberapa tombol yang berhubungan dengan langkah-langkah debugging yang dapat Anda lakukan. Dari kiri ke kanan:

  • Lanjutkan: biarkan program Anda menyelesaikan eksekusi (jika tidak ada breakpoint lain)
  • Melangkah: periksa kode Anda baris demi baris
  • Melangkah ke: masuk ke fungsi yang sedang dijalankan
  • Keluar: tinggalkan fungsi yang sedang dijalankan
  • Restart: memulai proses debug lagi
  • Berhenti: menghentikan proses debug

Hanya itu saja! Dalam video tutorial, saya membahas cara men-debug server NodeJS yang prosesnya sedikit lebih rumit.