V tem vodniku vam bom pokazal, kako učinkovito uporabljati omrežna orodja Google Chrome za analizo omrežnih zahtev in odgovorov. Omrežne analize vam pomagajo razumeti čase nalaganja spletnih mest, identificirati težave pri prenosu podatkov ter izboljšati zmogljivost vaših aplikacij. To je zlasti uporabno za razvijalce, ki želijo razumeti in optimizirati delovanje svojih spletnih mest.
Najpomembnejši uvidi
- Onemogočite predpomnilnik za realistično analizo zahtev.
- Uporabite informacije o glavah zahtev in odgovorov, da razumete komunikacijo med odjemalcem in strežnikom.
- Spremljajte časovni potek zahtev na diagramu vodnega korita.
- Filtrirajte in razvrstite zahtevke, da hitro najdete pomembne informacije.
- Uporabite konzolo za odpravljanje napak in nadzor komunikacije prek vtičnikov za spletne vtiče.
Korak za korakom
Najprej odprite orodja za razvijalce Chrome. To dosežete z desnim klikom na stran in izbiro "Preglej" ali s kombinacijo tipk F12 (Windows) oziroma Command + Option + I (Mac).
V zavihku za omrežje označite polje "Onemogoči predpomnilnik". To je pomembno, saj se predpomnilnik brskalnika ignorira. Brskalnik bo tako vse datoteke znova naložil s strežnika. To zagotavlja, da prejmete najnovejše datoteke in olajša analizo.
Osvežite stran. To lahko storite s pritiskom na F5 ali s kombinacijo tipk "Ctrl + R" (Windows) oziroma "Command + R" (Mac). Po osvežitvi boste videli seznam zahtev, ki jih je stran poslala.
Ko kliknete na vnos na seznamu, si lahko ogledate podrobnosti. Glave zahtev (Request Headers) so še posebej pomembne, saj vsebujejo informacije o poslanih podatkih. Lahko preklopite med surovim (RAW) oz. oblikovanim pogledom.
Isto velja za glave odgovorov (Response Headers). Ko strežnik obdela zahtevo, pošlje odgovor nazaj. Tudi tukaj si lahko ogledate informacije o glavah, da razumete, kako je potekala komunikacija.
Diagram vodnega korita je pomembno orodje za prikaz trajanja in vrstnega reda zahtev. Stolpci prikazujejo, kdaj se je začela zahteva in kdaj je bila dokončana. Kliknite na stolpec "Vodni korit", da vizualno prikažete časovni potek.
Če analizirate čase nalaganja, je koristno vedeti natančen čas, porabljen za vsako zahtevo. Na primer, čas nalaganja datoteke Index-HTML je lahko bistveno hitrejši kot za zunanje skripte ali CSS datoteke. To lahko vse prepoznate v pogledu vodnega korita.
Pomembne so tudi povezave WebSocket. Te pogosto ostanejo odprte in zato v diagramu vodnega korita niso označene kot končane. Pomembno je razumeti, da se WebSockets uporabljajo za komunikacijo v realnem času in se ne nalagajo ali končujejo vedno na običajen način.
Ko kliknete na zahtevo, lahko vidite predogled odgovora. Na primer, pri zahtevi za HTML lahko preverite renderirani HTML predogled. To je zlasti uporabno, če želite analizirati, katera HTML vsebina je bila vrneva s strežnika.
V zavihku "Sprožitelj" lahko sledite, kateri skripti ali datoteke so sprožili zahtevo. To vam daje predstavo o tem, kako deluje celotna struktura vaše spletne strani in kateri elementi medsebojno delujejo.
Čas je še en pomemben vidik. Lahko analizirate, kateri zahtevki so trajali dlje od pričakovanega. Analiza časov nalaganja je ključnega pomena za prepoznavanje ozkih grl v omrežju. Pri tem je diagram vodnega korita še posebej koristen.
Če delate na strani, ki ustvarja več zahtev, lahko prilagodite urejanje zahtev, da izboljšate preglednost. Lahko na primer razvrstite zahteve po času ustvarjanja, imenu ali velikosti.
Uporabite polje za filtriranje, da hitro najdete specifične zahteve. Lahko iščete po določenih izrazih ali tipih, kot so CSS ali JavaScript, da dobite geografske informacije.
Z nastavitvijo "Ohrani dnevnik" lahko zagotovite, da bodo vse zahteve, tudi med prehodom med stranmi, zabeležene. Brez te funkcije se seznam ponastavi ob prehodu na drugo stran.
Če želite zapreti orodja za razvijalce in ponovno naložiti stran, nove zahteve ne bodo zabeležene, dokler orodja za razvijalce ne odprete znova. Zato je pomembno, da orodja za razvijalce zaženete pred pridobivanjem celotnih podatkov.
Od zdaj naprej ste dobili vpogled v funkcije orodja za mrežo Chrome. Te sposobnosti so ključne za poglobitev vašega razumevanja mrežne komunikacije med odjemalcem in strežnikom.
Zaključek
V tem vadnem programu ste se naučili, kako lahko uporabite orodja za razvijalce Chroma za analizo mrežnih zahtev. Lahko spremljate podatke v realnem času, identificirate težave in izboljšate zmogljivost vaših spletnih mest. Zavihek Mreža nudi dragocene vpoglede v interakcije med vašim brskalnikom in strežnikom, ki so nujne za optimizacijo in odpravljanje težav.
Pogosta vprašanja
Kako lahko onemogočim predpomnilnik v zavihku Mreža?Aktivirajte potrditveno polje "Onemogoči predpomnilnik" v zavihku Mreža orodja za razvijalce Chroma.
Kako vidim čase nalaganja posameznih zahtev?V grafikonu vodnega toka lahko vidite začetne in končne čase vsake zahteve.
Ali lahko filtriram moje zahteve?Da, uporabite polje za filtriranje zgoraj v zavihku Mreža, da iščete po določenih datotekah.
Kaj naredi možnost "Ohrani dnevnik"?To vam omogoča, da ohranite mrežne zahteve med prehajanjem med stranmi.
Kako analiziram povezave protokola WebSocket?Kliknite na zahtevo protokola WebSocket v zavihku Mreža, da si ogledate zgodovino in sporočila.
