Cara menggunakan php debug vscode

Instalasi

Berikut tahap2 yang perlu dilakukan jika anda ingin menggunakan debugging di VSCode. Pertama installah terlebih dahulu extension PHP Debug di VSCode.

Selanjutnya installah XDebug di webserver anda. Cara paling gampang adalah dengan membuat site/virtual host di localhost dengan mengedit file C:\Windows\System32\drivers\etc\hosts, menambahkan domain yg anda inginkan. Contohnya di sini nama sitenya debug-test.

127.0.0.1       debug-test

dan menambahkan virtual host di IIS Manager anda atau di webserver yang anda punya dengan domain tadi.

kemudian buat file dengan isi phpinfo, misalnya test.php:



phpinfo();

?>

Kemudian akseslah file tersebut dari browser, misal http://debug-test/test.php. Setelah itu select-all, kemudian copy semua isi phpinfo, paste di halaman ini: https://xdebug.org/wizard.php Kemudian tekan analyze. Ikuti petunjuk yang ada pada halaman tersebut.

Debugging via Browser

Manual ekstensi PHP Debug tersedia di halaman pluginnya. Masuk saja ke modul extension di VSCode, kemudian pilih PHP Debug. Di situ anda bisa melihat howto, setting2nya dll.

Untuk mulai menggunakan, kita coba membuat sebuah file debug.php:


for ($i=0; $i<=10; $i++) {
    echo $i;
    echo " kuadrat adalah ";
    echo $i*$i."
\r\n"
; } ?>

Kemudian di editor tekanlah tombol debug (1), jalankan (2), dan tambahkan breakpoint(3) agar debugger tertangkap.

Cara menggunakan php debug vscode

Setelah itu buka browser, jalankan http://debug-test/debug.php Maka debugger akan tertendang seperti di bawah ini. Browser akan hang dan jika anda buka VSCode, maka debugging sudah bisa dilakukan:

Cara menggunakan php debug vscode

Perhatikan bahwa di menu sebelah kiri ada monitoring variables yang bisa diamati. Jika anda perlu anda bisa juga setting watch pada expression tertentu.

Debugging via CLI

Jika anda di windodws, ubah .bashrc yang ada di folder user anda, kemudian tambahkan:

export XDEBUG_CONFIG="idekey=VSCODE"

Buka git bash. Jika anda menggunakan git bash dalam VSCode, restartlah VSCode anda agar perubahan pada bash berpengaruh. Cara membuktikannya ketik berikut ini pada shell:

$ echo $XDEBUG_CONFIG

Jika keluar jawaban idekey=VSCODE maka sudah oke.

Setelah itu nyalakan debug dengan tombol play dan listen for XDebug, kemudian jalankan di console:

php debug.php

Maka akan tertendang dengan baik:

Cara menggunakan php debug vscode

Posted on 15 September 2019

Visual Studio Code, sebagai text editor yang mendukung berbagai macam bahasa pemrograman, juga memberikan dukungan terhadap php. Agar penggunaan php pada VSCode optimal, executable dari php sebaiknya dicantumkan pada settings. Berikut adalah caranya:

  1. Buka VSCode
  2. Pilih File > Preferences > Settings
  3. Lakukan pencarian menggunakan string “php”
  4. Pada “PHP > Validate: Run”, klik “Edit in settings.json”
  5. Tambahkan baris: “php.validate.executablePath”: “C:\\Programs\\xampp\\php\\php.exe”
  6. Tutup kembali (penyimpanan dilakukan otomatis)

Debugging di bahasa apapun pasti dilakukan. Tidak terkecuali di PHP. Hanya saja masih banyak orang yg melakukan debug di PHP dengan cara-cara tradisional, yaitu dengan menambahkan script var_dump, print_r, die dan sebangsanya untuk menyelidiki setiap tahap baris code. Cara tradisional ini sangat boros waktu, tidak efisien, dan sering membuat frustasi. Penulis sendiri sering sekali habis waktu hanya mencari baris mana yang mengakibatkan bug menggunakan cara tradisional tadi. Makanya, semua coder PHP seharusnya memaksakan diri untuk menggunakan debugger. Sudah lama debugger ini ada, cuman memang coder malas men-setupnya. Dengan berdatangannya File Editor baru yang canggih2 dan gratis, debugging ini makin mudah. Mari kita coba dengan VS Code Editor.

  1. Install IIS
  2. Buat test.php dengan isi phpinfo();
  3. Buka hasil test.php berupa phpinfo, kemudian Ctrl-a, Ctrl-c utk mencopy semua isinya.
  4. Di IIS buka phpmanager, kemudian klik utk edit php.ini
  5. Buka halaman ini: https://xdebug.org/wizard.php, paste (Ctrl-v) di form isian yg besar di tengah halaman.
  6. Baca dan perhatikan isinya. Jika xdebug installed = no, berarti belum diinstal.
  7. Ikuti petunjuk di bawahnya untuk menginstall xdebug di php.
  8. Jika sudah, copas lagi hasil phpinfo ke wizard.php.
  9. Kalau sudah xdebug terdeteksi sudah terinstall, lanjutkan konfigurasi xdebug. Tambahkan berikut di php.ini:
