idwebhost Bikin Website Sekarang

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

7 Okt 2024
Cara Debug Node.js di VS Code: Coba 3 Langkah Efektif Ini! campaign-unlimited

Kamu pasti udah nggak asing lagi dengan Node.js, kan? Runtime JavaScript yang satu ini memang populer banget buat bikin aplikasi backend yang performanya oke. Tapi, sama seperti bahasa pemrograman lainnya, Node.js juga rentan terhadap bug.

Debugging adalah proses menemukan dan memperbaiki bug-bug ini. Dengan sifat asynchronous dan non-blocking yang dimiliki Node.js, debugging bisa jadi sedikit tricky. 

Untungnya, ada alat yang bisa bantu kita, yaitu Visual Studio Code. Yuk, kita belajar cara men-debug Node.js dengan menggunakan Visual Studio Code.

Cara Debug Node.Js di VS Code

Node.js adalah platform yang memungkinkan kita menjalankan kode JavaScript di luar browser. Dengan Node.js, kamu bisa menggunakan JavaScript untuk membangun berbagai macam aplikasi, mulai dari aplikasi web server-side, aplikasi desktop, hingga tools command-line. 

Visual Studio Code (VS Code) dianggap sebagai editor kode yang sangat populer, terutama di kalangan pengembang Node.JS. Hal ini dikarenakan VS Code menyediakan konfigurasi debug yang sederhana dan intuitif untuk proyek Node.js. 

Mengutip dari laman Visual Studio Code, kamu bisa menerapkan tiga cara untuk men-debug program Node.js di VS Code:

  • Menggunakan Auto Attach untuk men-debug proses yang kamu jalankan id terminal terintegrasi VS Code
  • Menggunakan Javascript Debug Terminal, mirip dengan terminal terintegrasi
  • Menggunakan Launch Config untuk memulai program kamu, atau Attach to Process, yang diluncurkan di luar VS Code

Berikut ini tiga langkah efektif cara men-debug Node.js di Visual Studio Code:

Langkah 1: Tambahkan Konfigurasi

Sebelum mengkonfigurasi Visual Studio Code untuk men.debug aplikasi Node.js, kamu perlu membuat file launch.json di direktori .vscode pada proyek kamu. File ini berfungsi menentukan pengaturan konfigurasi untuk sesi debug kamu nantinya. 

Berikut ini contoh sederhana file launch.json untuk aplikasi Node.js:

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "name": "Launch",
            "request": "launch",
            "program": "${workspaceFolder}/index.js"
        }
    ]
}

Pada contoh tersebut, ada beberapa istilah yang perlu kamu ketahui:

  • Type: menentukan jenis sesi debug (dalam kasus ini, Node.js)
  • Name: nama orang untuk konfigurasi
  • Request: menentukan jenis permintaan (launch atau attach)
  • Program: Jalur ke berkas Javascript utama yang ingin kamu debug.

Langkah 2: Jalankan Proyek dalam Mode Debug

Cara Debug Node.Js di VS Code

Setelah membuat file launch.json, kini saatnya kamu men-debug aplikasi Node.js kamu di VS Code, dengan cara-cara berikut ini:

  • Mengatur Breakpoint

Breakpoint adalah penanda dalam kode yang memberi VS Code untuk menghentikan eksekusi pada titik tertentu. Perintah ini akan membantu kamu saat memeriksa nilai variabel, menelusuri kode baris demi baris, dan mengidentifikasi potensi masalah. 

Berikut ini cara mengatur breakpoint:

  1. Buka file Node.js kamu di dalam VS Code
  2. Klik kolom di sebelah kiri nomor baris tempat kamu ingin menghentikan sementara eksekusi. Titik merah akan muncul yang menunjukkan breakpoint. 
Cara Debug Node.js di VS Code
  • Memulai Debugging

Setelah kamu mengatur breakpoint, selanjutnya kamu bisa langsung memulai debug file Node.js kamu:

  1. Tekan F5 pada keyboard. Perintah ini akan meluncurkan aplikasi Node.js kamu ke dalam mode debug
  2. Klik tombol “Start Debugging”. Kamu bisa menemukan tombol ini di bagian Debug vide pada VS Code. 

Begitu proses debug dimulai, VS Code akan mulai mengeksekusi kode Node.js kamu. Ini ditandai terminal VS Code kamu akan berubah menjadi oranye di bagian bawah. Selain itu, di bagian Debug Console akan mencetak beberapa pesan seperti ini “Debugger Attached”. 

Proses ini akan berhenti di breakpoint pertama yang kamu atur. Di saat itulah kamu bisa memeriksa status aplikasi kamu. 

Cara Debug Node.js di VS Code

Langkah 3: Selidiki Hasil Debug

Kini saatnya kamu menganalisis hasil dari debug file Node.js kamu. Kamu dapat menelusuri kode seperti yang kamu lakukan di browser dengan tombol play, step over, step in, restart, dan lain-lain dii bagian atas IDE. 

VS Code juga akan menyoroti breakpoint dan baris tempat kamu berhenti dengan warna kuning, agar mudah diikuti. 

Saat kamu berpindah dari breakpoint ke breakpoint lain, kamu akan melihat program mencetak console.logs dalam debug console di bagian bawah IDE VS Code dan sorotan kuning akan mengikuti kamu. 

