Debugging di Lokal (oleh Roda Gila): Panduan Pemula

Diterbitkan: 2022-08-13

Mengalami masalah yang muncul di situs web atau bahkan dalam pemasangan situs web lokal bisa sangat menegangkan. Lagi pula, masalah kinerja situs atau bug dapat mengakibatkan waktu henti situs. Dan downtime situs dapat berarti kehilangan lalu lintas, kehilangan peluang, dan bahkan kehilangan pendapatan.

Untungnya, ada banyak solusi debugging untuk mengidentifikasi dan memperbaiki masalah situs. Tetapi bagaimana Anda bisa tahu apa yang paling cocok untuk situasi Anda?

Di Lokal, ada pendekatan multi-cabang yang tersedia untuk debugging. Di sini, kita akan membahas opsi debug default yang disertakan dengan Lokal, serta cara untuk mengidentifikasi kesalahan, dan add-on tambahan yang dapat Anda gunakan untuk menemukan dan memperbaiki masalah dengan lebih cepat dan efisien.

Apa itu Xdebug di Lokal?

Sebelum kita dapat membahas cara men-debug di Lokal, pertama-tama kita perlu berbicara tentang Xdebug, alat debugging yang ada di Lokal dan beberapa fitur yang paling penting.

Xdebug sebenarnya adalah ekstensi PHP yang menyederhanakan proses debugging. Terutama, itu membuat pemformatan untuk fungsi var_dump () lebih bersih dan menambahkan lebih banyak peringatan dan pemberitahuan tentang kesalahan tertentu. Dengan begitu, itu membuat pengalaman pengguna yang lebih intuitif.

perbedaan xdebug var dump

Jika Anda tidak tahu, var_dump() adalah bagian berguna dari PHP yang dengan cepat mengungkapkan apa yang salah dengan kode Anda. Tetapi perbedaannya di sini adalah jika Anda tidak memiliki Xdebug, kode akan dihasilkan saat Anda memanggil var_dump() akan jauh lebih sulit untuk dibaca. Plus, Anda harus memformat PHP Anda dengan cara yang sangat khusus bahkan ketika memanggil var_dump() di tempat pertama.

Xdebug tersedia di Lokal karena menawarkan informasi yang lebih mendalam tentang kesalahan saat muncul. Itu juga dilengkapi dengan langkah debugger yang merampingkan proses debugging, terutama untuk masalah yang lebih besar. Debugger langkah berfungsi dengan memungkinkan Anda mengevaluasi kode Anda langkah demi langkah pada titik henti sementara tertentu. Ini memungkinkan Anda untuk menilai kode di bagian yang lebih kecil dan untuk menemukan masalah dengan lebih mudah.

Dan bagian terbaiknya adalah Xdebug diaktifkan di Lokal secara default, jadi Anda bahkan tidak perlu mengacaukan pengaturan apa pun untuk memulai. Buka saja Lokal dan pergi.

Cara Men-debug Situs Web di Lokal

Anda dapat men-debug situs web di Lokal dengan beberapa cara utama. Berikut adalah langkah-langkah utama yang akan kita bahas:

  1. Mengidentifikasi kesalahan konsol browser
  2. Menggunakan Pemantau Kueri
  3. Melalui Xdebug dan Kode VS
  4. Dengan Xdebug dan PhpStorm
  5. Menggunakan Xdebug untuk langkah debugging

Mari selami.

1. Identifikasi Kesalahan Konsol Browser

konsol browser firefox di lokal

Langkah pertama dalam debugging adalah menggunakan konsol browser, yang merupakan bagian dari semua alat pengembang browser. Ini memungkinkan Anda untuk menemukan kesalahan pada halaman web tanpa alat khusus. Cukup mulai Lokal, akses halaman yang dimaksud dengan browser pilihan Anda dan gunakan konsol untuk menemukan kesalahan. Berikut ini adalah rincian tentang cara mengakses konsol browser di beberapa browser.

Jika Anda Menggunakan Chrome…

  1. Buka DevTools dengan membuka More Tools > Developer Tools saat berada di menu browser Chrome. Atau, tekan Ctrl/Cmd+Shift+I .
  2. Klik tab Konsol .
  3. Jika ada kesalahan, seharusnya sudah terlihat sekarang. Jika tidak, muat ulang halaman web untuk membuatnya.
  4. Catat jenis kesalahan, lokasinya, dan nomor barisnya di dalam konsol browser.

