Cum te poate ajuta Xdebug să devii un dezvoltator WordPress mai bun

După cum poate atesta orice dezvoltator, codul nu este niciodată gata pentru producție după prima versiune. O parte cheie a procesului de dezvoltare este depanarea - eliminarea sau modificarea tuturor părților codului dvs. care nu funcționează.

Extensia Xdebug pentru PHP este o modalitate populară de a elimina și de a distruge toate erorile din codul dvs.

Unul dintre marile aspecte ale Xdebug este cât de flexibil este. Indiferent de cadrul sau mediul de dezvoltare preferat, veți putea găsi o versiune de Xdebug care se integrează în fluxul dvs. de lucru. De acolo, obținerea unui mâner pe unealta nu va dura mult.

Acest tutorial va analiza Xdebug în profunzime, inclusiv procesul de instalare, integrarea acestuia în configurarea dvs. și utilizarea generală.

Mai întâi, să vă oferim mai mult context despre ce este Xdebug și ce face.

Vă prezentăm Xdebug

Xdebug este una dintre cele mai populare extensii pentru a vă depana codul PHP. Îl veți instala din mediul ales și acționează ca un „depanator pas”.

Pe scurt, acest lucru vă permite să lucrați la codul dvs. linie cu linie, astfel încât să puteți parcurge și să vedeți cum acționează codul și interacționează în cadrul programului dvs., precum și să investigați rezultatul acestuia. De acolo, puteți face modificări după cum doriți.

Xdebug poate face mult mai mult, totuși:

• Puteți analiza performanța codului dvs. folosind un set de valori și vizualizări.
• Când rulați teste unitare PHP, puteți vedea ce suite de cod rulați și executați.
• Xdebug include capabilități de „urmărire”, care vor scrie fiecare apel de funcție pe disc. Aceasta va include argumente, atribuiri de variabile și valori returnate.
• Xdebug aduce, de asemenea, îmbunătățiri la raportarea standard a erorilor PHP. Vom acoperi mai multe despre asta mai târziu.

Având în vedere setul de caracteristici, există o mulțime de moduri de a utiliza Xdebug (și orice depanator similar) în fluxul dvs. de lucru. Le vom acoperi în secțiunea următoare.

De ce ați dori să utilizați Xdebug

Mulți dezvoltatori nu vor avea un flux de lucru dedicat de depanare care utilizează instrumente și extensii terțe. Acest lucru se datorează faptului că PHP include propria sa înregistrare rudimentară a erorilor. Veți folosi comenzi precum error_log , var_dump și print pentru a vedea rezultatele variabilelor și apelurilor de funcții.

De exemplu, există o mulțime de fragmente pe care le puteți reutiliza pentru dezvoltarea WordPress - Stack Overflow este plin de ele:

 function log_me($message) { if ( WP_DEBUG === true ) { if ( is_array($message) || is_object($message) ) { error_log( print_r($message, true) ); } else { error_log( $message ); } } }

Cu toate acestea, există câteva dezavantaje importante ale acestei abordări:

• Mai întâi trebuie să vă asigurați că activați jurnalele de erori pentru platforma cu care lucrați. În acest caz, veți dori să activați WP_DEBUG (mai multe despre asta în curând).
• Acest exemplu de depanare „dump” oferă mai puține posibilități de investigare decât depanarea pas. Aici, puteți scoate numai ceea ce definiți.

Ultimul punct necesită mult efort manual, mai ales dacă munca de zi cu zi nu este ca administrator de sistem. De exemplu, dacă doriți să depanați un bloc de cod, puteți adăuga fragmentul dvs. pe baza unei variabile pe care o definiți. Cu toate acestea, s-ar putea să nu fie sursa problemei sau chiar să nu indice ce se întâmplă.

În schimb, un instrument precum Xdebug își poate face magia pentru a oferi un domeniu mai mare:

