Cara Mengaktifkan dan Mengonfigurasi Modul Xdebug di ServBay

ServBay adalah lingkungan pengembangan web lokal yang kuat, telah mengintegrasikan alat debugging dan analisis Xdebug untuk pengembang PHP. Mengaktifkan Xdebug dapat meningkatkan efisiensi pengembangan aplikasi PHP secara signifikan, membantu proses debugging, analisis performa, hingga pengukuran cakupan kode. Artikel ini membahas secara detail cara mengaktifkan dan mengonfigurasi Xdebug di ServBay, serta panduan integrasinya pada berbagai editor perangkat lunak (IDE) populer.

Ringkasan Modul Xdebug

Xdebug merupakan ekstensi PHP serbaguna yang dirancang khusus untuk debugging dan analisis kode PHP. Dengan integrasi Xdebug bawaan di ServBay, Anda tidak perlu proses instalasi dan kompilasi manual yang rumit, sehingga pengaktifan dan pengaturan Xdebug menjadi sangat sederhana.

Fitur Utama Xdebug

• Debug Breakpoint: Memungkinkan Anda menetapkan breakpoint di baris kode tertentu. Saat program dijalankan dan menyentuh breakpoint, eksekusi akan berhenti sehingga Anda bisa memeriksa variabel, stack trace, dan menjalankan kode baris demi baris.
• Step Debugging: Mendukung eksekusi kode satu langkah (Step Over), masuk ke dalam fungsi (Step Into), atau keluar dari fungsi (Step Out). Fitur ini membantu melacak alur program dengan mudah.
• Pengawasan Variabel: Memantau nilai variabel lokal maupun global secara real-time selama proses debugging.
• Stack Trace: Memaparkan informasi lengkap pemanggilan fungsi saat terjadi error atau exception, membantu menemukan akar masalah dengan cepat.
• Analisis Performa (Profiling): Menghasilkan laporan performa eksekusi kode untuk mengidentifikasi bottleneck.
• Cakupan Kode (Code Coverage): Mengukur persentase kode yang diuji oleh tes, untuk menilai efektivitas pengujian.

Versi Xdebug Bawaan ServBay & Pemetaan Port

ServBay sudah membekali setiap versi PHP dengan versi Xdebug yang sesuai. Penting untuk dicatat, setiap versi PHP menggunakan port pengawasan Xdebug yang berbeda-beda, biasanya terkait langsung dengan nomor versi PHP. Pemahaman mengenai pemetaan port ini penting untuk pengaturan debugger di IDE Anda.

Versi PHP	Versi Xdebug Bawaan	Port Default Xdebug
PHP 5.6	Xdebug 2.5.5	39056
PHP 7.0	Xdebug 2.5.5	39070
PHP 7.1	Xdebug 2.5.5	39071
PHP 7.2	Xdebug 3.1.6	39072
PHP 7.3	Xdebug 3.1.6	39073
PHP 7.4	Xdebug 3.1.6	39074
PHP 8.0	Xdebug 3.3.1	39080
PHP 8.1	Xdebug 3.4.0	39081
PHP 8.2	Xdebug 3.4.0	39082
PHP 8.3	Xdebug 3.4.0	39083
PHP 8.4	Xdebug 3.4.0	39084
PHP 8.5	Xdebug 3.4.0	39085

Aturan Port

Aturan default penentuan port Xdebug adalah 39000 + nomor minor versi PHP. Contoh, PHP 8.3 maka port-nya 39000 + 83 = 39083; PHP 7.4 port-nya 39000 + 74 = 39074. Memahami aturan ini membantu Anda cepat mengetahui port Xdebug untuk setiap versi PHP.

Cara Mengaktifkan Modul Xdebug

Mengaktifkan Xdebug di ServBay sangat mudah. Cara yang direkomendasikan adalah menggunakan antarmuka grafis (GUI) milik ServBay. Anda juga bisa mengedit file konfigurasi secara manual jika diperlukan.

Mengaktifkan Xdebug Lewat GUI ServBay

Ini adalah metode paling cepat dan mudah.

1. Buka aplikasi ServBay.
2. Pada panel navigasi kiri, pilih Languages.
3. Perluas bagian PHP dan temukan versi PHP yang ingin Anda aktifkan Xdebug-nya, misal PHP 8.3.
4. Klik tombol Extensions di sebelah versi tersebut.
5. Cari modul Xdebug dalam daftar ekstensi yang muncul.
6. Klik saklar di kiri modul Xdebug sehingga status berubah menjadi aktif.
7. Ubah parameter jika dibutuhkan
8. Klik tombol Simpan di bagian bawah.
9. ServBay akan otomatis me-restart proses PHP dan memuat modul terkait.

Ilustrasi: Mengaktifkan Xdebug pada menu Extensions

Verifikasi Xdebug Berhasil Dimuat

Cara paling akurat untuk memverifikasi adalah melalui fungsi phpinfo() untuk melihat informasi konfigurasi PHP.

