Cara Debug Node.js di VS Code: Coba 3 Langkah Efektif Ini!

Debugging adalah salah satu keterampilan penting dalam pengembangan aplikasi. Menggunakan debugger di Visual Studio Code (VS Code) untuk meng-debug proyek Node.js dapat menghemat banyak waktu dan mengurangi potensi kesalahan yang bisa terjadi. Berikut adalah panduan 3 langkah efektif untuk melakukan debugging aplikasi Node.js di VS Code.

🔍 Apa Itu Debugging?

Debugging adalah proses menemukan dan memperbaiki kesalahan (error) atau bug dalam kode sumber sebuah aplikasi. Dengan melakukan debugging, pengembang dapat memahami alur kode dan menemukan di mana kesalahan terjadi.

⚙️ Persyaratan Sebelum Debugging

Sebelum mulai debugging, pastikan hal-hal berikut sudah siap:

Pastikan VS Code Sudah Terinstal
Jika belum, unduh dan instal VS Code di situs resmi VS Code.
Pastikan Node.js Sudah Terinstal
Unduh dari situs resmi Node.js dan pastikan terinstal dengan benar.
Buka Proyek Node.js di VS Code
Buka folder proyek Node.js Anda di VS Code dengan File > Open Folder.
Instalasi Debugger Jika Diperlukan
Debugger sudah terintegrasi dengan VS Code, namun jika perlu, periksa ekstensi terkait di Extensions.

🛠️ Langkah 1: Konfigurasi Debugger di VS Code

Buka Panel Debugging di VS Code
Di sisi kiri VS Code, klik ikon Debugging seperti berikut:
```
(ikon) Debug atau tekan `Ctrl + Shift + D`.
```
Klik Tombol Create a launch.json file
- Jika Anda baru pertama kali mengatur debugging, VS Code akan meminta Anda untuk membuat file launch.json.
- Klik tombol tersebut dan pilih Node.js dari daftar yang muncul.

Atur Konfigurasi Debugging dalam launch.json
File ini akan dibuat secara otomatis dengan konfigurasi dasar seperti contoh berikut:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "skipFiles": ["<node_internals>/**"],
      "program": "${workspaceFolder}/app.js"
    }
  ]
}

Ganti program dengan jalur ke file utama aplikasi Node.js Anda, misalnya app.js.

🚀 Langkah 2: Atur Breakpoint

Breakpoint adalah titik di mana eksekusi kode akan berhenti untuk memungkinkan Anda memeriksa status kode dan variabel.

Tempatkan Breakpoint di Kode Anda
- Buka file JavaScript Anda (misalnya app.js).
- Klik di sebelah kiri pada nomor garis tempat Anda ingin berhenti untuk debugging.
Contoh:
```
function hitungJumlah(a, b) {
    let hasil = a + b;
    console.log(hasil);
    return hasil;
}
hitungJumlah(5, 10);
```
- Tempatkan breakpoint di console.log(hasil);.
Breakpoint akan ditandai dengan lingkaran merah.

🔎 Langkah 3: Jalankan Debugging

Setelah Anda mengatur konfigurasi dan breakpoint, saatnya menjalankan debugging.

Klik Tombol Start Debugging atau Tekan F5
- Tombol ini ada di panel Debugging yang Anda buka sebelumnya.
Debugger Berhenti di Breakpoint
Jika breakpoint sudah diatur, eksekusi akan berhenti di titik tersebut.
Gunakan Panel Debugging untuk Menganalisis Variabel dan Alur Kode
Di bagian bawah, Anda dapat melihat nilai variabel, memeriksa call stack, dan melanjutkan kode dengan tombol seperti:
- Continue (F5) untuk melanjutkan eksekusi.
- Step Over (F10) untuk menjalankan kode satu langkah ke depan.
- Step Into (F11) untuk masuk ke dalam fungsi.
- Step Out (Shift + F11) untuk keluar dari fungsi.

💡 Tips Debugging Node.js di VS Code

Gunakan Log Debug
Gunakan console.log() untuk mencetak informasi yang Anda butuhkan selama debugging.
Gunakan Debug Console
Di VS Code, Debug Console memungkinkan Anda menjalankan kode secara interaktif saat debugging.
Periksa Variabel dengan Inspect Tool
Anda bisa melihat variabel yang sedang aktif saat eksekusi berhenti di breakpoint melalui tab Variables di sisi Debug Panel.
Gunakan node --inspect Jika Debugging Manual
Jika debugging dengan VS Code tidak cocok, jalankan dengan:
```
node --inspect-brk app.js
```
Lalu sambungkan VS Code dengan URL debugging yang muncul.

📊 Contoh Debugging Manual dengan Node.js Command Line

Jika Anda lebih nyaman dengan debugging di luar VS Code, gunakan node --inspect:

node --inspect-brk app.js

Lalu akses URL yang muncul di VS Code (biasanya chrome://inspect) untuk memulai debugging.

🔧 Debugging dengan Breakpoints & Tools Lainnya

VS Code juga memungkinkan debugging melalui ekstensi atau penyesuaian konfigurasi tambahan. Pastikan Anda memahami cara kerja breakpoint dan debugging dengan berbagai langkah berikut jika ada masalah tambahan.

✨ Kesimpulan

Dengan mengikuti 3 langkah ini, Anda akan lebih mudah memahami dan menemukan bug dalam proyek Node.js Anda:

Atur Konfigurasi Debugger dengan launch.json.
Tentukan Breakpoint di tempat kode yang ingin Anda analisis.
Jalankan Debugging menggunakan tombol F5 dan gunakan fitur debugging seperti Step Into dan Continue.

Dengan praktik ini, Anda akan lebih produktif dan efisien saat mengembangkan aplikasi Node.js menggunakan VS Code. 🚀

Selamat mencoba dan happy coding! 💻💡

Cara Debug Node.js di VS Code: Coba 3 Langkah Efektif Ini!