• Puteți „spărge” codul în diferite momente în timpul execuției pentru a vedea ce se întâmplă în timp real.
• Există o mulțime de valori, vizualizări, ramuri și multe altele care vă ajută să aflați ce face codul dvs. și cum răspunde.
• Uneori, puteți chiar să modificați valorile din mers în timpul procesului de depanare. Acest lucru oferă o valoare imensă, chiar și pentru suitele de cod care funcționează bine. În esență, puteți efectua teste unitare manuale în orice moment.
• Deoarece utilizați puncte de întrerupere pentru a marca zonele de depanat, nu trebuie să lucrați cu fragmente din codul dvs. Acest lucru vă păstrează codul mai curat și reduce numărul de probleme viitoare.

În general, utilizarea unui instrument precum Xdebug este mai degrabă o decizie proactivă decât una reactivă. Puteți utiliza depanarea pasă ca parte a procesului de dezvoltare de bază, la fel ca implementarea testelor unitare ca parte a dezvoltării bazate pe teste (TDD).

Cum să activați înregistrarea erorilor PHP

Deși vă puteți depana codul fără o anumită eroare, este adesea bine să știți dacă apare o problemă fără a avea Xdebug deschis. Acest lucru vă oferă un punct de plecare pentru explorare. Nu este strict necesar, dar poate fi o parte utilă a lanțului dvs.

Pentru a raporta fiecare eroare care apare, va trebui să adăugați o linie în partea de sus a fișierului PHP relevant:

 error_reporting(E_ALL);

Aceasta este o comandă catch-all și puteți realiza același lucru folosind funcția ini_set :

 ini_set('error_reporting', E_ALL);

Acest lucru vă permite să modificați setările din fișierul dvs. php.ini , proiect cu proiect. Deși puteți intra în acest fișier și faceți o modificare manuală, este adesea o idee mai bună să lucrați cu ini_set pentru a modifica parametrul specific:

 ini_set('display_errors', '1');

După ce ați setat raportarea erorilor activă după bunul plac, puteți începe să lucrați cu Xdebug.

Cum se utilizează Xdebug

În următoarele câteva secțiuni, vă vom arăta cum să utilizați Xdebug, inclusiv pașii de care veți avea nevoie pentru a configura lucrurile. Deși nu putem acoperi fiecare aspect al instrumentului, acest ghid de pornire rapidă vă va ajuta să mergeți rapid.

În primul rând, totuși, trebuie să instalați Xdebug. Să aflăm cum să o facem.

1. Instalați Xdebug pentru sistemul dvs. de operare (OS)

Deoarece Xdebug este adaptabil la orice număr de setări, procesul exact pentru fiecare va fi ușor diferit. La nivelul sistemului de operare, există câteva diferențe:

• Windows: Acesta este un proces de configurare oarecum complicat care implică utilizarea unui fișier PHP existent și a unui asistent de instalare, apoi descărcarea versiunii potrivite pentru sistemul dumneavoastră.
• Linux: Metoda de aici este probabil cea mai simplă: puteți utiliza un manager de pachete pentru a instala Xdebug sau PHP Extension Community Library (PECL).
• Mac: Această metodă este, de asemenea, simplă: odată ce instalați PECL, puteți rula pecl install xdebug dintr-o instanță Terminal. De asemenea, va trebui să aveți instrumentele de linie de comandă XCode și PHP instalate pe sistemul dvs.

Cu toate acestea, majoritatea utilizatorilor nu vor dori să rămână cu o instanță Xdebug la nivel de sistem. În schimb, veți dori să îl integrați în propriul mediu de dezvoltare.

2. Integrați Xdebug în mediul dvs. de dezvoltare

Odată ce instalați Xdebug pentru sistemul de operare, ar trebui să îl conectați la mediul dvs.