Jika Anda Menggunakan Firefox…

  1. Buka alat pengembang browser dengan membuka Alat Lainnya > Alat Pengembang Web saat berada di menu Firefox. Ctrl/Cmd+Shift+I juga berfungsi di sini.
  2. Klik Konsol tab. Atau, Anda juga dapat mengakses konsol secara langsung melalui Alat Lainnya > Konsol Browser .
  3. Setiap kesalahan sekarang akan terlihat. Jika tidak, muat ulang halaman.

Jika Anda Menggunakan Safari…

  1. Aktifkan Alat Pengembang dengan masuk ke Preferensi > Lanjutan saat berada di menu Safari. Option+Cmd+I adalah teman Anda di sini.
  2. Centang kotak di sebelah Tampilkan menu Kembangkan di bilah menu . Kemudian, tutup kotak dialog.
  3. Klik Kembangkan > Tampilkan Konsol Kesalahan . Kesepakatan yang sama seperti di atas.

Berbekal informasi ini, Anda dapat kembali ke sistem file yang diatur di Lokal dan menemukan sedikit kode tertentu yang menyebabkan masalah dan kemudian menerapkan perbaikan. Gunakan tombol Buka folder situs untuk mengakses lokasi situs web lokal Anda.

buka folder situs

2. Gunakan Monitor Kueri untuk Memperbaiki Masalah Kinerja Situs

Anda juga dapat mengidentifikasi dan memperbaiki masalah situs web secara langsung di WordPress. Faktanya, plugin Query Monitor adalah pilihan yang fantastis untuk debugging dan untuk mengidentifikasi masalah kinerja, khususnya. Ini membuat pasangan yang membantu dengan alat debugging lokal bawaan dan sangat membantu untuk menemukan masalah plugin dan tema pihak ketiga.

Anda dapat menginstal plugin seperti yang lain. Cukup buka Plugin > Add New dan cari berdasarkan nama. Temukan dalam daftar dan klik Instal Sekarang , lalu Aktifkan setelah diunduh.

instal monitor kueri

Apa yang Dapat Diberitahukan oleh Monitor Kueri kepada Anda

Setelah menginstal plugin, Anda akan melihat opsi menu baru di bagian atas dasbor WordPress.

kueri monitor menu bilah admin

Melayang di atasnya akan menampilkan daftar drop-down alat dan opsi Query Monitor. Memilih salah satu dari mereka akan membuka menu di bagian bawah di mana Anda dapat mempelajari lebih detail tentang halaman saat ini.

konsol monitor kueri

Antara lain, Query Monitor akan memberi Anda gambaran umum tentang kinerja halaman Anda, termasuk:

  • Penggunaan Memori Puncak. Alat ini menunjukkan kepada Anda berapa banyak memori yang digunakan untuk menghasilkan halaman pada waktu tertentu.
  • Waktu Pembuatan Halaman. Menunjukkan kepada Anda jumlah waktu yang diperlukan untuk menghasilkan halaman.
  • Waktu Kueri Basis Data. Terakhir, alat ini menunjukkan kepada Anda berapa lama waktu yang dibutuhkan database untuk menanggapi permintaan tema atau plugin.

Di luar masalah kinerja, plugin ini juga dapat mengidentifikasi kesalahan dan pemberitahuan PHP – seperti halnya Xdebug. Namun, upayanya berfokus pada tema dan plugin pihak ketiga. Apa yang nyaman di sini adalah bahwa jika ada kesalahan, tab baru akan muncul di dalam alat yang bernama PHP Errors yang akan mencantumkan setiap kesalahan dengan ancaman keamanannya. Ini juga akan memberi tahu Anda baris kode di mana kesalahan muncul dan kode kesalahan tertentu atau pemberitahuan juga.

Sekarang ini sangat membantu untuk situs web yang sudah aktif atau dalam pengujian tahap akhir. Namun, jika Anda masih dalam tahap pengembangan lokal, menggunakan Xdebug di Lokal akan menjadi pilihan terbaik Anda.

3. Menyiapkan Xdebug dan Kode VS untuk Debugging

Kembali ke Lokal, Anda dapat menggunakan Xdebug dalam berbagai cara untuk melakukan debugging situs lokal. Untuk mendapatkan lebih banyak uang Anda, sehingga untuk berbicara, Anda dapat menambahkan kekuatan Kode VS ke persamaan.

VS Code adalah editor kode sumber terbuka dengan alat yang diperluas dan antarmuka pengguna yang lebih intuitif. Itu membuat proses debugging baris demi baris jauh lebih intuitif dan mudah dilihat.

