Memanfaatkan Debugger di JetBrains (IntelliJ/WebStorm/PhpStorm)

Pada postingan sebelumnya saya sudah menulis tentang bagaimana cara mensetup debugger di projects PHP (Laravel) dan Debugger di NodeJS (NestJS + NextJS). Kali ini kita akan melanjutkan pembahasan ke tahap berikutnya: bagaimana memanfaatkan debugger yang sudah terpasang, supaya bisa digunakan secara efisien ketika kita mengembangkan aplikasi.

Debugger adalah salah satu fitur terkuat dari IDE JetBrains (IntelliJ IDEA, PhpStorm, WebStorm, dsb). Dengan debugger, kita bisa menghentikan eksekusi kode di titik tertentu (breakpoint), lalu memeriksa isi variabel, alur logika, dan melakukan evaluasi ekspresi tanpa perlu menambahkan console.log atau dd() di kode.

1. Menambahkan Breakpoint

Untuk mulai debugging, pertama kita perlu menentukan titik di mana eksekusi kode akan dihentikan.
Caranya sederhana:

• Klik di sisi kiri baris kode pada editor (gutter area).

• Atau klik kanan > Add Breakpoint.

Contoh pada NestJS guard:

Saya menaruh breakpoint di baris ini untuk melihat apa isi dari isAllowedEndpoint.

2. Menjalankan Aplikasi dengan Mode Debug

Setelah breakpoint dipasang:

• Jalankan aplikasi dengan tombol Debug (ikon serangga hijau).  

  

  Aktifkan Debugger dengan klik icon serangga

  
  

  

  Bila tidak langsung nyala klik link di Process Console

  

  Process Console menunjukan project sudah menyala dengan debugger aktif.

• Aplikasi akan berhenti tepat di baris kode yang sudah diberi breakpoint.  

  

  Debugger berhenti di breakpoint 

Di bagian bawah IDE akan muncul panel Debug yang berisi informasi:   

Panel debug menunjukan thread yang sedang aktif

• Threads aktif

• Variabel lokal (Local Variables)

• Closure

• Global scope

3. Memeriksa Variabel di Debugger

Saat eksekusi berhenti, kita bisa melihat nilai dari setiap variabel. Misalnya: 

• context → berisi ExecutionContextHost

• request → berisi objek IncomingMessage dari NestJS

• tenantId → hasil dari request.user?.tenant_id

Cukup klik untuk meng expand /  membuka struktur object dan melihat detailnya.

4. Menggunakan Evaluate Expression

Salah satu fitur favorit adalah Evaluate Expression (Alt+Shift+8).
Dengan ini kita bisa:

• Mengetik ekspresi seperti request.user atau request.ip

• Melihat hasil evaluasi secara langsung

• Melakukan tes logika tanpa mengubah kode

Contohnya, ketika ingin memastikan apakah tenant_id benar-benar dikirim, cukup evaluasi: 

 

5. Navigasi Debugger (Step In, Step Over, Step Out)

Pada toolbar debugger, ada beberapa tombol penting untuk mengendalikan alur eksekusi:  

Debugger panel tools

• ▶️ Resume Program → lanjutkan ke breakpoint berikutnya

• ⏭ Step Over → jalankan baris sekarang tanpa masuk ke dalam fungsi

• ⬇️ Step Into → masuk ke dalam fungsi yang sedang dipanggil

• ⬆️ Step Out → keluar dari fungsi saat ini

• 🔁 Rerun → jalankan ulang debug session

• ⏹ Stop → hentikan debug session

Dengan kombinasi ini, kita bisa mengikuti alur program dengan presisi.

5. Penutup dari Penulis

Debugger adalah senjata ampuh bagi developer. Dengan menguasai cara memanfaatkannya:

• Kita bisa memahami alur kode lebih cepat

• Menemukan bug dengan lebih mudah

• Menghemat waktu debugging dibanding cara tradisional

Baik di Laravel maupun di NestJS, workflow debugging tetap sama:

pasang breakpoint → jalankan debug → evaluasi variabel → gunakan tombol navigasi debugger.