Există atât de multe sisteme și instrumente acceptate aici încât nu le putem accesa pe toate. Mai târziu, vă vom oferi instrucțiuni atât pentru DevKinsta, cât și pentru PhpStorm. Chiar și așa, există o mulțime de alte medii populare din care să alegeți. Mai jos sunt câteva dintre recomandările noastre de top.

Vagabondi variați (VVV)

VVV este unul dintre mediile numite de pe site-ul web Make WordPress:

Vestea bună este că VVV include deja o versiune de Xdebug, dar trebuie să o activați. Puteți face acest lucru folosind Secure Shell (SSH) într-o fereastră Terminal:

 vagrant ssh -c "switch_php_debugmod xdebug"

Există totuși un pic de performanță și va trebui să reactivați această opțiune dacă vă furnizați site-urile.

Laravel Valet

Pentru unii utilizatori, Laravel's Valet reprezintă un mediu de dezvoltare web aproape perfect. Și mai bine, puteți integra Xdebug cu el.

Pentru a face acest lucru, va trebui să creați un fișier de configurare pentru depanator. Puteți găsi propria cale folosind php --ini la linia de comandă, care va returna câteva căi de fișiere diferite:

Apoi, creați un nou fișier xdebug.ini la calea pentru fișiere .ini suplimentare. În exemplul nostru, este la /opt/homebrew/etc/php/7.4/conf.d .

Odată ce deschideți acest fișier nou, deschideți și calea către fișierul de configurare încărcat (fișierul dvs. principal php.ini ). Cu ambele deschise, adăugați următoarele în partea de jos:

• php.ini: zend_extension="xdebug.so"
• xdebug.ini: xdebug.mode=debug

După ce ați salvat modificările, rulați valet restart din Terminal, apoi adăugați phpinfo(); exit; phpinfo(); exit; la unul dintre fișierele site-ului dvs. Veți dori să verificați dacă acest lucru funcționează printr-o încărcare rapidă a paginii în browser.

Rețineți că poate fi necesar să reporniți PHP folosind sudo brew services restart php , precum și să verificați dacă instalarea sistemului dumneavoastră Xdebug este corectă folosind php --info | grep xdebug php --info | grep xdebug . Veți observa liniile specifice Xdebug în ieșire:

De aici, puteți căuta să încorporați Xdebug în editorul de codare ales.

XAMPP

La fel ca Valet, există câteva părți ale procesului pentru XAMPP. Cu toate acestea, versiunile Windows și macOS au două procese diferite.

Începeți prin a instala XAMPP, apoi executați o verificare rapidă pentru a vedea dacă fișierul php_xdebug.dll (Windows) sau fișierul xdebug.so (macOS) există pe sistemul dvs.:

Dacă fișierul există, puteți trece la configurare. În caz contrar, va trebui mai întâi să descărcați fie binarul potrivit pentru Windows - un fișier pe 64 de biți pentru versiunea dvs. PHP preferată - sau să instalați câteva dependențe suplimentare dacă sunteți pe un Mac.

Pentru Windows, redenumiți fișierul DLL php_xdebug.dll , apoi mutați-l în calea fișierului \xampp\php\ext . Apoi, deschideți fișierul \xampp\php\php.ini în editorul de cod preferat și adăugați următoarele:

 output_buffering = Off

În secțiunea [XDebug] , adăugați următoarele trei linii:

 zend_extension=xdebug xdebug.mode=debug xdebug.start_with_request=trigger

După ce ați salvat modificările, reporniți Apache și testați Xdebug.

Pentru Mac, veți dori să vă asigurați că instalați instrumentele de linie de comandă Xcode folosind xcode-select --install la o instanță Terminal. După aceea, există trei pachete pe care veți dori să le instalați folosind Homebrew:

 brew install autoconf automake libtool

În unele cazuri, va trebui, de asemenea, să reinstalați XAMPP pentru a obține atât programul de bază, cât și „Fișierele dezvoltatorului”. Ar trebui să puteți reinstala numai aceste fișiere, dar mai întâi veți dori să efectuați o copie de rezervă a configurației existente.

