Depanare în local (prin Flywheel): Ghid pentru începători

Apariția problemelor pe un site web sau chiar în cadrul instalării locale a unui site web poate fi deranjant. La urma urmei, problemele de performanță a site-ului sau erorile pot duce la oprirea site-ului. Iar timpul de nefuncționare al site-ului poate însemna pierderi de trafic, oportunități ratate și chiar venituri pierdute.

Din fericire, există numeroase soluții de depanare pentru identificarea și repararea problemelor site-ului. Dar cum poți ști ce va funcționa cel mai bine pentru situația ta?

În local, există o abordare pe mai multe direcții disponibilă pentru depanare. Aici, vom discuta despre opțiunile implicite de depanare incluse în Local, precum și despre modalitățile de identificare a erorilor și suplimente suplimentare pe care le puteți utiliza pentru a identifica și remedia problemele mai rapid și mai eficient.

Ce este Xdebug în local?

Înainte de a putea discuta despre cum să depanăm în Local, trebuie să vorbim mai întâi despre Xdebug, instrumentul de depanare prezent în Local și despre câteva dintre caracteristicile sale cele mai remarcabile.

Xdebug este de fapt o extensie PHP care simplifică procesul de depanare. În primul rând, face formatarea pentru funcția var_dump () mai curată și adaugă mai multe avertismente și notificări despre erori specifice. În acest fel, oferă o experiență de utilizator mai intuitivă.

În cazul în care nu știți, var_dump() este un fragment util de PHP care dezvăluie rapid ce este în neregulă cu codul dvs. Dar distincția aici este că, dacă nu ai avut Xdebug la îndemână, codul produs atunci când apelezi var_dump() ar fi mult mai greu de citit. În plus, ar trebui să vă formatați PHP într-un mod foarte special chiar și atunci când apelați var_dump() in primul loc.

Xdebug este disponibil în local deoarece oferă o mai mare profunzime de informații despre erori atunci când apar. De asemenea, vine cu un depanator pas care simplifică procesul de depanare, în special pentru probleme mai mari. Depanatorul pas funcționează permițându-vă să vă evaluați codul pas cu pas la anumite puncte de întrerupere. Acest lucru vă permite să evaluați codul în secțiuni mai mici și să localizați mai ușor problemele.

Și cea mai bună parte este că Xdebug este activat în local în mod implicit, așa că nici măcar nu trebuie să te încurci cu setările pentru a începe. Doar deschideți Local și plecați.

Cum să depanați un site web în local

Puteți depana un site web în local în câteva moduri cheie. Iată pașii principali pe care îi vom discuta:

1. Identificarea erorilor din consola browserului
2. Folosind Query Monitor
3. Prin Xdebug și VS Code
4. Cu Xdebug și PhpStorm
5. Folosind Xdebug pentru depanarea pas

Să ne scufundăm.

1. Identificați erorile din consola browserului

Primul pas în depanare este utilizarea consolei browserului, care face parte din toate instrumentele pentru dezvoltatori de browser. Acest lucru vă permite să identificați erorile pe paginile web fără instrumente speciale. Pur și simplu porniți Local, accesați pagina în cauză cu browserul ales de dvs. și utilizați consola pentru a detecta erorile. Ceea ce urmează este o detaliere a modului de accesare a consolei browserului în mai multe browsere.

Dacă folosești Chrome...

1. Deschideți DevTools accesând Mai multe instrumente > Instrumente pentru dezvoltatori în meniul browserului Chrome. Alternativ, apăsați Ctrl/Cmd+Shift+I .
2. Faceți clic pe fila Consolă .
3. Dacă există erori, acestea ar trebui să fie vizibile acum. Dacă nu, reîncărcați pagina web pentru a le genera.
4. Notați tipul de eroare, locul în care se află și numărul liniei acesteia în consola browserului.

Dacă folosești Firefox...