1. Pada direktori root situs ServBay (standarnya /Applications/ServBay/www), buat file PHP baru, misal phpinfo.php.
2. Isi file phpinfo.php sebagai berikut:

   <?php
   phpinfo();
   ?>

3. Akses file tersebut melalui browser, misal https://servbay.demo/phpinfo.php (ganti servbay.demo sesuai domain situs Anda di ServBay).
4. Di halaman hasil phpinfo, cari kata "Xdebug". Jika berhasil dimuat, akan muncul bagian khusus bertajuk "Xdebug" berisi info versi dan pengaturan modul.

Ilustrasi: Temukan info Xdebug di output phpinfo

Konfigurasi Xdebug di IDE untuk Debugging

Mengaktifkan Xdebug baru tahap awal. Untuk bisa memanfaatkan breakpoints di IDE, Anda harus mengatur interpreter PHP, debugger, serta mapping server di IDE. Berikut panduan detail pengaturan pada PHPStorm dan Visual Studio Code (VS Code).

Konfigurasi Xdebug di PHPStorm

PHPStorm telah memberikan dukungan Xdebug yang komprehensif.

1. Buka Pengaturan PHPStorm: Jalankan PHPStorm, lalu buka menu pengaturan melalui File -> Settings (Windows/Linux) atau PHPStorm -> Preferences (macOS).

2. Atur Interpreter PHP CLI:

   • Masuk ke Languages & Frameworks -> PHP.
   • Pada bagian CLI Interpreter, klik tombol ... di kanan.
   • Pada jendela baru, klik + untuk menambah interpreter lokal.
   • Pilih lokasi file eksekusi PHP dari folder ServBay, contoh: /Applications/ServBay/package/php/8.3/8.3.7/bin/php (perhatikan nomor versinya bisa berubah sesuai instalasi ServBay Anda).
   • PHPStorm akan mendeteksi versi interpreter PHP beserta ekstensi, termasuk Xdebug.
   • Klik OK untuk simpan konfigurasi. Ilustrasi: Menambahkan interpreter PHP ServBay di PHPStorm

3. Pengaturan Parameter Xdebug:

   • Menuju ke Languages & Frameworks -> PHP -> Debug.
   • Di bagian Xdebug, tentukan Debug Port sesuai port Xdebug versi PHP pada ServBay (misal, PHP 8.3 menggunakan 39083). Pastikan port ini sama dengan konfigurasi xdebug.client_port.
   • Centang opsi Can accept external connections.
   • Klik Apply lalu OK. Ilustrasi: Setting port Xdebug di PHPStorm

4. Atur Mapping Server PHP Web:

   • Menuju ke Languages & Frameworks -> PHP -> Servers.
   • Klik + untuk menambah konfigurasi server baru.
   • Nama server sesuai keinginan (misal ServBay Localhost).
   • Isi Host dengan domain situs di ServBay (contoh servbay.demo).
   • Isi Port dengan port web, biasanya 443 (HTTPS) atau 80 (HTTP).
   • Pilih Debugger menjadi Xdebug.
   • Centang Use path mappings.
   • Atur jalur proyek lokal (Absolute path to local source) agar sesuai dengan jalur server (Absolute path on the server). Misal, dari /Applications/ServBay/www/myproject ke /. Jika Anda mengakses via subdomain https://myproject.servbay.demo/ dan folder root-nya /Applications/ServBay/www/myproject, mapping lokal ke server tetap /Applications/ServBay/www/myproject ke /. Penyesuaian mapping sangat penting agar debugging lancar.
   • Klik OK untuk menyimpan. Ilustrasi: Pengaturan server & path mapping di PHPStorm