Berikut ini beberapa istilah pada tombol perintah yang perlu kamu tahu saat menganalisis hasil debug Node.js:

  • Inspect Variabels: Arahkan kursor mouse kamu ke variabel untuk menampilkan nilai variabel. Ini penting untuk memahami status aplikasi kamu.
  • Step over: Perintah ini mengeksekusi baris kode saat ini dan beralih ke baris berikutnya. Ini berguna untuk menelusuri kode kamu baris demi baris.
  • Step into: Jika baris saat ini memanggil fungsi, steps into akan membawa kamu ke dalam fungsi tersebut. Kamu bisa memeriksa kodenya secara terperinci.
  • Step out: Perintah ini mengembalikan kamu ke fungsi pemanggil dari fungsi saat ini.
  • Continue: Perintah ini melanjutkan eksekusi hingga mencapai breakpoint berikutnya atau akhir program.
  • Evaluate expression: kamu dapat mengetik ekspresi di Debug Console untuk menghitung nilainya. Ini berguna untuk menguji berbagai skenario atau memverifikasi kalkulasi.
  • View call stack: Call stack menunjukkan kepada kamu rangkaian fungsi yang telah dipanggil hingga ke titik saat ini. Ini membantu kamu memahami alur program kamu.

Alternatif Alat Debug Node.Js Selain di VS Code

Kamu juga bisa menggunakan alternatif alat untuk men-debug Node.js selain di Visual Studi Code. Setiap alat memiliki fitur dan keunggulan unik yang bisa kamu sesuaikan dengan referensi dan dan kebutuhan proyek kamu. 

Berikut ini 5 alat alternatif debug node.js selain dengan Visual Studio Code:

#1 Node Inspector V8

Inspector V8 ini menyediakan alat men-debug yang dapat kamu gunakan untuk file Node.js. Sayangnya, opsi ini memakan waktu dan sulit digunakan. 

Jika kamu ingin menggunakannya, sebaiknya digunakan saat kamu menjalankan kode di server jarak jauh dan tidak dapat terhubung dari tempat lain. 

#2 Chrome DevTools

Chrome DevTools dapat kamu gunakan untuk men-debug aplikasi Node.js yang berjalan di lingkungan browser (misalnya, menggunakan Node.js REPL atau aplikasi web). Alat ini menawarkan berbagai fitur debugging, termasuk breakpoint, call stack, dan pemeriksaan variabel. 

#3 WebStorm

Webstorm adalah IDE canggih yang menyediakan dukungan luar biasa untuk pengembangan Node.js, termasuk debugging. 

Kamu bisa meletakkan breakpoint langsung di kode JavaScript atau TypeScript kamu sehingga kamu tidak lagi memerlukan pernyataan apapun. 

#4 Eclipse

Eclipse adalah IDE serbaguna yang dapat kamu gunakan untuk men-debug Node.js. Tersedia beberapa plugin untuk meningkatkan kemampuan debugging di Eclipse. 

Untuk men-debug aplikasi Node.js dengan Eclipse, kamu  dapat mengklik kanan pada file JavaScript mana pun dan pilih “Debug As… > Node program” atau kamu dapat membuat konfigurasi debug. 

#5 IntelliJ IDEA

Untuk men-debug aplikasi Node.js kamu dengan IntelliJ, kamu dapat melampirkan debug ke aplikasi yang sudah berjalan dalam mode debug, dengan cara berikut:

  • Jalankan aplikasi Node.js dengan tanda –inspect , misalnya buka terminal (ALT + F12) dan ketik yang berikut ini:

node –inspect <name of file: eg. index.js>

  • Setelah sesi debug dimulai, kamu akan mendapatkan link Debugger listening <host>:<port> di terminal kamu, buka link tersebut dan mulai men-debug Node.js kamu. 
Cara Debug Node.Js di VS Code

Jenis Error yang Ditemukan saat Debug Node.js

Dengan men-debug Node.js di VS Code atau alat lainnya, kamu bisa memastikan aplikasi atau website yang kamu buat tidak sering error atau crash. Selain itu, kamu bisa mengoptimalkan bagian kode yang lambat serta memudahkan pengembangan website atau aplikasi selanjutnya. 

Dalam prosesnya, kamu akan menemukan beberapa masalah setelah men-debug Node.js. Namun, terdapat lima masalah umum terjadi dan harus kamu pahami:

  • Error Syntax: Masalah ini terjadi karena kesalahan penulisan kode, seperti tanda kurung tidak lengkap, titik koma hilang, dan penggunaan kata kunci yang salah.
  • Error Runtime: Kesalahan ini terjadi ketika kode sedang dieksekusi, seperti mencoba mengakses properti yang tidak ada pada objek, atau membagi angka dengan nol.
  • Masalah Asinkron: Node.js bersifat asinkron, sehingga urutan eksekusi kode tidak selalu linier. Hal ini bisa menyebabkan masalah seperti race condition atau callback hell. 
  • Memory Leaks: Alokasi memori yang tidak dibebaskan, seperti variabel global yang tidak pernah dihapus atau event listener yang tidak dilepas.
  • Masalah Kinerja: Kode yang tidak efisien, penggunaan algoritma yang lambat, atau masalah pada database. 

Kesimpulan

Dalam tutorial ini, kita telah membahas cara debug Node.js di Visual Studio Code, masalah-masalah yang sering muncul dalam sesi debug, dan alat alternatif selain VS Code untuk debug Node.js. 

Dengan sering melakukan debugging, kamu akan terbiasa dengan berbagai jenis kesalahan yang mungkin terjadi dalam kode Node.js. Dengan begitu, kamu akan terbiasa menulis code yang lebih bersih, terstruktur, dan mengurangi risiko munculnya bug di masa depan. 

Lagi nyari hosting yang cocok buat project Node.js kamu? IDWebhost bisa jadi solusinya. Lingkungan server yang optimal dan dukungan teknis yang siap membantu bikin kamu lebih produktif.

Ade Gusti

Member since 7 Aug 2024