Advertisement
  1. Code
  2. Tools & Tips

Xdebug - Debugging Profesional PHP

by
Difficulty:IntermediateLength:LongLanguages:

Indonesian (Bahasa Indonesia) translation by Andy Nur (you can also view the original English article)

Agenda Kita

  1. Pengantar topik.
  2. Mengunduh dan menginstal Xdebug di komputer lokal Anda (Mac OS X 10.6.6+, MAMP 2.1.1).
  3. Mengintegrasikan dengan PhpStorm.
  4. Praktek debugging


Apa Yang Akan Kamu Butuhkan

  • Mac yang menjalankan Mac OS X 10.6.6+.
    • Jika kamu berada di 10.8.X, kamu mungkin perlu menginstal XQuartz saat Apple menghapus X11.
    • Jika kamu menggunakan Windows, keseluruhan proses agak mudah, cukup tekan Google untuk lebih jelasnya.
  • Apple Xcode 4.6 (gratis di Mac App Store).
    • Tool Command Line.
  • Homebrew.
  • Sebuah aplikasi terminal pilihanmu.
  • PhpStorm 5+ (banyak IDE lainnya juga akan bekerja).

Apa itu Xdebug?

Nah, secara teknis, Xdebug merupakan perpanjangan bagi PHP untuk membuat hidupmu lebih mudah saat melakukan debug kode-mu. Saat ini, kamu mungkin terbiasa melakukan debug kode-mu dengan berbagai solusi sederhana lainnya. Ini termasuk menggunakan pernyataan echo di keadaan yang berbeda dalam programmu untuk mengetahui apakah aplikasimu melewati suatu kondisi atau untuk mendapatkan nilai dari variabel tertentu. Selanjutnya, kamu mungkin sering menggunakan fungsi seperti var_dump, print_r atau lainnya untuk memeriksa objek dan array.

Apa yang sering saya jumpai adalah sedikit fungsi helper, seperti contoh ini:

Sebenarnya, saya biasa melakukan ini juga, untuk waktu yang sangat lama sebenarnya.

Sebenarnya, saya biasa melakukan ini juga, untuk waktu yang sangat lama sebenarnya. Jadi apa yang salah dengan itu? Secara teknis, tidak ada yang salah dengan itu. Ia bekerja dan melakukan apa yang seharusnya dilakukan.

Tapi bayangkan sejenak, saat aplikasimu berkembang, kamu mungkin terbiasa memercikkan kodemu ke mana saja dengan sedikit echos, var_dumps dan debugger kustom. Sekarang diberikan, ini tidak obstruktif selama alur kerja pengujianmu, tapi bagaimana jika kamu lupa membersihkan beberapa kode debug sebelum masuk ke produksi? Hal ini dapat menyebabkan beberapa masalah yang sangat menyeramkan, karena para debugger kecil tersebut bahkan mungkin menemukan jalan mereka ke dalam kontrol versi dan tinggal di sana untuk waktu yang lama.

Pertanyaan selanjutnya adalah: bagaimana kamu melakukan debug dalam produksi? Sekali lagi, bayangkan kamu menjelajahi salah satu layanan web favoritmu dan tiba-tiba kamu mendapatkan daftar besar informasi debug yang disajikan kepadamu di layar. Sekarang tentu saja hal itu mungkin akan hilang setelah refresh browser berikutnya, tapi ini bukan pengalaman yang sangat bagus bagi pengguna website.

Sekarang terakhir, apakah kamu pernah ingin bisa melangkah melalui kode-mu, baris demi baris, melihat expressions, dan bahkan masuk ke pemanggilan fungsi untuk melihat mengapa hal itu menghasilkan nilai kembalian yang salah?

Nah, kamu pasti harus menggali dunia debugging profesional dengan Xdebug, karena bisa menyelesaikan semua masalah di atas.


Mengkonfigurasi MAMP

Saya tidak ingin terlalu jauh ke dalam proses download dan instalasi MAMP di Mac. Sebagai gantinya, saya akan berbagi denganmu bahwa saya menggunakan PHP 5.4.4 dan Port Apache standar (80) sepanjang pembacaan ini.


Keputusan Pertamamu

Sebuah catatan singkat sebelum kita mulai dengan membangun Xdebug kita sendiri melalui Homebrew: Jika kamu ingin mengambil rute yang paling mudah, MAMP sudah dilengkapi dengan Xdebug 2.2.0. Untuk mengaktifkannya, buka:

