7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Code
  2. Creative Coding

Debugging Tema WordPress dan Plugin Dengan Eclipse dan Xdebug

Scroll to top
Read Time: 6 mins

Indonesian (Bahasa Indonesia) translation by Zesar Matin Aryona (you can also view the original English article)

Debugging PHP dengan editor teks dan beberapa kombinasi cukup dengan panggilan echo, print_r dan exits ketika berhadapan dengan sederhana kode. Namun, ketika plugin pembunuh WordPress Anda tumbuh untuk beberapa ribu baris mencakup beberapa file, metode itu akan cepat membosankan dan rawan kesalahan. Ketika Anda sampai pada titik itu, ini akan menjadi waktu untuk lulus ke remote debugger sehingga Anda dapat dengan cepat dan mudah melangkah melalui setiap baris kode untuk menentukan masalah.


Remote debugger adalah sebuah program yang diinstal pada sisi server yang menangkap semua kode PHP yang berjalan. Di antara fitur lain, ia memiliki kemampuan untuk menghentikan kode yang berjalan di eksekusi pertengahan dan menyampaikan informasi kepada klien eksternal, seperti Integrated Development Environment (IDE). Tutorial ini akan mencakup bagaimana untuk menggunakan xdebug remote debugger dan open source Eclipse IDE secara bersama untuk melangkah melalui kode WordPress untuk mengatasi masalah.


Langkah 1 Atur Lingkungan Pengembanganmu

Saya mengasumsikan Anda sudah memiliki Apache/PHP/MySQL dan instalasi WordPress yang berfungsi menjalankan tempat kerja lokal Anda. Jika tidak, baca dulu tutorial kami tentang cara mengkonfigurasi lingkungan pengembangan WordPress untuk Windows.

Menginstal Xdebug

Petunjuk paling up-to-date dapat ditemukan di situs web xdebug.

Jika Anda pada Windows menggunakan XAMPP untuk pengembangan, xdebug biner sudah dimasukkan dan Anda dapat melanjutkan untuk mengkonfigurasi PHP.

Jika Anda pada Mac OS X, saya akan merekomendasikan kompilasi dari sumber atau menggunakan PECL untuk menginstal.

Jika Anda pada Linux, Anda dapat menginstal menggunakan Pengelola paket distribusi Linux Anda, atau Anda dapat kompilasi dari sumber/menggunakan PECL.

Mengkonfigurasi PHP untuk Memuat Xdebug

Anda akan perlu menambahkan dua baris untuk file php.ini (yang mungkin ada di /etc/php.ini atau c:\xampp\php\php.ini atau di tempat lain bergantung dari platform Anda):

Setelah selesai, restart Apache server. Ada banyak pilihan lain yang dapat Anda konfigurasi nanti, yang dijelaskan dalam dokumentasi xdebug, tetapi seharusnya cukup untuk Anda memulai.

Verifikasi Xdebug

Membuat sebuah halaman dengan nama test.php di folder root web Anda, dan menambahkan panggilan ke fungsi phpinfo():

Cari xdebug, dan Anda harus menemukan di bagian bawah halaman yang terlihat seperti ini:

Menginstal Eclipse dan PDT

Download Eclipse Classic dari Eclipse halaman download, unzip, salin ke direktori aplikasi Anda, kemudian luncurkan.

Klik menu Help, lalu Instal perangkat lunak. Dibawah opsi "Work With", pilih situs "Indigo". Centang salah satu kotak "PHP Development Tools (PDT) Features", lalu klik "Next."

Klik melalui langkah-langkah Wizard untuk menyelesaikan instalasi, kemudian restart Eclipse bila diminta.

Mengatur Eclipse untuk Mendengarkan Xdebug

Mengaktifkan perspektif PHP dengan mengklik tombol Open Perspective di sudut kanan atas:

Kemudian pilih opsi "Other", pilih PHP, kemudian klik "OK":

Klik tombol PHP untuk pergi ke perspektif PHP:

Kemudian pergi ke "File-> New -> PHP Project." Ini akan memunculkan jendela "New PHP Project". Anda dapat memasukkan "wordpress" atau apa pun yang Anda inginkan untuk nama proyek Anda. Anda harus memilih opsi "Create project at existing location (existing source)" di bawah "Contents" dan lihat ke direktori root WordPress Anda. Biarkan pengaturan default untuk bagian lain, kemudian klik tombol "Finish".

Pergi ke "Window-> Preferences -> PHP-> Debug" dan mengubah pengaturan "PHP Debugger" dari Zend ke XDebug.

Kemudian pergi ke "Window -> Preferences -> PHP-> Debug-> Installed Debugger" dan double klik XDebug. Ubah opsi "Accept remote session (JIT)" dari "off" ke "localhost" dan klik "OK".

Langkah 2 Debug Kode Anda

Mengatur Breakpoints

Breakpoint adalah penanda yang memberitahu debugger untuk menunda eksekusi program di baris kode tertentu sehingga Anda dapat memeriksa apa yang terjadi.

