Setup X-Debug Untuk PHP di VS Code

Dari awal saya mulai coding, tools profiler dan debug itu fitur wajib untuk digunakan.

Tadinya saya menggunakan phpstorm untuk develop aplikasi dengan PHP tapi belakangan pindah ke vscode, karena phpstorm super lemot.

Di vscode untuk coding php belum ada fitur debug yg bisa lgsg pakai, untungnya extension yg bisa ditambahkan super super lengkap, top !

Khusus PHP di vscode ini bisa menggunakan x-debug, agak ribet untuk instalasi, tapi sepadanlah untuk membantu kerjaan, berikut pengalaman saya sampai bisa jalan. Ini sebagai NTMS juga.. note to myself, siapa tahu harus install lagi di waktu mendatang. Langkah-langkahnya :

1. Pasang extension php debug di vscode
2. Pasang extension xdebug helper di browser 
3. Download library x-debug
4. Set php.ini dan restart
5. Setting konfigurasi vscode
6. Debuging
7. Profiling

Tapi sebelum mulai baiknya cari tahu tentang system kita via wizard di https://xdebug.org/wizard

Cara cepat untuk paste data php-info, buka command prompt dan jalankan php -i

Atau c:\>php -i > d:\phpinfo.txt

Kemudian pastekan isi phpinfo.txt ke bagian 1 dan klik analyse outputnya, dari analyse akan muncul summary dan instruksi untuk diikuti, untuk saya, detil langkah2nya :

Install extension PHP Debug di vscode

Dari sidebar pilih icon extension atau shortcut CTRL+SHIFT+X, search php debug, dan install

Pasang extension di web-browser

Khusus browser berbasis chrome, bisa download extension xdebug helper di sini 

Download library x-debug

Sebelum download library, cek versi php di command prompt dengan sintaks : c:\>php -v 

Download library di : https://xdebug.org/download#releases

Pastikan versi bit, library dan VC sesuai, gunakan versi TS (thread safe), karena kalau versi yg didownload salah akan muncul error spt ini :

Bagian atas error/failed, dan bawah jalan lancar

Setting php.ini

Tambahkan line2 di bawah ini, sesuaikan folder output (lihat info di : https://xdebug.org/docs/profiler)

;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;

; opsi x-debug 

;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;

zend_extension = C:\xampp\php\ext\php_xdebug-3.0.4-7.2-vc15-x86_64.dll

;https://xdebug.org/docs/profiler

xdebug.mode = debug

;off,develop, coverage, debug, gcstats, profile, trace

xdebug.start_with_request = default

xdebug.profiler_enable_trigger_value = ""

xdebug.log_level = 7

xdebug.log = e:\xdebug\xdebuglog.txt

xdebug.output_dir = e:\xdebug\

xdebug.profiler_output_name = "cachegrind.out.%t.%p"

Save file php.ini dan dari command prompt jalankan sintaks : c:\>php -v  pastikan tidak ada komentar failed seperti gambar diatas

Perhatikan sintak-sintak untuk versi xdebug2 dan xdebug3, byk contoh di internet masih menggunakan xdebug 2, setting menggunakan xdebug2 tidak akan berjalan untuk php dengan xdebug3, baiknya bersandar pada situs : https://xdebug.org/docs/profiler untuk contoh setting.

Restart apache, agar konfigurasi php direload.

Setting konfigurasi Vscode

Sebelum bisa digunakan, harus ada konfigurasi dulu, jalankan menu run-add configuration

Nanti di file configurasi akan ada beberapa template yg bisa dipilih :

Pilih dari bbrp konfigurasi yg bisa digunakan, kalau saya pilih launch built-in web browser

Setelah diklik, edit port localhost, kalau saya menggunakan angka 8000, pastikan port ini tidak ada aplikasi lain yg menggunakannya, cara cari tahu dari command prompt dengan sintaks : c:\>netstat -o 

Selesai setup.

Proses Debugging

Dari vscode

1. Buka sidebar debug/run atau shortcut CTRL+SHIFT+D
2. Buka file yang akan kita pasang breakpoint atau analisa
3. Pilih konfigurasi debug yang kita buat diatas
4. Klik run atau F5
5. Buka link http://localhost:8000  sesuaikan port dengan kondisi anda dari setting di atas

Tergantung dari breakpoints yang kita pasang di aplikasi, maka tampilan layar vscode akan spt ini

1. kontrol debugging
2. tampilan otomatis dari variabel2 yang digunakan dalam scope debug
3. breakpoint2 yang kita pasang

Untuk melihat semua config xdebug, buat satu file php, dan pasang xdebug_info(); disalah satu baris dan panggil, maka akan tampak seperti ini

Proses Profiling

Proses profiling gunanya untuk mencari tahu, beban paling banyak dari modul2 yang dijalankan itu dihabiskan oleh fungsi apa, file apa dsb, dengan xdebug ini sangat mudah, intinya: aktifkan profiler, nanti akan ada file hasil profile, lakukan analisa terhadap file tersebut. Langkah2nya :

1. Instal WinCacheGrind dari link ini
2. Aktifkan profiler, kalau setting php.ini sama seperti  contoh saya di atas, maka setiap url yang ditambahkan (secara GET) ==> "?XDEBUG_PROFILE=1", akan mengaktifkan xdebug dan membuat file di folder e:\xdebug, misal :
   http://localhost/app1/login.php?XDEBUG_PROFILE=1
   http://localhost/app1/caridata.php?nama=uwoo&XDEBUG_PROFILE=1
3. Buka aplikasi WinCacheGrind dan load file cachegrind terbaru di folder xdebug

Perbaiki dan optimasi fungsi/modul di file file yang terlalu lama memakan resource atau waktu.

Dari contoh dibawah, ada satu fungsi konversi file ke utf8 yang memakan waktu, setelah ini dihilangkan atau dioptimasi, maka aplikasi bisa berjalan lebih cepat.

Semoga bermanfaat.