/Applications/MAMP/bin/php/php5.4.4/conf/php.ini

Dengan editor teks pilihanmu, menuju ke bagian paling bawah dan hapus tanda komentar pada baris terakhir dengan menghapus ;.

Dua baris terakhir dari file tersebut seharusnya dibaca seperti ini:

Sekarang jika kamu bertanya pada diri sendiri:

"Mengapa saya ingin memilih cara yang lebih sulit daripada yang ini?"

Dan jawaban saya untuk itu adalah, tidak pernah ada kesalahan untuk melihat melampaui bingkaimu dan mempelajari sesuatu yang baru. Terutama sebagai pengembang akhir-akhir ini, Mengabaikan barang terkait server akan selalu berguna di beberapa titik waktu. Dijanjikan.


Instal Xcode dan Command Line Tools

Anda bisa mendapatkan Apple Xcode secara gratis dari Mac App Store. Setelah mendownloadnya, masuklah ke preferensi aplikasi, tekan tab "Downloads" dan pasang "Command Line Tool"' dari daftar.


Instal Homebrew

Homebrew adalah manajer paket kecil yang rapi untuk Mac OS X yang membuatmu meniadakan semua barang Apple. Untuk menginstal Homebrew, cukup paste perintah berikut ke terminalmu.

Di Mac, Homebrew akan menjadi cara yang paling mudah untuk menginstal Xdebug. Di Linux, mengkompilasi sendiri adalah cara terbaik untuk pergi; yang tidak semudah itu di Mac.

Petunjuk: Pengguna Windows hanya perlu mendownload file *.dll dari Xdebug.org, memasukkannya ke dalam folder XAMPP dan menambahkan path ke file php.ini mereka.

Sebagai pengembang PHP, kamu sekarang harus menyadari repo Github "homebrew-php" Jose Gonzalez, yang memiliki banyak "brews" yang berguna untukmu. Jika pernah bertanya pada diri sendiri bagaimana cara menginstal PHP 5.4 secara manual, kamu berada disana.

Sekarang jika kamu mengalami masalah saat menginstal Homebrew, lihat Jose's Readme.

Untuk menyelesaikan wisata Homebrew kita, kita ingin "mengetuk" formula brew Jose dengan menjalankan perintah berikut di dalam aplikasi terminalmu:

Ini akan memperolehkan kita beberapa dependensi yang kita butuhkan untuk formula Jose.

Selesai! Sekarang kita harus siap untuk menginstal Xdebug dengan cara yang nyaman, di Mac.


Instal Xdebug

Kembali ke aplikasi terminalmu, harap jalankan:

Jika Anda menggunakan PHP 5.3, ganti saja "4" dengan "3" ;)

Instalasi akan memakan waktu lama. Setelah selesai, kamu akan melihat ikon bir kecil dan beberapa petunjuk lebih lanjut yang dapat kamu abaikan.

Jadi apa yang baru saja terjadi? Homebrew mendownload semua file termasuk dependensinya dan membangunnya untukmu. Seperti yang telah saya katakan padamu, mengkompilasi sendiri pada Mac bisa merepotkan. Pada akhirnya, kita mendapatkan xdebug.so yang baru dikompilasi yang terletak di /usr/local/Cellar/php54-xdebug/2.2.1/.

Perhatian: Perlu diketahui bahwa Homebrew akan menginstal PHP 5.4 ke sistemmu selama proses berlangsung. Ini seharusnya tidak mempengaruhi apapun karena tidak diaktifkan pada sistemmu.

Untuk akhirnya menginstal Xdebug, kita hanya perlu mengikuti beberapa langkah lagi.

Ubah direktori (cd) ke folder ekstensi MAMP:

Kamu dapat memeriksa ulang jalur dengan melihat baris terakhir /Applications/MAMP/bin/php/php5.4.4/conf/php.ini, karena ini adalah tujuan kita.

Backup xdebug.so yang ada untuk berjaga-jaga:

Kemudian copy Homebrew Xdebug build-mu:

Jika kamu ingin memaksa perintah copy (cp) untuk menimpa file yang ada, cukup lakukan cp -X source target.