Apoi, navigați la descărcarea folderului sursă Xdebug de pe sistemul dvs. și despachetați fișierul TGZ. Într-o fereastră Terminal, navigați la acel director și rulați următoarele:

 phpize pecl install xdebug

Rețineți că poate fi necesar să utilizați și aici sudo . De aici, puteți edita fișierul XAMPP php.ini. Pentru majoritatea instalărilor macOS, îl veți găsi la /Applications/XAMPP/xamppfiles/etc/php.ini . În acest director, veți găsi, de asemenea, calea către fișierul dvs. xdebug.so - notați acest lucru și utilizați-o în locul substituentului căii fișierului pentru acest fragment:

 [xdebug] zend_extension=/path/to/xdebug.so xdebug.mode=develop,degug xdebug.start_with_request=yes

Pentru a testa dacă funcționează, creați un nou fișier xdebug_info.php în directorul principal htdocs XAMPP. În interior, adăugați următoarele:

 <?php xdebug_info();

… apoi reîmprospătați Apache și testați Xdebug în browser.

Utilizarea PHPStorm cu Xdebug

Odată ce instalați Xdebug prin sistemul de operare și mediul dvs. de dezvoltare, va trebui să vedeți și depanatorul în sine. Veți face acest lucru prin intermediul editorului de cod ales sau al mediului de dezvoltare integrat (IDE). Ca și în cazul mediului dvs., există atât de multe dintre care să alegeți și fiecare ar putea avea o abordare diferită.

Acestea fiind spuse, mulți dezvoltatori aleg să folosească PhpStorm de la JetBrains. De fapt, PhpStorm oferă „asistență conștientă de WordPress” – și este o alegere populară și din multe alte motive.

Site-ul web JetBrains include instrucțiuni complete despre conectarea Xdebug și PhpStorm, dar le vom revizui aici.

Mai întâi, navigați la pagina Limbi și cadre > PHP din panoul Preferințe . Aici, deschideți meniul Kebab Mai multe articole de lângă câmpul derulant CLI Interpreter :

Aceasta va afișa câteva detalii suplimentare despre versiunea și interpretul dvs. PHP. Dacă faceți clic pe punctele de suspensie Mai multe articole de lângă opțiunea Fișier de configurare , veți vedea căile complete pentru fișierul dvs. php.ini :

Veți lucra cu acest fișier PHP în continuare pentru a continua procesul de configurare.

Lucrul în cadrul fișierului php.ini

Prima sarcină aici este să editați toate liniile care influențează modul în care Xdebug va funcționa cu PhpStorm.

În fișierul php.ini , căutați următoarele rânduri și fie eliminați-le, fie comentați-le:

 zend_extension=<path_to_zend_debugger> zend_extension=<path_to_zend_optimizer>

Aceste linii nu vor fi prezente în toate cazurile, așa că nu vă alarmați dacă nu le vedeți.

Apoi, adăugați următoarele în fișier:

 [xdebug] zend_extension="xdebug.so" xdebug.mode=debug xdebug.client_host=127.0.0.1 xdebug.client_port="<the port (9003 by default) to which Xdebug connects>"

Există câteva lucruri de reținut despre această suită de coduri:

• Este posibil să aveți deja o secțiune [xdebug] , caz în care puteți omite prima desemnare.
• Este posibil ca intrarea zend_extension să fie nevoie să adăugați calea completă a xdebug.so pentru a vă conecta.
• Deși ar putea arăta ca un substituent, parametrul xdebug.client_port este modul în care îl veți seta în codul dvs.

După ce le adăugați, salvați și închideți fișierul, apoi testați versiunea PHP din linia de comandă (folosind php --version ):

Dacă aveți o versiune funcțională a Xdebug, aceasta se va afișa ca una dintre extensiile PHP. De asemenea, puteți adăuga phpinfo(); într-un fișier nou și testați acest lucru în browser.

