Tutorial PHP Part 56 – Debugging php menggunakan xdebug dan Visual Studio Code

Selamat datang di warung belajar, dalam tutorial ini kita akan melanjutkan pembahasan dari seri tutorial PHP, pada part 56 kita akan membahas mengenai cara Debugging PHP menggunakan xdebug didalam editor visual studio code.

Debugger adalah program komputer yang digunakan untuk menguji dan mendebug program lainnya (program target). Kode yang diujikan dijalankan pada sebuah instruction set simulator (ISS). Beberapa debugger menawarkan dua mode operasi, yaitu simulasi parsial atau penuh, untuk membatasi dampak.

itu debugger kata bang wikipedia, mungkin agak sulit dipahami,, oke kita akan sedikit sederhanakan.

 

Debugger ini adalah istilah untuk mencari bug ketika anda sedang menuliskan baris code, saat anda mendevelop sebuah aplikasi, menurut saya sih penjelasannya seperti itu..

Pernah kah kalian waktu coding, tiba tiba error dan kalian gak tahu dimana tempat code yang menyebabkan error, padahal kalau dilihat codenya udah bener,, tapi kenapa kok error, atau proses yang dilakukan tidak seperti yang anda harapkan.

Nah peran debugger disini akan membantu anda untuk melakukan tracing code dari baris ke baris, saat program dijalankan, sehingga anda akan mengetahui yang menyebabkan error itu code dibaris mana

ya meskipun anda bisa saja menebak – nebak code yang menyebabkan error, tapi kalau ada tools yang bisa digunakan untuk membantu anda dalam trace code yang dijalankan, kenapa tidak kita gunakan.

Nah untuk debugger di pemrograman PHP anda dapat menggunakan tools yang namanya Xdebug.

Xdebug ini berbentuk seperti library atau extention, kalau di xampp atau wampp kita mengenal dengan istilah extention.

 

Nah dalam tutorial ini kita akan membahas bagaimana cara menginstall dari xdebug, dan melakukan setting pada xampp  yang tepatnya di file php.ini, serta bagaimana menginstall plugin xdebug di visual studio code

Baik yang perlu teman – teman persiapkan adalah :

• Dalam contoh ini karena saya windows sehingga saya menggunakan Xampp, teman – teman bisa juga menggunakan wampp sebagai alternatif, untuk instalasi xampp bisa dilihat di tutorial instalasi xampp di windows
• Editor Visual Studio Code, bisa didownload di website resmi : https://code.visualstudio.com/

Oke sampai disini kita asumsikan teman – teman telah mempersiapkan tools seperti diatas.

 

Menginstall Xdebug di xampp

Seperti yang telah dibahas dibagian awal, dalam contoh ini karena saya menggunakan windows, saya akan menggunakan xampp.

Untuk langkah awal kita akan install xdebug terlebih dahulu di xampp, langkah – langkahnya adalah sebagai berikut :

Pastikan untuk service dari apache sudah berjalan

 

berikutnya silahkan mengakses alamat http://localhost/dashboard/phpinfo.php

alamat tersebut digunakan untuk mengakses file phpinfo.php yang berisi informasi dari versi php dan komponen php yang terinstall

Silahkan tekan Ctrl + A untuk memilih seluruh text, lalu tekan Ctrl + C untuk melakukan copy dari text yang terpilih tadi

 

Berikutnya silahkan buka alamat : https://xdebug.org/wizard.php

 

pada kotak diatas silahkan tekan CTRL + V untuk paste code yang sebelumnya telah kita copy.

Lalu silahkan klik tombol “Analyse my phpinfo() output”

 

akan tampil tampilan seperti gambar diatas yang berisi intruksi bagaimana proses instalasi xdebug.

Untuk download xdebug silahkan klik link pada nomor 1, lalu untuk hasil downloadnya silahkan pindahkan ke direktori C:\xampp\php\ext, seperti yang tertera di intruksi nomor 2

Terlihat kita telah pindahkan ke direktori C:\xampp\php\ext

 

 

Setting file php.ini

Berikutnya kita akan set file php.ini, untuk xampp posisi file php.ini berada di direktori, C:/xampp/php

 

Berikutnya silahkan buka file php.ini menggunakan text editor, bisa notepad, sublime, atau sejenisnya, berikutnya silahkan tambahkan code berikut ini di posisi paling bawah  dari code di file php.ini :

zend_extension = C:\xampp\php\ext\php_xdebug-2.7.2-7.3-vc15.dll

perintah ini adalah instruksi xdebug yang ada di nomor 3

lalu berikutnya tekah Ctrl + S untuk menyimpan perubahan file php.ini

 

 

Install Extention Xdebug di Visual Studio Code

Berikutnya silahkan buka aplikasi visual studio code, lalu masuk kedalam menu extention

pada kolom pencarian silahkan tuliskan “Xdebug” lalu tekan enter, maka akan tampil extention dengan nama PHP Debug, lalu berikutnya klik tombol Install

 

jika proses instalasi PHP Debug selesai maka akan tampil gambar seperti diatas, berikutnya silahkan klik tombol Reload, untuk reload visual studio code

 

Buka Dokumentasi Penggunaan PHP Debug

Untuk membuka Dokumentasi Penggunaan PHP Debug, anda bisa klik menu extention, lalu klik PHP Debug

Anda bisa membaca dokumentasi, serta instruksi cara penggunaan php debug, di dalam visual studio code.

hal yang kita lakukan berikutnya adalah menuliskan kode diatas di file php.ini untuk menjalankan xdebug, agar xdebug dapat digunakan didalam visual studio code

 