5. Mulai Sesi Debugging:

   • Buka file proyek PHP Anda di PHPStorm.
   • Klik area kosong di sebelah kiri nomor baris untuk menambahkan breakpoint (titik merah).
   • Klik tombol Start Listening for PHP Debug Connections (ikon serangga) di toolbar PHPStorm. Ketika aktif, ikon berubah hijau.
   • Akses aplikasi PHP di browser (misal https://servbay.demo/index.php).
   • Jika setting sudah benar, Xdebug akan otomatis terhubung ke PHPStorm dan proses eksekusi kode berhenti pada breakpoint. Ilustrasi: Memulai Xdebug listener di PHPStorm

Konfigurasi Xdebug di Visual Studio Code (VS Code)

VS Code juga merupakan editor populer yang dapat diintegrasikan dengan Xdebug melalui ekstensi tambahan.

1. Pasang Ekstensi PHP Debug:

   • Buka VS Code.
   • Masuk ke panel Extensions (Ctrl+Shift+X atau Cmd+Shift+X).
   • Cari "PHP Debug" dan instal ekstensi oleh Felix Becker.

2. Atur launch.json:

   • Buka folder proyek PHP Anda.
   • Buka panel Run & Debug (Ctrl+Shift+D atau Cmd+Shift+D).
   • Klik ikon gear di tool bar atas, lalu pilih "PHP". Ini akan otomatis membuat file launch.json pada folder .vscode.
   • Edit launch.json dan pastikan ada konfigurasi bernama "Listen for Xdebug". Port port harus diisi port Xdebug versi PHP yang aktif di ServBay (contoh PHP 8.3: 39083).
   • Atur Path Mapping: Bagian kunci debugging di VS Code. Pastikan menambahkan/menyesuaikan pathMappings agar folder proyek di ServBay bisa dipetakan ke sistem lokal Anda.

     {
         "version": "0.2.0",
         "configurations": [
             {
                 "name": "Listen for Xdebug",
                 "type": "php",
                 "request": "launch",
                 "port": 39083, // Sesuaikan port ini dengan versi PHP
                 "pathMappings": {
                     // Mapping jalur proyek di ServBay ke jalur lokal
                     // Contoh: proyek di /Applications/ServBay/www/myproject
                     // dan diakses via https://servbay.demo/
                     // Maka server root '/' setara dengan root proyek lokal
                     "/": "${workspaceRoot}"
                     // Untuk kasus subdomain https://myproject.servbay.demo/ pun mapping sama
                     // "/": "${workspaceRoot}" // juga valid
                 }
             },
             {
                 "name": "Launch currently open script",
                 "type": "php",
                 "request": "launch",
                 "program": "${file}",
                 "cwd": "${fileDirname}",
                 "port": 39083 // Ganti sesuai port versi PHP
             }
         ]
     }

     Silakan sesuaikan pathMappings dengan struktur proyek dan pengaturan ServBay Anda. ${workspaceRoot} biasanya menunjuk ke root folder proyek yang Anda buka di VS Code.

3. Mulai Debugging:

   • Buka file PHP yang ingin Anda debug di VS Code.
   • Tambahkan breakpoint dengan mengklik di sebelah kiri nomor baris.
   • Buka panel Run & Debug (Ctrl+Shift+D atau Cmd+Shift+D).
   • Pilih konfigurasi "Listen for Xdebug".
   • Klik tombol hijau untuk memulai proses debugging. Status bar VS Code akan berubah oranye saat mendeteksi Xdebug.
   • Jalankan aplikasi PHP Anda di browser. Jika setting benar, Xdebug akan otomatis menghubungkan ke VS Code di breakpoint yang ditentukan.

FAQ (Pertanyaan yang Sering Diajukan)

• Q: Xdebug tidak tampil pada phpinfo()?

  • A: Pastikan modul Xdebug sudah diaktifkan melalui GUI ServBay atau edit manual file xdebug.ini.
  • Pastikan proses PHP yang sesuai sudah direstart.
  • Cek path file xdebug.ini dan pastikan baris zend_extension = xdebug.so tidak dikomentari.
  • Periksa file log ServBay (/Applications/ServBay/logs/php/<version>/error.log) untuk pesan error terkait kegagalan load Xdebug.

• Q: Breakpoint sudah diatur di IDE, namun program tidak berhenti?

  • A: Pastikan IDE sedang mendengarkan koneksi Xdebug (ikon serangga di PHPStorm hijau, status bar VS Code oranye).
  • Cek apakah port Xdebug di IDE sama dengan xdebug.client_port dan port default untuk versi PHP terkait.
  • Pastikan path mapping di IDE telah disetting dengan benar agar path file server terhubung ke proyek lokal Anda.
  • Periksa pengaturan firewall, jangan sampai port Xdebug (serangkaian 390xx) diblokir.
  • Jika di xdebug.ini menggunakan xdebug.start_with_request=trigger, pastikan request/browser Anda mangaktifkan trigger (misal lewat ekstensi browser atau parameter URL ?XDEBUG_TRIGGER=1).

• Q: Xdebug terputus setelah beberapa waktu berjalan?

  • A: Cek pengaturan xdebug.remote_autostart atau xdebug.start_with_request di xdebug.ini. Jika disetel ke yes, debugging bisa berjalan pada setiap request, sebaiknya gunakan mode trigger.
  • Perhatikan juga kemungkinan timeout connection di pengaturan IDE.

Kesimpulan

ServBay memudahkan pengembang PHP untuk mengaktifkan dan menggunakan Xdebug berkat integrasi serta proses konfigurasi yang sudah dibuat sederhana. Baik melalui GUI yang intuitif maupun edit konfigurasi manual, Anda dapat dengan cepat memakai Xdebug di berbagai versi PHP pada ServBay. Dengan integrasi pada IDE ternama seperti PHPStorm dan VS Code, proses debugging, optimasi performa, hingga pengujian aplikasi PHP menjadi jauh lebih efisien. Mengoptimalkan workflow lokal PHP Anda dengan kombinasi ServBay dan Xdebug akan meningkatkan produktivitas serta kualitas kode secara keseluruhan.