Acesta este cam tot ce trebuie să faceți pentru ca Xdebug să funcționeze ca depanator implicit cu PhpStorm. Ultimul pas înainte de a-l folosi este instalarea unei extensii de ajutor pentru browser.

Instalarea unei extensii de ajutor pentru browser

Ultima conexiune cheie pe care va trebui să o faceți este între browser și PhpStorm, realizată prin activarea depanării pas pe server. Deși puteți face acest lucru din linia de comandă folosind valori speciale GET sau POST , este mai simplu să utilizați o extensie.

Vă recomandăm să utilizați extensia dedicată Xdebug Helper. Îl puteți instala pe browserul dorit:

• Xdebug Helper pentru Chrome/Chromium/Brave
• Xdebug Helper pentru Firefox
• Xdebug Helper pentru Safari

Dacă doriți să explorați alte extensii, site-ul JetBrains oferă câteva opțiuni suplimentare pentru cele mai populare browsere.

Odată ce ați instalat extensia de browser aleasă, nu ar trebui să mai ajustați alte setări de configurare. De aici, puteți începe să utilizați Xdebug cu PhpStorm.

Folosind Xdebug

Deși vom folosi PhpStorm aici, veți vedea un aspect și o interfață similare între diferite IDE-uri - deși vor exista și unele diferențe evidente.

Există câteva concepte care se combină pentru a forma întreaga experiență de depanare:

• Puncte de întrerupere : acestea sunt punctele în care Xdebug se va opri pentru a vă permite să inspectați ieșirea. Puteți să setați câte doriți.
• Ascultarea conexiunilor: puteți activa și dezactiva această opțiune, deși majoritatea dezvoltatorilor o vor lăsa întotdeauna activată.
• Ecranul de depanare: cea mai mare parte a timpului dvs. va fi petrecut în interfața de depanare - este locul în care veți lucra cu diferitele linii de cod, variabile și parametri.

Primul pas este să activați ascultarea - nu veți putea depana nimic fără ea. Pentru a face acest lucru, faceți clic pe opțiunea Run > Start Listening for PHP Debug Connections din bara de instrumente:

Ca alternativă, puteți face clic pe pictograma „telefon” din bara de instrumente PhpStorm:

Oricare dintre aceste opțiuni va începe ascultarea conexiunilor.

De aici, puteți începe să setați puncte de întrerupere în jgheaburile editorului de cod. Un punct roșu indică un punct de întrerupere, pe care puteți face clic pentru a activa:

Când doriți să depanați codul, cel mai simplu mod este să începeți să ascultați, să setați puncte de întrerupere, apoi să mergeți la pagina specifică din browser. Găsiți pictograma extensiei dvs. în browser, apoi faceți clic pe ea și selectați opțiunea „Depanare”:

Acest lucru va deschide depanatorul în PhpStorm și va oferi vești bune sau proaste:

Dacă faceți clic dreapta pe diferitele valori, atribute, parametri și variabile, veți putea accesa un meniu contextual suplimentar. Acest lucru vă oferă o mulțime de spațiu suplimentar pentru a testa și a depana codul:

De exemplu, puteți seta valori diferite pentru variabilele de-a lungul căii. Aceasta ar putea fi o încercare deliberată de a vă sparge codul și de a vedea ce se întâmplă, sau ar putea fi o modalitate de a testa codul care are deja nevoie de o remediere. Oricum, aceasta vă oferă o metodă fantastică pentru a vă depana codul fără a fi nevoie să-l modificați mai întâi.

Cum vă ajută Kinsta să vă depanați site-ul WordPress

WordPress vine cu propriul set de opțiuni de depanare prin WP_DEBUG și alte instrumente, cum ar fi Query Monitor. Acestea permit un mod în care veți începe să vedeți mesaje de eroare ascunse anterior pe tot site-ul și tabloul de bord. De acolo, puteți începe să vă dați seama care este problema.

