ce căutați?
construind o aplicație web complexă, probabil că ați întâlnit faptul că ceva nu a funcționat conform planificării. Ați petrecut ore și ore căutând o eroare în codul dvs. și apoi pe internet căutând ajutor pentru remedierea problemei. Pentru a vă ușura, în acest articol vă explicăm câteva tehnici eficiente de depanare a unei aplicații web care reduc semnificativ durerea depanării și scurtează timpul de detectare a problemelor.
consolă.log
în primul rând, o consolă de metode javascript utilizate în mod obișnuit.jurnal. Puteți introduce o metodă în codul dvs. cu variabila dată. În timpul executării codului, aplicația va returna valoarea variabilelor specificate în interiorul metodei din consolă. Acesta este cel mai simplu mod de a verifica dacă programul returnează valoarea așteptată.
din păcate, aceasta nu este o metodă foarte eficientă de depanare. O astfel de abordare t nu ne permite să vedem progresul executării codului (dacă nu introducem consola.conectați-vă la fiecare câteva rânduri, dar atunci cantitatea de date aruncată în consolă va fi ilizibilă și vom face doar o mizerie în cod.) În plus, returnează numai variabila trecută, cu condiția ca aplicația să nu arunce o eroare în timpul executării codului.
sfat nr. 1
dacă aveți multe console.jurnalele pun numele într-un șir și următoarea variabilă, de exemplu, consola.log (‘variabilă’, variabilă).
Chrome DevTools (Source Tab)
o metodă mai eficientă pentru depanarea unei aplicații web este utilizarea Chrome DevTools și Source Tab. Înainte de a începe depanarea în fila Sursă, trebuie să adăugăm node_modules la boxul negru. Adăugăm această regulă, astfel încât atunci când trecem prin puncte de întrerupere să nu ne arate fișiere din pachete externe, ceea ce face dificilă depanarea. Avem nevoie pentru a deschide setările în Chrome Blackboxing-ul pentru a adăuga modele și apoi scrie acolo /node_modules.
când adăugați node_modules la boxul negru, putem merge la fila Sursă. Să presupunem că doriți să urmăriți în timp real procesul funcției dvs. și să verificați ieșirile. Apăsați Ctrl + o în fila Sursă și introduceți un nume de fișier sursă. Apoi puneți punctele de întrerupere pe liniile de cod care vă interesează, puteți începe să executați procesul în browserul dvs. Când liniile selectate încep procesarea, browserul va înceta să execute codul. Vedeți captura de ecran de mai jos.
după cum puteți vedea, linia curentă de cod în care browserul s-a oprit are un fundal albastru. În partea dreaptă, există o bară în care se află centrul nostru de comandă. Iată scurta noastră introducere.
controale
în partea de sus a barei, aveți secțiunea Controale. Să ne concentrăm asupra elementelor cruciale. Primul control de reluare ne duce la următorul punct de întrerupere marcat în domeniul de aplicare al Codului executat. Al doilea pas de control asupra următorului apel de funcție ne duce la următoarea linie a codului executat. Ultimul control deactive breakpoints dezactivează punctele de întrerupere selectate. Este un control util atunci când avem multe puncte de întrerupere selectate și vrem să revenim la clic prin aplicație pentru o vreme, fără a face o pauză la fiecare punct de întrerupere.
domenii
avem o secțiune domenii de mai jos. Avem mai multe tipuri de domenii: local (funcția efectuată în prezent) și închideri în funcție de domeniul în care ne aflăm (de exemplu, părintele funcției efectuate în prezent sau al unei componente). În fiecare dintre aceste domenii, browserul ne arată toate variabilele care apar în ele.
Breakpoints
ultima secțiune discutată este breakpoints. Acesta arată ce puncte de întrerupere și în ce fișiere sunt marcate. Folosind casetele de selectare, le putem dezactiva și reactiva cu ușurință.
sfaturi nr. 2-5
- dacă utilizați imuabil.js în proiectul dvs., instalați Imuabilul.JS Object Formatter plugin și activați-l în setările browserului. Acest lucru va simplifica în mod semnificativ depanarea obiectelor imuabile.
- dacă nu utilizați imuabil.js în proiectul dvs. și utilizați codul Visual Studio ca IDE, vă recomandăm insistent instalarea și configurarea Debugger pentru Chrome (VSC nu are un imuabil.plugin de formatare js). Simplifică depanarea și mai mult și permite modificări mai rapide ale codului.
- Dacă fila Sursă nu afișează fișierele locale, verificați harta sursă din proiect.
- când browserul se oprește pe un punct de întrerupere, aveți acces la variabile și în consolă.
React Developer Tools
React Developer Tools sunt, de asemenea, soluții utile. Astfel de instrumente vă permit să vizualizați cu ușurință structura arborelui React în proiectul dvs., statele și recuzita din componentă. Selectați un element din pagină pentru a inspecta funcția este puternic, mai ales atunci când nu știți întregul proiect. Vă ajută să găsiți componenta pe care trebuie să o actualizați.
sfat nr. 6
dacă utilizați Vue.js, poți folosi Vue.JS devtools. Extensia are funcții similare și acces la Vuex (echivalentul redux în react).
Redux DevTools
dacă utilizați Redux în proiectul dumneavoastră, Redux DevTools este un must-have. O astfel de soluție vă permite să urmăriți întregul flux de acțiuni, modificări de stare, sarcină utilă și să vizualizați magazinul curent după fiecare acțiune efectuată. Dacă ceva nu funcționează așa cum presupunem și totul pare bine în cod, merită să luăm în considerare ce acțiuni sunt expediate, cu ce sarcină utilă. Uneori există greșeli simple, cum ar fi copierea Constantei din acțiunea de mai sus, redenumirea fără a schimba valoarea și apoi apelarea la ceva complet diferit. Mai jos este un gif care prezintă cele mai importante funcții Redux DevTools.
sfat nr. 7
dacă aplicația dvs. execută un număr mare de acțiuni, este posibil ca extensia să nu funcționeze corect din cauza memoriei insuficiente pentru a procesa atât de multe acțiuni. Puteți încerca să o configurați în opțiunile de extensie (în acest caz, opțiunea maxAge.)
Fiddler
ultimul instrument pe care am dori să îl introducem este Fiddler. Instrumentul a fost creat pentru a gestiona traficul de rețea. Este extrem de util atunci când avem unele bug-uri de producție și nu putem copia datele de producție într-un mediu inferior pentru a depana local. Într-o astfel de situație, pentru a avea acces la datele de producție în mediul local, setăm traficul în fila AutoResponder. Când deschideți pagina, în loc să descărcați fișierul js de pe server, Fidler conectează fișierul nostru de producție construit local. Depanarea ulterioară se face în fila Sursă chrome dev tools. Mai jos este o captură de ecran cu setarea de redirecționare a traficului către fișierul local. Programul permite, de asemenea, obiective simulate.
8
dacă doriți să creați batjocuri de puncte finale într-un mod ușor și rapid, puteți utiliza un program mock moon.
rezumatul unei depanări agile a unei aplicații web
pentru mulți dintre noi, procesul de depanare a unei aplicații web este asociat cu o durere de cap și ore lungi petrecute în fața computerului. Cu toate acestea, acest proces poate fi scurtat și făcut mai plăcut dacă aveți instrumentele potrivite și know-how-ul pentru a le utiliza. Adesea sunt la îndemână și gratuit. Am împărtășit cu dvs. cele mai importante și utile instrumente pe care le folosim zilnic.