editor kode vscode kode studio visual

Anda benar-benar dapat menghubungkan Kode VS ke Xdebug Step Debugger dengan efek yang luar biasa. Berikut cara mengaturnya untuk digunakan di dalam Lokal:

  1. Unduh VS Code dan instal sesuai instruksi pengembang.
  2. Unduh dan instal ekstensi debugger PHP. Dokumentasi lokal merekomendasikan ekstensi PHP Debug untuk tugas ini.
  3. Di Lokal, klik Add-on > Xdebug + VS Code .
  4. Klik Instal Add-on .
  5. Setelah selesai, tekan Enable & Relaunch .
  6. Buka situs di Lokal lalu klik tab Utilitas .
  7. Klik Tambahkan Konfigurasi Jalankan ke Kode VS .
  8. Kode VS akan diluncurkan dan Anda kemudian dapat memulai proses debugging.

Jika Anda tidak menyukai Kode VS, Anda dapat menggunakan alat pengeditan lain untuk tugas tersebut.

4. Menyiapkan Xdebug dan PhpStorm untuk Debugging

xdebug dan phpstorm add-on lokal

Pilihan lain adalah menggunakan PhpStorm dengan Xdebug. Anda dapat menambahkannya ke Lokal melalui add-on dan itu akan berfungsi bersama dengan Xdebug Step Debugger. Instalasi dan pengaturan sangat mirip dengan proses yang dijelaskan untuk Kode VS di atas. Untuk menggunakannya, lakukan langkah-langkah berikut:

  1. Unduh dan Instal PhpStorm.
  2. Di Lokal, klik Pengaya > Xdebug + PhpStorm .
  3. Klik Instal Add-on .
  4. Sekali lagi, Aktifkan & Luncurkan kembali setelah selesai.
  5. Buka situs apa pun di Lokal dan klik Utilitas tab.
  6. Klik Tambahkan Konfigurasi Jalankan ke PhpStorm .
  7. Dengan PhpStorm aktif, setel breakpoints dengan mengklik talang pada baris kode tertentu di mana Anda ingin breakpoint terjadi.
  8. Klik Mainkan untuk memulai proses debug.

Jika Anda ingin panduan lebih lanjut melalui proses debugging, Langkah Debugging selalu menjadi pilihan.

5. Menggunakan Xdebug untuk Langkah Debugging

Langkah Debugging adalah alat yang sangat berguna dan bagian dari Xdebug yang pada dasarnya memegang tangan Anda melalui proses debugging. Ia bekerja dengan VS Code dan PhpStorm (serta banyak IDE dan editor teks lainnya) untuk menyediakan alat, langkah, dan protokol debugging yang terperinci namun mudah diikuti.

Di Lokal, Anda tidak perlu melakukan apa pun untuk menyiapkan Xdebug – ini diaktifkan secara default secara otomatis. Meskipun ada instruksi penyiapan yang lebih kompleks jika Anda memiliki lingkungan pengujian yang rumit (dengan beberapa sistem berkontribusi sekaligus), kami akan menganggap Anda hanya perlu melakukan debugging, pada satu sistem, dalam satu instalasi Lokal untuk saat ini.

Untuk menggunakan langkah debugging, yang perlu Anda lakukan hanyalah mengikuti langkah-langkah yang dijelaskan di dua bagian sebelumnya. Fitur ini berfungsi dengan VS Code atau PhpStorm. Setelah semuanya diatur, itu akan secara otomatis mengatur breakpoint dan memainkan kode satu per satu. Ini menawarkan cara intuitif untuk menjalankan kode Anda, melihat kesalahan, dan memperbaikinya saat muncul.

Debug di Lokal Menjadi Mudah

Seperti yang Anda lihat, debugging di Lokal sebenarnya adalah proses yang cukup mudah yang membutuhkan pengaturan minimal untuk memulai. Alat debugging utama sudah ada secara default. Yang perlu Anda lakukan adalah mengatur editor teks atau IDE pilihan Anda, mengonfigurasi satu atau dua add-on, dan Anda sudah siap. Tentu saja, Anda perlu melakukan perbaikan bug yang sebenarnya untuk membuat situs web Anda dalam kondisi prima. Tapi setidaknya, proses debugging itu sendiri bisa dijalankan dengan mudah dan minim keributan.

Apa alat pilihan Anda untuk men-debug di Lokal? Kami akan senang mendengar tanggapan Anda di komentar di bawah.