Terakhir, namun tidak kalah pentingnya, kita perlu memodifikasi file php.ini untuk memuat file ekstensi Xdebug. Buka /Applications/MAMP/bin/php/php5.4.4/conf/php.ini dengan editor teks pilihanmu, pergi ke bagian paling bawah dan hapus tanda komentar pada baris terakhir dengan menghapus titik koma di bagian depan. Jangan tutup filenya dulu.

Sekarang luncurkan ulang MAMP, masuk ke http://localhost/MAMP/phpinfo.php. Jika semuanya berjalan dengan baik, kamu seharusnya menemukannya dalam output:

xdebug-in-phpinfo

Jika tidak berhasil, pastikan kamu benar-benar menyalin xdebug.so dan memiliki jalur yang benar di file php.ini mu.


Memulai Debugging

Sebelum kita benar-benar memulai debugging, kita perlu mengaktifkan Xdebug. Oleh karena itu, saya harap kamu tidak menutup php.ini mu, karena kami perlu menambahkan baris ini sampai akhir, setelah opsi zend_extension:

Simpan dan tutup file php.ini anda dan restart MAMP. Menuju ke http://localhost/MAMP/phpinfo.php lagi dan cari xdebug.remote di situs ini. Nilaimu seharusnya terlihat persis seperti milik saya:

xdebug-remote-in-phpinfo

Jika tidak, ikuti prosedur yang sama dengan yang kamu gunakan untuk menambahkan remote_enable = On untuk laporan lainnya di akhir file php.ini mu.

Sekarang, buka IDE pilihanmu. kamu bisa menggunakan Xdebug dengan sejumlah solusi software populer seperti Eclipse, Netbeans, PhpStorm dan juga Sublime Text. Seperti yang saya katakan sebelumnya, saya akan menggunakan PhpStorm EAP 6 untuk demo ini.

Di dalam PhpStorm, buka preferensi aplikasi dan cari jalan ke "PHP \ Debug \ DBGp Proxy" di sisi kiri, seperti pada gambar di bawah ini:

phpstorm-debug-settings

Sekarang pilih kunci IDE pribadimu. Ini bisa berupa string alfanumerik yang kamu inginkan. Saya lebih suka menyebutnya PHPSTORM, tapi XDEBUG_IDE atau myname juga akan baik-baik saja. Penting untuk menetapkan nilai "Port" menjadi 9000 karena konfigurasi Xdebug standar menggunakan port ini untuk terhubung ke IDE.

Tip: Jika kamu perlu menyesuaikan ini, tambahkan xdebug.remote_port = portnumber ke file php.ini mu.

Perhatian: Komponen lain dapat mengubah nilai ini di dalam PhpStorm, jadi hati-hati jika ada yang gagal.

Selanjutnya, klik tombol telepon merah kecil dengan bug kecil di sebelahnya di toolbar atas. Ini seharusnya berubah menjadi hijau. Hal ini membuat PhpStorm mendengarkan koneksi Xdebug yang masuk.

phpstorm-bug-phone

Sekarang kita perlu membuat sesuatu untuk debug. Buat file PHP baru, sebut saja apa pun yang kamu suka dan paste dalam kode berikut:

Sekarang kode ini salah secara bawaan, tetapi kita akan memperbaikinya sebentar lagi, di bagian selanjutnya.

Pastikan semua sudah tersimpan dan buka browser-mu ke skrip yang baru kita buat. Saya akan menggunakan Google Chrome untuk demo ini, namun setiap browser juga bisa melakukannya.

Sekarang mari kita luangkan waktu untuk memahami bagaimana proses debugging diinisialisasi. Status kita saat ini adalah: Xdebug diaktifkan sebagai ekstensi Zend, mendengarkan pada port 9000 agar cookie muncul selama request. Cookie ini akan membawa sebuah kunci IDE yang seharusnya sama seperti yang kita atur di dalam IDE kita. Karena Xdebug melihat cookie yang membawa request tersebut, maka akan mencoba untuk terhubung ke proxy, IDE kita.

Jadi bagaimana kita mendapatkan cookie itu? setcookie PHP? Tidak. Meskipun ada beberapa cara, bahkan beberapa mendapatkan ini bekerja tanpa cookie, kita akan menggunakan sedikit ekstensi browser sebagai pembantu.

