Cara Debug di Visual Studio Code dengan Xdebug dan Xampp

Beberapa hari terakhir ini mimin berkutat dengan Visual Studio Code atau VSCode untuk project baru, berhubung baru pertama kali pake visual studio code jadi agak bingung untuk debug di visual studio code dengan xdebug dan web server menggunakan xampp.

Setelah hilir mudik cari tutorial di internet, akhirnya nemu juga yang pas di hati, kayak nyari jdoh yak? 😀 Iya, karena memang ada beberapa tutorial yang mungkin sebenarnya sudah sesuai, akan tetapi jalan tutorialnya membingungkan.

Akhirnya mimin nemu di salah satu web bule, yang membahas cara debugging di visual studio code dengan xdebug pada web server localhost di xampp.

Jadi bagaimana cara debug di Visual Studio Code? Sebelum memulai debungging, ada beberapa hal yang harus kamu persiapkan, diantaranya.

  • Jika belum punya Visual Code bisa download di https://code.visualstudio.com/
  • Jika belum punya xampp bisa download di https://www.apachefriends.org/download.html

Jika semuanya sudah lengkap, sudah di install semua, kita lanjut ke tahap konfigurasi untuk debugging memakai visual studio code.

Konfigurasi XDebug di PHP.


  • Buka phpinfo, biasanya ada di alamat http://localhost/dashboard/phpinfo.php untuk localhost.
  • Blok semua isi phpinfo kemudian copy.
  • Buka XDebug Wizard tool.
  • Letakan copy-an dari phpinfo di kotak yang disediakan di XDebug Wizard Tool, kemudian klik tombol Analyse my phpinfo() output, maka akan tampil rekomendasi file xdebug yang harus di download beserta cara konfigurasinya. Ikuti langkah tersebut [lihat gambar di bawah].
xdebug konfig
gambar generate dari xdebug untuk konfigurasi xdebug di php

Setting PHP.ini untuk XDebug di Xampp


  • Setelah file xdebugnya di download, letakkan file php_xdebug-version.dll di folder xammp/php/ext.
  • Kemudian buka file php.ini dengan notepad, lokasinya biasanya ada di xammp/php
  • Letakkan kode berikut di baris paling bawah pada file php.ini, ganti namafile-xdebug dengan nama file xdebug yang telah di download sebelumnya.
[XDebug]
zend_extension = "c:\xampp\php\ext\namafile-xdebug.dll"
xdebug.remote_autostart = on
xdebug.profiler_append = 0
xdebug.profiler_enable = 0
xdebug.profiler_enable_trigger = 0
xdebug.profiler_output_dir = "c:\xampp-php7.1.10\tmp"
;xdebug.profiler_output_name = "cachegrind.out.%t-%s"
xdebug.remote_enable = 1
xdebug.remote_handler = "dbgp"
xdebug.remote_host = "127.0.0.1"
xdebug.idekey = "PHPSTORM"
xdebug.remote_log = "c:\xampp-php7.1.10\tmp\xdebug.txt"
xdebug.remote_port = 9000
xdebug.trace_output_dir = "c:\xampp\tmp"
;36000 = 10hours
xdebug.remote_cookie_expire_time = 36000

Contoh peletakkan code untuk xdebug di php.ini

Jika semuanya sudah, tahap selanjutnya adalah mengkonfigurasi Visual Studio Codenya.

Konfigurasi Visual Studio Code untuk XDebug


Jika sudah konfigurasi xdebug untuk PHPnya, selanjutnya adalah konfigurasi untuk visual studio code, berikut step-by-stepnya.

  • Jalankan visual studio code
  • Buka tab Extensions, kemudian cari extension PHP Debug.
  • Install PHP Debug.
install php debug
gambar install php debug
  • Kemudian kembali ke tab Debug, tambah konfigurasi dengan memilih menu dropdown “Add Configuration”.
add configuration
gambar add configuration
  • Sesaat setelah menekan menu Add Configuration, akan muncul pilihan bahasa pemrogramman yang digunakan, pada tutorial ini adalah PHP, pilih PHP.
pilih php
gambah pilih PHP
  • Setelah memilih PHP, akan muncul jendela untuk edit launch.json, pada bagian “launch currently open script”, tambahkan baris
    runtimeExecutable dan valuenya isi dengan path php, seperti contoh di bawah.
edit launch json
gambar isi launch json.
  • Setelah menambahkan runtimExecutable kemudian Save.

Cara Menggunakan Visual Studio Code Debug


Setelah semua konfigurasi di atas selesai, tahapan selanjutnya adalah bagaimana cara menggunakannya? Berikut stepnya.

  • Buka file .php yang akan di debug, kemudian beri breakpoints pada baris kode yang akan di debug.
gambar titik warna merah adalah breakpoints, untuk memberikan titik, gunakan kursor dan klik di baris kode yang akan diberi breakpoints.
  • Pilih “Launch currently open script” pada configuration.
  • Tekan F5 untuk mejalankan debugging.

Menggunakan Listen Debug

Untuk menggunakan Listen Debug, kamu harus menginstall dulu extension chrome, yaitu Debug Helper.

  • Setelah Debug Helper terpasang.
  • Buka file .php yang akan di debug di Visual Studio Code.
  • Tambahkan breakpoints ke baris kode.
  • Ubah konfigurasi dari Launch currently open script ke Listen Debug.
  • Tekan F5 untuk menjalankan debugging.
  • Buka browser chrome dan arahkan ke halaman yang akan di debug, misalnya localhost/aplikasi/index.php
  • Klik extensions Xdebug Helper, dan pilih menu “Debug“, maka icon xdebug akan berubah dari abu-abu menjadi hijau.
  • Refresh browser, dan lihat reaksi di Visual Studio Code.
  • Selesai.

Penutup


Demikian cara debug php di Visual Studio Code dengan Xdebug dan Xampp, semoga bermanfaat. Salam 🙂

loading...