1. Deschideți instrumentele pentru dezvoltatori de browser accesând Mai multe instrumente > Instrumente pentru dezvoltatori web în meniul Firefox. Ctrl/Cmd+Shift+I funcționează și aici.
2. Faceți clic pe Consolă fila. Ca alternativă, puteți accesa consola direct prin Mai multe instrumente > Consola browser .
3. Orice erori ar trebui să fie acum vizibile. Dacă nu, reîncărcați pagina.

Dacă utilizați Safari...

1. Activați Instrumentele pentru dezvoltatori accesând Preferințe > Avansat în meniul Safari. Opțiunea+Cmd+I este prietenul tău aici.
2. Bifați caseta de lângă Afișați meniul Dezvoltare în bara de meniu . Apoi, închideți caseta de dialog.
3. Faceți clic pe Dezvoltare > Afișați consola de erori . Aceeași afacere ca mai sus.

Înarmat cu aceste informații, puteți reveni la sistemul de fișiere configurat în Local și puteți găsi fragmentul specific de cod care cauzează problemele și apoi implementați o remediere. Utilizați butonul Accesați folderul site-ului pentru a accesa locația site-urilor web locale.

2. Utilizați Monitorul de interogări pentru a remedia problemele de performanță ale site-ului

De asemenea, puteți identifica și repara problemele site-ului direct în WordPress. De fapt, pluginul Query Monitor este o alegere fantastică pentru depanare și pentru identificarea problemelor de performanță, în special. Acest lucru face o pereche utilă cu instrumente de depanare locale încorporate și este deosebit de util pentru identificarea problemelor legate de pluginuri și teme de la terți.

Puteți instala pluginul ca oricare altul. Pur și simplu accesați Plugin-uri > Adăugați nou și căutați-l după nume. Găsiți-l în listă și faceți clic pe Instalați acum , apoi Activați după ce a fost descărcat.

Ce vă poate spune Query Monitor

După instalarea pluginului, ar trebui să vedeți o nouă opțiune de meniu în partea de sus a tabloului de bord WordPress.

Trecând cu mouse-ul peste el, va apărea o listă derulantă de instrumente și opțiuni de monitorizare a interogărilor. Dacă alegeți oricare dintre ele, se va deschide un meniu în partea de jos, unde puteți afla mai multe detalii despre pagina curentă.

Printre altele, Query Monitor vă va oferi o imagine de ansamblu asupra performanței paginii dvs., inclusiv:

• Utilizare maximă a memoriei. Acest instrument vă arată câtă memorie este utilizată pentru a genera o pagină la un moment dat.
• Timpul de generare a paginii. Vă arată timpul necesar pentru ca o pagină să fie generată.
• Timpul de interogare a bazei de date. În cele din urmă, acest instrument vă arată cât de mult i-a luat bazei de date să răspundă la solicitările de teme sau plugin.

Dincolo de problemele de performanță, acest plugin poate identifica și erorile și notificările PHP - la fel ca Xdebug. Cu toate acestea, eforturile sale se concentrează pe teme și pluginuri terțe. Ceea ce este convenabil aici este că, dacă sunt prezente erori, va apărea o nouă filă în instrumentul numit în mod adecvat Erori PHP , care va enumera fiecare eroare cu amenințarea sa de securitate. De asemenea, vă va spune linia de cod în care apare eroarea și codul sau notificarea de eroare specifică.

Acum, acest lucru este foarte util pentru site-urile web care sunt deja live sau aflate în stadiu avansat de testare. Cu toate acestea, dacă sunteți încă în stadiul de dezvoltare locală, utilizarea Xdebug în local va fi cel mai bun pariu.

3. Configurarea Xdebug și VS Code pentru depanare

Înapoi în local, puteți utiliza Xdebug într-o varietate de moduri pentru a efectua depanarea locală a site-ului. Pentru a obține mai mult profit, ca să spunem așa, puteți adăuga puterea VS Code la ecuație.

VS Code este un editor de cod open-source cu instrumente extinse și o interfață de utilizator mai intuitivă. Face acest proces de depanare linie cu linie mult mai intuitiv și ușor pentru ochi.