Hal ini mudah. Hanya buka file yang berisi kode yang ingin Anda periksa (seperti file index.php dalam tema yang Anda kembangkan). Kemudian, di sisi kiri jendela file, cukup klik ganda daerah abu-abu di sebelah kiri dari garis. Titik biru akan muncul seperti halnya pada baris 20 dalam contoh di bawah ini (index.php dari tema twentlyeleven).

Memulai Sesi Xdebug

Setelah mengatur breakpoint, buka browser dan pergi ke situs WordPress lokal, menambahkan string permintaan XDEBUG_SESSION_START = wordpress seperti ini:

Ini akan memberitahu xdebug menetapkan cookie yang ia akan cari pada muatan halaman berikutnya. Jika semuanya telah dikonfigurasi dengan benar, Anda harus melihat pemberitahuan bahwa Eclipse telah menerima sesi masuk. Klik "OK" untuk menerima, dan kemudian lihat Debug harus terbuka pada baris pertama dari index.php.

Anda dapat memeriksa variabel yang saat ini didalam lingkup menggunakan jendela pemeriksa "Variabel" di sisi kanan. Dalam contoh di atas, disana tidak ada variabel lokal untuk dilihat, hanya variabel global $_COOKIE, $_ENV, $_FILES, $_GET, $_POST, $_REQUEST, $_SERVER dan $GLOBALS.

Langkah Melalui Kode

Untuk melihat contoh dari informasi yang lebih berguna, Anda perlu melangkah melalui beberapa baris kode untuk mendapatkan The Loop. Jendela "Debug" Eclipse memiliki beberapa kontrol, Anda harus memahami:

  1. Remove All Terminated Launches - Membersihkan sesi sebelumnya
  2. Resume - Melanjutkan eksekusi kode. Jika Anda tidak memiliki breakpoints lain yang diatur, program akan selesai memuat seperti biasanya.
  3. Suspend - Tidak berlaku untuk PHP debugging.
  4. Terminate - Menghentikan eksekusi program dan debugging.
  5. Disconnect - Menghentikan debugging, tapi terus melaksanakan program.
  6. Step Into - Mengikuti kode seperti mengeksekusi baris demi baris, termasuk pergi ke fungsi panggilan. Hal ini berguna untuk debug fungsi tertentu.
  7. Step Over - Lewati menampilkan eksekusi fungsi panggilan tertentu. Eksekusi akan dilanjutkan pada baris berikutnya.
  8. Step Return - Jika didalam fungsi, ini akan melompat dimana ia kembali.
  9. Drop To Frame - Tidak berlaku untuk PHP debugging.
  10. Use Step Filters - Tidak didukung dalam Eclipse PDT

Klik tombol "Resume" sekali. Eclipse debug klien berikutnya harus berhenti sejenak di breakpoint yang Anda tetapkan dalam tema index.php file.

Klik tombol "Step Into". Ini akan membawa Anda ke fungsi "have_posts" WordPress. Klik "Step Into" lagi, dan Anda akan melihat variabel global $wp_query muncul di jendela "Variabel".

Klik "Step Return" untuk keluar fungsi "have_posts", dan Anda akan kembali di index.php file. Dalam contoh, ini akan membiarkan Anda pada panggilan ke fungsi "twentyeleven_content_nav". Anda dapat melangkah ke dalamnya untuk melihat apa yang terjadi jika Anda tertarik, atau langkah di atasnya jika Anda tidak tertarik.

Mengklik "Step Over" akan membawa Anda ke panggilan untuk The Loop. Melangkah ke dalam "the_post" akan mengajarkan Anda banyak tentang bagaimana WordPress mengambil data dan menulis ke halaman selama The Loop. Mengawasi pada jendela "Variabel" untuk memantau perubahan bagaimana variabel lokal dan global seperti pengeksekusian fungsi.

Anda juga dapat melangkah melalui kode Anda sendiri dengan cara yang sama untuk melihat bagaimana variabel yang dimanipulasi sebagai jalur berjalan.

Ketika Anda sudah melihat semua yang ingin Anda lihat, klik tombol "Resume" dan blog Anda akan selesai memuat seperti biasa.

Jika Anda mengklik link ke halaman browser lain, perlu dicatat bahwa debugger akan memuat lagi bahkan jika string permintaan XDEBUG_SESSION_START tidak ditambahkan ke bagian akhir URL.

Menutup Sesi Debug Anda

Bila Anda tidak ingin Eclipse memasuki modus debug lagi ketika halaman muat blog lokal Anda, masukkan panggilan URL yang terlihat seperti ini ke browser Anda:

Yang akan menghapus xdebug cookie, dan halaman Anda akan memuatkannya secara normal sampai Anda membuka sesi xdebug lain.

Apakah Anda menggunakan Eclipse dan Xdebug untuk pembangunan WordPress berat? Jika demikian, Apakah Anda memiliki tips tambahan? Jika tidak, apa yang menghentikan Anda dari menyelam?

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
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.