Menuliskan perintah Xdebug di file php.ini

silahkan buka file php.ini yang berada di folder C:\xampp\php karena kita menggunakan xampp, lalu tambahkan perintah seperti dibawah ini :

lalu silahkan save file php.ini untuk menyimpan perubahan yang dilakukan.

 

Restart Service Apache

Berikutnya silahkan restart service apache, dengan cara klik tombol stop service apache di xampp control panel

lalu berikutnya tekan tombol start kembali dibagian service apache, untuk menjalankan ulang service apache

 

Buat File PHP

Berikutnya kita akan coba membuat file php yang nantinya akan kita lakukan debug dengan menggunakan extention php debug di visual studio code

Dalam contoh ini kita membuat folder dengan nama belajardebug didalam  direktori C:/xampp/htdocs/belajardebug

didalamnya kita buat dengan nama belajar.php

 

Membuka Folder belajardebug melalui visual studio code

Silahkan masuk kedalam visual studio code, lalu buka folder belajardebug, caranya adalah sebagai berikut :

Klik menu file –> Open Folder

 

lalu silahkan pilih folder belajardebug, lalu klik tombol Select Folder

 

Lalu klik file belajar.php, maka file belajar.php akan tampil di sebelah kanan.

 

Berikunya silahkan tuliskan code php dibawah ini didalam file belajar.php

lalu klik CTRL + S untuk menyimpan hasil perubahan di file belajar.php

 

Melakukan debug dengan PHP Debug di Visual Studio Code

Untuk Melakukan debug code php di Visual Studio Code, kita perlu menambahkan breakpoint, caranya adalah sebagai berikut :

Setelah membuka file php, dalam contoh ini adalah file belajar.php, kita bisa membuat breakpoint dengan klik kiri disebelah kiri dari baris code

dalam contoh diatas kita buat breakpoint di line 2, fungsi dari breakpoint ini adalah digunakan untuk memberikan tanda ketika baris code tersebut dibaca maka editor akan menghentikan proses pembacaan codenya, dan kita dapat melakukan debug code php, dari baris ke baris.

 

berikutnya kita jalankan proses debug, caranya klik menu Debug –> Start Debugging atau dapat menggunakan shortcut F5

 

maka akan tampil pilihan environment, silahkan klik pada pilihan php

 

maka akan tampilan kotak navigasi untuk melakukan debug.

 

Berikutnya kita akan coba untuk melakukan testing apakah extention php debug, sudah berjalan dengan baik, silahkan akses file belajar.php dengan alamat : localhost/belajardebug/belajar.php lalu tekan enter

jika php debug berjalan dengan baik, icon visual studio code dibagian taskbar akan kelap kelip,

 

silahkan buka aplikasi visual studio code

terlihat pembacaan code php berhenti di line 2, hal tersebut dikarenakan kita menambahkan breakpoint di line 2.

Anda bisa menggunakan navigasi yang disediakan php debug.

Keterangan :

• Continue (F5) digunakan melanjutkan code, secara sederhana ini digunakan untuk membatalkan debug
• Step Over (F10) digunakan untuk melanjutkan debug di line berikutnya
• Step into (F11) : jika baris berikutnya berisi panggilan fungsi, Step Into akan melompat ke dan menghentikan sementara fungsi itu pada baris pertamanya.
• Step Out (Shift + F11) : Mengeksekusi sisa fungsi saat ini kemudian berhenti sementara pada pernyataan berikutnya setelah panggilan fungsi.
• Restart (Ctrl + Shift + F5) digunakan untuk merestart ulang proses debug
• Stop (Shift + F5) digunakan untuk mengentikan proses debug

 

Coba tekan tombol Step Over (F10) hingga posisi debug di line 5, maka perhatikan dibagian informasi debug yang ada disebelah kiri, maka akan terdapat informasi dari value variabel saat debug dilakukan

terlihat kita dapat informasi bahwa saat code dijalankan hingga line 5, variabel $luas mendapatkan nilai 50, nah proses ini dinamakan debug, untuk mengetahui bagaimana code yang kita tulis berjalan,

Jika proses debug telah selesai dilakukan silahkan klik tombol Stop atau (Shift + F5)

 

Jadi kurang lebih seperti itu ya teman – teman pembahasan tutorial kali ini, kita telah belajar bagaimana cara Debug code php menggunakan extention PHP Debug di Visual Studio Code, jika ada yang ingin didiskusikan silahkan di kolom komentar, sekian dulu sampai jumpa di tutorial selanjutnya.

 

---

ANDA INGIN SERIUS BELAJAR PEMROGRAMAN PHP ?

Seperti yang anda ketahui bahwa saat ini skill di bidang pemrograman sangatlah dibutuhkan, salah satunya adalah pemograman PHP.
Untuk anda yang ingin serius belajar pemrograman PHP, Warung Belajar Memiliki Beberapa Paket Tutorial yang bisa membantu anda dalam belajar Pemrograman PHP, dari mulai step – step dasar hingga mampu membuat aplikasi berbasis web dengan menggunakan PHP.

Paket Tutorial ini berisi video tutorial belajar pemrograman berbahasa indonesia, cocok sekali untuk anda yang sedang belajar pemrograman PHP, bahkan untuk orang awam sekalipun.

Paket Tutorial ini juga dilengkapi dengan study kasus yang akan mempermudah pemahaman anda dalam belajar pemrograman, Mari berinvestasi untuk menambah skill dalam menguasai Pemrograman PHP