De fapt, puteți conecta VS Code la Xdebug Step Debugger cu mare efect. Iată cum să îl configurați pentru utilizare în Local:

1. Descărcați VS Code și instalați-l conform instrucțiunilor dezvoltatorului.
2. Descărcați și instalați o extensie PHP de depanare. Documentația locală recomandă extensia PHP Debug pentru această sarcină.
3. În Local, faceți clic pe Add-ons > Xdebug + VS Code .
4. Faceți clic pe Instalare supliment .
5. După ce ați terminat, apăsați Activare și relansare .
6. Deschideți un site în Local și apoi faceți clic pe fila Utilități .
7. Faceți clic pe Adăugare configurație de rulare la codul VS.
8. VS Code se va lansa și apoi puteți începe procesul de depanare.

Dacă nu preferați VS Code, puteți utiliza un alt instrument de editare pentru sarcină.

4. Configurarea Xdebug și PhpStorm pentru depanare

O altă opțiune este să utilizați PhpStorm cu Xdebug. Puteți să-l adăugați la Local prin supliment și va funcționa împreună cu Xdebug Step Debugger. Instalarea și configurarea sunt foarte asemănătoare cu procesul descris mai sus pentru VS Code. Pentru a-l utiliza, parcurgeți următorii pași:

1. Descărcați și instalați PhpStorm.
2. În Local, faceți clic pe Add-ons > Xdebug + PhpStorm .
3. Faceți clic pe Instalare supliment .
4. Din nou, Activați și Relansați după ce ați terminat.
5. Deschideți orice site în Local și faceți clic pe Utilități fila.
6. Faceți clic pe Adăugare configurație de rulare la PhpStorm .
7. Cu PhpStorm activ, setați puncte de întrerupere făcând clic pe jgheab de la linia specifică de cod în care doriți să apară punctul de întrerupere.
8. Faceți clic pe Play pentru a începe procesul de depanare.

Dacă doriți mai multe îndrumări prin procesul de depanare, Step Debugging este întotdeauna o opțiune.

5. Utilizarea Xdebug pentru depanarea pas

Step Debugging este un instrument super util și o parte a Xdebug care, în esență, vă ține de mână în procesul de depanare. Funcționează cu VS Code și PhpStorm (precum și cu multe alte IDE-uri și editori de text) pentru a oferi instrumente, pași și protocoale de depanare detaliate, dar ușor de urmat.

În local, nu trebuie să faceți nimic pentru a configura Xdebug – este activat automat în mod implicit. Deși există instrucțiuni de configurare mai complexe dacă aveți un mediu de testare complicat (cu mai multe sisteme contribuind simultan), vom presupune că trebuie să efectuați depanarea, pe un singur sistem, într-o singură instalare a Local, deocamdată.

Pentru a utiliza depanarea în etape, tot ce trebuie să faceți este să urmați pașii descriși în cele două secțiuni anterioare. Funcția funcționează atât cu VS Code, cât și cu PhpStorm. Odată ce totul este configurat, va seta automat punctele de întrerupere și va reda codul unul câte unul. Aceasta oferă o modalitate intuitivă de a rula codul, de a vedea erorile și de a le remedia pe măsură ce apar.

Depanarea în local este ușoară

După cum puteți vedea, depanarea în local este de fapt un proces destul de ușor, care necesită o configurare minimă pentru a începe. Instrumentul principal de depanare este deja prezent implicit. Tot ce trebuie să faceți este să configurați editorul de text sau IDE-ul preferat, să configurați un supliment sau două și sunteți gata. Desigur, va trebui să remediați erorile reale pentru a vă aduce site-ul web într-o formă de vârf. Dar cel puțin, procesul de depanare în sine poate fi executat cu ușurință și zgomot minim.

Care sunt instrumentele dvs. preferate pentru depanare în local? Ne-ar plăcea să auzim feedback-ul dumneavoastră în comentariile de mai jos.