De asemenea, puteți salva acele mesaje de eroare folosind WP_DEBUG_LOG , care vă oferă o modalitate de a documenta problemele cu site-ul dvs. Abordăm cum să configurați acest lucru într-un alt articol de pe blog. Este ușor de configurat prin tabloul de bord MyKinsta (și prin ecranul Site-uri > Instrumente ):

Dacă asociați acest lucru cu instrumentul gratuit de mediu local DevKinsta, veți avea și o modalitate cu un singur clic de a activa și dezactiva WP_DEBUG pentru fiecare site pe care îl porniți:

Acest lucru înseamnă că puteți detecta erori pe site-ul dvs. în timpul dezvoltării și vă asigurați că nu ajung pe site-ul dvs. live. Aceste moduri sunt, de asemenea, ușor de dezactivat - vitale atât pentru securitatea site-ului, cât și a utilizatorului.

Toate planurile Kinsta vin, de asemenea, cu instrumentul Kinsta APM încorporat, care este instrumentul nostru de monitorizare a performanței conceput la comandă pentru site-urile WordPress.

Comanda Cheat Sheet

Înainte de a încheia această postare, ar trebui să menționăm comenzile rapide.

La fel ca multe alte piese software, există diferite moduri de a naviga prin Xdebug (și PhpStorm) folosind numai tastatura. De fapt, ați putea folosi chiar și linia de comandă pentru a depana scripturile PHP.

Odată ce Xdebug este pornit și rulează, puteți utiliza următoarele comenzi pentru a vă deplasa:

În timp ce editorul de cod specific va avea propriile comenzi rapide dedicate, accentul aici este pus pe PhpStorm. Aruncă o privire la acest tabel cu comenzi rapide de la tastatură pentru utilizarea Xdebug cu PhpStorm:

Din fericire, nu sunt multe de memorat aici. Trebuie să deschideți depanatorul, să setați puncte de întrerupere pe linie, să ascultați conexiunile și să rulați scripturile.

Cu toate acestea, dacă aveți nevoie de o comandă rapidă pentru o anumită sarcină, puteți utiliza comanda PhpStorm Find Action :

Odată ce începeți să tastați în acest spațiu, vi se va afișa o listă dinamică de comenzi și comenzi rapide aferente. De asemenea, puteți găsi o versiune PDF a tuturor comenzilor rapide de la tastatură prin meniul Ajutor > Comenzi rapide de la tastatură PDF .

Dacă doriți mai multă o privire în timp real asupra comenzilor rapide în timp ce lucrați cu mouse-ul, JetBrains oferă plugin-ul Key Promoter X:

Acest instrument la îndemână va afișa notificări cu privire la cea mai recentă acțiune efectuată, împreună cu comanda rapidă de la tastatură aferentă. Odată ce învățați și utilizați comenzile rapide, puteți elimina treptat acest plugin și puteți restabili acea proprietate valoroasă pe ecran.

rezumat

Practica depanării a parcurs un drum lung de la începuturile sale umile; acum cuprinde o sferă mult mai largă decât și-ar fi putut imagina progenitorii săi. Pentru a efectua o muncă amănunțită când vine vorba de repararea codului PHP, va trebui să utilizați un instrument competent. Există multe extensii și instrumente superbe din care să alegeți, dar Xdebug este un lider discutabil.

După cum am văzut, Xdebug se poate adapta chiar și la cele mai eclectice gusturi în editorii de cod și este deosebit de grozav atunci când este asociat cu PhpStorm. Cu toate acestea, indiferent de configurația dvs., va exista adesea o versiune de Xdebug care să se potrivească nevoilor dvs. În general, este un instrument puternic, flexibil și intuitiv de utilizat.

Credeți că Xdebug merită laudele sale sau există un alt instrument de depanare pe care îl preferați? Anunțați-ne în secțiunea de comentarii de mai jos!