Instal "Xdebug helper" ke browser Google Chrome-mu atau cari ekstensi yang akan melakukannya untuk browser yang kamu gunakan.

Setelah kamu menginstal ekstensi, klik kanan bug kecil yang muncul di bar alamatmu dan masuk options . Konfigurasikan nilai untuk kunci IDE agar sesuai dengan kunci yang kamu pilih di IDE-mu, seperti:

xdebug-browser-extension

Setelah mengonfigurasinya, klik bug dan pilih "Debug" dari daftar. Bug seharusnya berubah menjadi hijau:

xdebug-browser-extension-active

Sekarang, kembali ke PhpStorm atau IDE pilihanmu dan tetapkan "breakpoint". Breakpoints seperti spidol pada garis yang memberi tahu debugger untuk menghentikan eksekusi skrip pada breakpoint tersebut.

Di PhpStorm, kamu bisa menambahkan breakpoints dengan mengklik spasi di sebelah nomor baris di sisi kiri:

phpstorm-breakpoint

Coba klik di mana titik merah muncul pada tangkapan layar. Kamu kemudian akan memiliki sebuah breakpoint set di mana skripmu seharusnya berhenti sebentar.

Catatan: Kamu dapat memiliki banyak breakpoint dalam sebanyak mungkin file yang kamu inginkan.

Sekarang kita sudah siap. Kembali ke browser-mu, pastikan bug berwarna hijau dan muat ulang halaman untuk mengirimkan cookie dengan request berikutnya.

Petunjuk: jika kamu menetapkan cookie, itu akan tersedia untuk request berikutnya.

Jika semuanya berjalan sesuai rencana, window ini harus muncul di dalam PhpStorm untuk memberi tahumu tentang koneksi debug yang masuk:

phpstorm-incoming-debug-connection

Apakah window tidak muncul untukmu? Mari kita lakukan beberapa pemecahan masalah dan ulangi apa yang perlu diatur supaya berhasil:

  1. Anda harus mencari info Xdebug di dalam output phpinfo(). Jika tidak, dapatkan file xdebug.so di tempat yang tepat dan atur file php.ini mu.
  2. Tetapkan pengaturan PhpStorm DBGp ke kunci IDE-mu, misalnya. "PHPSTORM" dan port "9000".
  3. Buat PhpStorm mendengarkan koneksi debug yang masuk menggunakan ikon telepon merah yang kemudian akan berubah menjadi hijau.
  4. Tetapkan breakpoint di kodemu, atau pilih "Run \ Break at first line in PHP scripts" agar tidak terlepas dari berakpoints apa pun. Perhatikan bahwa ini tidak cocok untuk penggunaan praktis.
  5. Dapatkan ekstensi browser untuk mengatur cookie Xdebug.
  6. Pastikan ekstensi browser memiliki kunci IDE yang sama di dalamnya yang kamu pilih di dalam IDE-mu.
  7. Muat ulang halaman dan PhpStorm seharusnya mendapatkan koneksi.

Jika kamu mendapatkan dialog yang terlihat pada gambar sebelumnya, tolong setujui itu. Ini akan membawamuke mode debug, seperti:

phpstorm-in-debug-mode

Kamu dapat melihat bahwa debugger menghentikan eksekusi skrip di breakpoint-mu, menyoroti garis biru. PHP sekarang menunggu dan dikendalikan oleh Xdebug, yang sedang dikemudikan oleh tanganmu sendiri mulai sekarang.

Ruang kerja utama kita akan menjadi bagian bawah IDE yang sudah menunjukkan beberapa informasi tentang skrip yang berjalan (superglobals).

phpstorm-debugger-vars

Dan apakah kamu akan melihat itu? Ada cookie yang kita tetapkan untuk memulai sesi debugging. Kamu sekarang bisa mengklik superglobals dan memeriksa nilai mereka pada saat ini juga. PHP sedang menunggu, tidak ada batas waktu, setidaknya tidak bawaan 30 detik.

Di sisi kiri, kamu akan melihat beberapa tombol. Untuk saat ini, hanya "Play" dan "Stop" yang menarik bagi kita. Tombol putar hijau akan melanjutkan skripnya. Jika ada breakpoint lain dalam kode, skrip akan berlanjut sampai mencapai breakpoint dan berhenti lagi.

Tombol berhenti merah membatalkan naskahnya. Sama seperti exit PHP atau die akan dilakukan.