[XDebug]
xdebug.remote_enable = 1
xdebug.remote_autostart = 1
  1. Untuk menggunakan XDebug dengan nyaman, install di chrome extension yg namanya XDebug helper https://chrome.google.com/webstore/detail/xdebug-helper/eadndfjplgieldjbigjakmdgkmoaaaoc
  2. Di toolbar bakal muncul gambar bug masih abu2. Tekan agar warnanya jadi hijau.
  3. Unduh dan install Visual Studio Code (https://code.visualstudio.com/)
  4. Di VS Code, ke View > Extensions. Search php debug. Tekan install.
  5. Buatlah sebuah code sederhana. Misal:
    <!--?php $a = "Pertama"; $b = "Kedua"; $buffer = ""; $buffer = $a; $a = $b; $b = $buffer; echo $a." ".$b; 15. Di VSCode buka View > Debug. Tekan tombol play hijau, akan keluar editor json konfigurasi xdebug.
    16. Klik kanan di sebelah kiri salah satu baris code, kemudian add breakpoint di situ.
  6. Tambahkan di “watch” variabel2 yg akan dimonitor. Masukkan saja semua $a, $b, $buffer
  7. Buka halaman tadi melalui chrome.
  8. Setelah mencoba dengan script sederhana, silakan mencoba XDebug untuk aplikasi yang lebih kompleks, dibuat dengan suatu framework. Misalnya skenarionya begini.

– Aplikasi dengan frontend html & javascript, backend silex & propel
– Utk mengambil data digunakan ajax json & REST
– Bukalah aplikasi dan login sampai halaman menu utama
– Siapkan Debugger chrome dengan F12
– Bukalah modul yg menarik data via Ajax/JSON ke backend. Baca di tab network baris yg menunjukkan ajax ybs.
– Kembalilah ke VSCode, pilih script yang merupakan backend ajax call tadi, buat breakpoint yg akan kena oleh ajax call tsb, kemudian tekan view > debug, kemudian tekan tombol play hijau.
– Kembali ke debugger, replay lah ajax call yg dimaksud.
– Jika debugger berhenti di awal (bukan di breakpoint yang dimaksud), tekan tombol play di sebelah tengah window (di samping beberapa tombol debugging lainnya, jump, step, stop dst). Maka debugger akan loncat ke breakpoint pertama yg anda set tadi.

Debugging dengan XDebug sangat membantu, daripada memakai var_dump, print_r dan sebangsanya. Silakan mencoba.

Jika anda menggunakan PHPStorm sebagai IDEnya, silakan lanjut ke Part 2.

Bagaimana cara menjalankan php di Visual Studio Code?

Setting PHP Executable Path di Visual Studio Code pada Windows.
Buka VSCode..
Pilih File > Preferences > Settings..
Lakukan pencarian menggunakan string “php”.
Pada “PHP > Validate: Run”, klik “Edit in settings.json”.
Tambahkan baris: “php. validate. ... .
Tutup kembali (penyimpanan dilakukan otomatis).

Apa itu debugging PHP?

XDebug adalah extension PHP yang memungkinkan kita untuk melakukan debugging dengan menggunakan IDE pemrograman seperti Visual Studio Code. Beberapa fitur yang dimiliki XDebug seperti: Set/Remove breakpoints. Perform an automatic stack trace. Set a manual variable watch.

Apa itu Launch JSON?

launch.json akan menyimpan informasi bagaimana VSCode menjalankan debugger dan disini kita juga memasukkan informasi yang berada di-tasks.json. Kedua file itu bertindak sebagai penghubung VSCode dengan aplikasi, karena VSCode bisa menggunakan extensions lainnya untuk bahasa atau framework lainnya diluar .NET Core.