Odpravljanje napak je ključnega pomena za analizo kode in identifikacijo napak. Orodja Chrome Developer Tools ponujajo različne funkcije, ki vam pomagajo spremljati mrežne zahteve in razumeti, kako vaša aplikacija komunicira s strežnikom. V tem navodilu se osredotočamo na Fetch-Breakpoints, s pomočjo katerih lahko ustavite kodo, ko se izvede mrežna zahteva. To vam omogoča, da dobite globlje vpoglede v delovanje vaše aplikacije in hitro rešite morebitne težave.
Najpomembnejše ugotovitve
- Fetch-Breakpoints omogočajo ustavitev kode ob vsaki mrežni zahtevi.
- Lahko navedete specifične URL naslove, da usmerjeno nadzorujete obnašanje.
- V delu orodij za razvijalce omrežja lahko sledite, katere zahteve so bile opravljene in kdo jih je sprožil.
Korak za korakom navodila
1. Dostop do orodij za razvijalce
Za delo z Fetch-Breakpoints morate najprej odpreti orodja za razvijalce Chrome. To lahko storite tako, da kliknete na meni z tremi pikami v zgornjem desnem kotu brskalnika Chrome, nato na "Dodatna orodja" in nazadnje na "Orodja za razvijalce". Lahko pa uporabite tudi bližnjico Ctrl + Shift + I na Windows ali Cmd + Option + I na Mac.
2. Navigacija do virov
V orodjih za razvijalce boste našli zavihke "Elementi", "Konzola", "Viri", "Omrežje" in še več. Sedaj morate klikniti na zavihek "Viri", da dostopate do vira svojega projekta. Tu lahko vidite svojo JavaScript kodo in določite točke preloma.
3. Nastavitev Fetch-Breakpointa
V zavihku "Viri" obstaja razdelek za "XHR" ali "Fetch-Breakpoints". Če želite določiti Fetch-Breakpoint, kliknite na ustrezen gumb, da dodate nov prelomno točko. Pozvani boste, da vnesete URL ali del URL-ja, da prilagodite prelomno točko. Če pa ne vnesete ničesar, bo prelomna točka omogočena za vse Fetch zahteve, ki se izvajajo.
4. Sprožitev prelomne točke
Za preverjanje, ali je Fetch-Breakpoint pravilno nastavljen, izvedite dejanje, ki sproži Fetch zahtevo - na primer kliknite na gumb, ki izvaja poizvedbo podatkov. Če je prelomna točka pravilno delovala, se bo koda ustavila na tem mestu in vam pokazala trenutno stanje kode.
5. Preverjanje mrežne zahteve
Ko se koda ustavi, imate možnost preveriti trenutno stanje spremenljivk in analizirati mrežno zahtevo. Tu lahko preverite, ali so bili pridobljeni pričakovani podatki. Če spremljate spremenljivko v svoji kodi, ki izvaja Fetch zahtevo, lahko na primer preverite, ali je pravilen končni cilj dosežen.
6. Konfiguracija specifičnih prelomnih točk
Če vas zanimajo le določene Fetch zahteve, lahko dodate novo prelomno točko in navedete specifičen URL naslov. Na primer, lahko nastavite URL na "main.js". Ko nato izvedete Fetch zahtevo za ta URL, naj bi bila prelomna točka sprožena. Če ne navedete URL-ja, bo prelomna točka veljala za vse omrežne zahteve, kar je koristno za preiskovanje splošnih težav.
7. Preverjanje začetnika
Za več informacij o vzroku za Fetch zahtevo lahko preklopite na zavihek "Omrežje" v orodjih za razvijalce. Tam boste videli seznam vseh izvedenih Fetch zahtev. Stolpec "Začetnik" vam pokaže, kateri del vaše kode je sprožil zahtevo. Če kliknete na enega od teh vnosov, boste preusmerjeni na ustrezno vrstico v zavihku "Viri".
8. Zadnje preverjanje
Ko opravljate prilagoditve svoje kode, npr. spremembe URL-ja, se prepričajte, da ponovno naložite orodja za razvijalce, da sprejmete spremembe. To lahko enostavno storite tako, da osvežite stran. Nato preverite, ali Fetch zahteva znova deluje pravilno in ali je prelomna točka sprožena po vaših željah.
Povzetek
V tej vadnici si se naučil, kako uporabiti prekinitvene točke pridobivanja (Fetch-Breakpoints) v orodjih za razvijalce Chrome za zaustavitev kode med omrežnimi zahtevami. Spoznal si, kako nastaviti specifične prekinitvene točke, da se ustaviš le na določenih mestih svoje kode, katere informacije lahko pridobiš iz orodij za razvijalce, ter kako ugotoviti, kdo je sprožil Pridobitev (Fetch) zahteve.
Pogosta vprašanja
Kaj so prekinitvene točke pridobivanja (Fetch-Breakpoints)?Prekinitvene točke pridobivanja (Fetch-Breakpoints) omogočajo, da se ustavi koda na določenem mestu, ko se pošlje Pridobitev (Fetch) zahteva strežniku.
Kako nastavim prekinitveno točko pridobivanja (Fetch-Breakpoint)?Prekinitveno točko pridobivanja (Fetch-Breakpoint) nastaviš v zavihku »Sources« orodja za razvijalce Chrome tako, da vpišeš URL ali splošno nastavitev za vse Pridobitve (Fetch) zahtev.
Kako preverim, ali moja prekinitvena točka pridobivanja deluje?To lahko preizkusiš tako, da izvedeš dejanje, ki sproži Pridobitev (Fetch) zahtevo. Če je prekinitvena točka aktivna, se bo orodje za odpravljanje hib zaustavilo.
Kaj storiti, če se prekinitne točke ne sprožijo?Prepričaj se, da je URL pravilno vnešen in da je koda, ki izvaja Pridobitev (Fetch) zahtevo, dejansko dostopna. Prav tako lahko pomaga ponovno naložiti stran.
Kako lahko vidim pobudnika Pridobitve (Fetch) zahteve?Pobudnika lahko vidite v zavihku »Network« orodij za razvijalce, kjer je prikazano, kateri del vaše kode je sprožil zahtevo.