phpstorm-debugger-play-stop

Sekarang yang benar-benar menarik datang di bagian atas window debug:

phpstorm-debugger-controls

Mari kita periksa dengan cepat:

  1. Step Over: Ini berarti melangkah satu baris ke depan.
  2. Step Into: Jika garis biru menyoroti, misalnya, pemanggilan fungsi, tombol ini membiarkanmu melangkah melalui pendalaman fungsi.
  3. Step Out: Jika kamu melangkah ke fungsi dan ingin keluar sebelum akhirnya tercapai, keluar saja.
  4. Run to cursor: Katakanlah itu, misalnya, file-mu panjangnya 100 baris dan breakpoint-mu ditetapkan pada baris dua untuk memeriksa sesuatu. Sekarang kamu ingin cepat berlari ke titik di mana kamu hanya mengklik kursormu - tombol ini adalah untukmu. Kamu bisa mengklik "'Step over" n kali juga ;)

Sekarang jangan khawatir, karena kamu menggunakan Xdebug, kamu akan cepat beradaptasi dengan cara pintas pada keyboard.


Debugging Sebenarnya Beberapa Contoh Kode

Saya sudah mengatakan kepadamu bahwa kode yang kamu copy/paste itu salah, jadi kamu harus men-debugnya. Mulai lompati kode, pernyataan per pernyataan.

Perhatikan bahwa garis biru hanya berhenti pada garis yang benar-benar berisi perintah. Spasi dan komentar akan dilewati.

Setelah kamu mencapai pemanggilan fungsi ke loadData, tolong jangan melangkah ke dalamnya, selangkah demi selangkah dan hentikan pada pernyataan if.

phpstorm-debugger-you-cant-go-back

Kamu dapat melihat dua variabel baru di panel "Variabels" di bagian bawah layar. Nah, mengapa variabel $data mengembalikan nilai false? Seperti skripnya seharusnya sudah melakukan tugasnya. Mari lihat. Kembali ke baris tujuh untuk masuk ke pemanggilan fungsi -> bam! Kita mendapat pesan yang memberitahukan bahwa kita tidak dapat "melangkah mundur". Untuk mendapatkan debugger-mu ke baris tujuh lagi, kamu perlu menghentikan sesi ini dan memuat ulang halaman di browser. Lakukan dan masuk ke fungsi call kali ini.

Berhenti pada pernyataan return di dalam fungsi loadData dan lihat apa yang terjadi:

phpstorm-debugger-in-a-function

Array $phpData kosong. Pernyataan return menggunakan tenary operator untuk mendeteksi apa yang harus dikembalikan. Dan itu akan mengembalikan nilai false untuk array kosong.

Perbaiki baris tersebut untuk menyatakan:

json_decode akan mengembalikan data atau null pada saat kegagalan. Sekarang hentikan sesi debug, muat ulang browser-mu, dan selesaikan pemanggilan fungsi kali ini.

phpstorm-debugger-still-falsy-data

Sekarang sepertinya kita masih punya masalah saat kita masuk ke kondisi. Harap perbaiki kondisi untuk menggunakan is_null() untuk mendeteksi apa yang terjadi:

Sekarang terserahmu untuk mencoba dan melangkah sedikit. Saya menyarankan untuk mengembalikan skrip ke versi salah yang asli, debug dengan echo dan kemudian bandingkan bagaimana rasanya dibandingkan dengan menggunakan Xdebug.


Kesimpulan

Sepanjang artikel ini kamu seharusnya mendapatkan banyak pengetahuan baru. Jangan ragu untuk membacanya lagi dan untuk membantu seorang teman mengatur Xdebug - tidak ada yang lebih baik dari itu!

Kamu mungkin ingin mencoba mengganti tindakan debug biasa dengan menggunakan Xdebug. Terutama dengan proyek berorientasi objek yang lebih besar, karena mereka menjadi lebih mudah untuk melakukan debug dan bahkan mengejar ketertinggalan arus, jika kamu tidak mendapatkan sesuatu dengan segera.

Perhatikan bahwa ini hanyalah puncak gunung es. Xdebug menawarkan lebih banyak kemampuan yang perlu dieksplorasi juga.

Jangan ragu untuk mengajukan pertanyaan apapun di komentar dan beri tahu apa pendapatmu.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.