Odpravljanje napak v spletnih aplikacijah lahko predstavlja izziv, zlasti če gre za kompleksne ogrodja, kot je React. V tem navodilu vam bom pokazal, kako učinkovito obvladati odpravljanje napak v React aplikacijah s pomočjo orodij za razvijalce Google Chrome. Posebej obravnavam specifične tehnike za odkrivanje in odpravljanje najpogostejših napak. Za razumevanje konceptov morate imeti znanje v React.
Najpomembnejše ugotovitve
- Razumite vlogo izvornih zemljevidov pri odpravljanju napak v vaši React aplikaciji.
- Postavite prekinitve na strateških mestih, da sledite pretoku aplikacije.
- Analizirajte klicni sklad, da razumete, katere funkcije so kdaj klicane.
Korak za korakom navodila
Začnimo z odpravljanjem napak tako, da sem pripravil preprost primer React aplikacije, ki ponuja dva gumba za povečevanje števcev. Prepričajmo se, da se stanje aplikacije pravilno posodablja.
Najprej odprite Razvijalska orodja v Chrome-u. To lahko storite tako, da z desno miškino tipko kliknete na stran in izberete "Preglej" ali preprosto pritisnete tipko "F12".
V prvem koraku ponovno naložite svojo React aplikacijo, da ste prepričani, da delate s trenutnim stanjem. Ko je aplikacija naložena, boste videli dva gumba za štetje. Prvi gumb poveča prvi števec, drugi pa drugi števec.
Ko kliknete na gumbe, boste opazili, da se vrednosti števcev povečujejo. Te povečane vrednosti lahko preverite v konzoli, ki jo najdete tudi v Razvijalskih orodjih. Pritisnite "Escape" dvakrat, da prikažete ali skrijete konzolo.
V naslednjem koraku spreminjate kodo svoje aplikacije, še posebej UseEffect Hook. UseEffect Hook se uporablja za obdelavo stranskih učinkov v React-u. V mojem primeru sem ga nastavil tako, da v konzoli izpiše trenutno vrednost števca. To zagotavlja, da razumete, kako pogosto se ta učinek sproži.
Z uporabo konzole lahko sledite kodi in preverite, ali se vrednosti pravilno izpisujejo. Če pa ne navedete pravilno polja odvisnosti v UseEffect-u, lahko to povzroči nepričakovano vedenje.
Če želite to preizkusiti, za trenutek odstranite polje odvisnosti in opazujte, kaj se zgodi. Nazaj v aplikaciji lahko sedaj določite prekinitev. Kliknite na številko v levem stolpcu, da postavite prekinitev.
Zdaj kliknite prvi gumb in opazujte, da se izvajanje ustavi pri postavljenem prekinitvi. To vam omogoča analizo stanja aplikacije med izvajanjem ročice Click.
Ugotovite, da se stanje pravilno posodobi le za gumb, ki je bil pritisnjen. Če pa kliknete na drugi gumb, boste opazili, da se vedenje aplikacije ne ujema z vašimi pričakovanji.
Zdaj začnete preiskovati napako. Opazite, da UseEffect v vsakem primeru izpiše prejšnjo vrednost števca, tudi če pritisnete na drugi števec.
Tukaj morate ponovno dodati polje odvisnosti in se prepričati, da je trenutna vrednost števca navedena kot odvisnost. Tako se bo učinek sprožil le, če se spremeni relevantni števec.
Ko ponovno naložite aplikacijo in pritisnete gumbe, boste opazili, da se konzolni izpis pojavi le ob spremembi števca. Dodajte še en prelomni točki v vaši Console.Log izjavi, da preverite, ali se tam izpisujejo pričakovane vrednosti.
Upoštevajte, da je v prikazu kode React na voljo tudi možnost Prikaži seznam ignoriranih okvirov. To vam lahko pomaga preprečiti pojavljanje povezane knjižnične kode na klicnem skladu, kar bi lahko motilo vašo analizo.
Ko ste odpravili napako, je koristno, da jo ponovno preverite. Ponovno se prepričajte, da je koda preverjena znotraj funkcionalnosti "Pritisni", da potrdite, da je sprememba imela želeni učinek.
Poleg tega lahko na različnih mestih v pogovorih strategično postavite prekinitvene točke, da nadalje preučite funkcije. Redno preverjajte klicni sklad, da sledite vsem funkcijam, ki so bile klicane v določenem trenutku.
Pomembno je tudi vedeti, da asinhroni postopki lahko vodijo do izgube lokalnega stanja, zato je pomembno redno preverjati klicni sklad, da ohranite pregled nad stanjem vaše React aplikacije.
Povzetek
V tem vadnici ste se naučili, kako pomembna so orodja za razvijalce Chrome za učinkovito odpravljanje napak v React aplikacijah. Postavljanje prekinitvenih točk in analiza klicnega sklada sta ključna koraka za razumevanje pretoka vaše kode in reševanje težav. Z ustrezno upravljanjem odvisnosti v UseEffect lahko zagotovite, da se prikazuje pričakovano stanje vaše aplikacije.
Pogosto zastavljena vprašanja
Kaj je prekinitvena točka?Prekinitvena točka je točka v kodi, kjer se izvedba programa ustavi, da se preuči trenutno izvajanje.
Kako uporabim polje odvisnosti v UseEffect?Polje odvisnosti vam omogoča, da določite, katere spremenljivke naj sprožijo učinek, ko se spremenijo.
Kaj so zemljevidi virov?Zemljevidi virov povezujejo stisnjeno in prevedeno kodo z izvirno kodo, kar olajša odpravljanje napak.
Kako spremljam asinhrone operacije v klicnem skladu?Upoštevajte, da asinhrone klice s funkcijami SetTimeout ali Promises vplivajo na stanje aplikacije in lahko povzročijo, da lokalne spremenljivke ob določenem času niso na voljo.
