Network Monitor bilježi i prikazuje svaki mrežni zahtjev koji stranica šalje — XHR/Fetch API pozive, učitavanja skripti, dohvaćanja stilova, preuzimanja slika, datoteke fontova i još mnogo toga. Pregledajte URL-ove, HTTP metode, statusne kodove, veličine odgovora i vremensku mjeru — sve u plutajućem panelu koji se ažurira uživo, bez otvaranja DevTools preglednika.
Kartica Network u Chrome DevToolsu moćna je, ali glomazna — zauzima znatan dio zaslona, resetira se prilikom navigacije i zahtijeva da se odmaknete od sadržaja stranice. Network Monitor pruža ključne značajke praćenja mreže u laganom plutajućem panelu koji se nalazi iznad stranice.
Presreće XHR i Fetch zahtjeve te prati učitavanje resursa putem Performance API-ja, prikazujući svaki mrežni zahtjev u trenutku kad se dogodi. Svaki zahtjev prikazuje URL, HTTP metodu (GET, POST, PUT, DELETE), status kod (označen bojom: zeleno za 2xx, žuto za 3xx, crveno za 4xx/5xx), veličinu odgovora u bajtovima i trajanje u milisekundama. Kliknite bilo koji zahtjev da biste proširili detalje: zaglavlja zahtjeva, zaglavlja odgovora, payload zahtjeva, pregled tijela odgovora i raščlambu vremena izvršavanja.
Zahtjevi napravljeni putem Beacon API-ja (koji se obično koristi za analitičke pingove poslane neposredno prije nego što se stranica napusti) također se hvataju, što je inače teško uočiti jer se okidaju tijekom navigacije. Ovo je zaseban alat od WebSocket Inspectora — Network Monitor fokusira se na HTTP promet zahtjeva i odgovora, dok su WebSocket veze i njihovi frameovi pokriveni zasebnim alatom WebSocket Inspector, tako da svaki panel ostaje fokusiran i pregledan umjesto da miješa dvije vrlo različite vrste prometa u jedan zbrkani feed.
Svaki mrežni zahtjev pojavljuje se u panelu čim se dogodi — učitavanja stranica, API pozivi, odgođeno učitani resursi i zahtjevi u pozadini. Feed se ažurira u stvarnom vremenu bez potrebe za ručnim osvježavanjem.
Kliknite bilo koji zahtjev za prikaz svih detalja: URL zahtjeva, metodu, zaglavlja, tijelo (za POST/PUT), zaglavlja odgovora, pregled tijela odgovora (JSON se automatski formatira), statusni kod, veličinu i vremenski pregled.
Filtrirajte zahtjeve po vrsti: XHR/Fetch (API pozivi), JS (skripte), CSS (stilovi), IMG (slike), Font (web fontovi) ili Sve. Odvojite API promet od učitavanja resursa kako biste se usredotočili na ono što je važno.
Statusni kodovi kodirani su bojom radi trenutnog prepoznavanja: zelena za 2xx (uspjeh), žuta za 3xx (preusmjeravanja), crvena za 4xx (greške klijenta) i 5xx (greške poslužitelja). Neuspjeli zahtjevi odmah su vidljivi.
Svaki zahtjev prikazuje veličinu odgovora (u KB) i ukupno trajanje (u milisekundama). Prepoznajte spore API pozive, prevelike resurse i nepotrebne zahtjeve koji utječu na performanse stranice.
Traka sažetka prikazuje ukupan broj zahtjeva i kombiniranu veličinu za sve zabilježene zahtjeve. Filtrirajte sažetak za prikaz ukupnih vrijednosti po vrsti — koliko se propusnosti troši na skripte, slike ili API pozive.
Pratite XHR/Fetch zahtjeve kako biste provjerili poziva li vaš frontend ispravne API krajnje točke s odgovarajućim parametrima. Kliknite za pregled tijela zahtjeva i odgovora — trenutno otkrijte neusklađene formate podataka.
Crveni unosi 404 i 500 odmah ističu neispravne resurse ili neuspjele API pozive. Vidite koji URL-ovi ne rade, kada ne rade i koji odgovor s greškom vraća poslužitelj.
Sortirajte po trajanju kako biste pronašli najsporije zahtjeve. Sortirajte po veličini za pronalazak najvećih resursa. Ukupni sažetak prikazuje cjelokupnu sliku propusnosti — šalje li stranica previše zahtjeva ili preuzima previše podataka?
Vidite koje mrežne zahtjeve stranica šalje u pozadini — analitički pingovi, heartbeat pozivi, zahtjevi za ispitivanje, odgođeno učitani resursi. Razumijte cjelokupnu mrežnu aktivnost koja nije vidljiva korisniku.
Filtrirajte zahtjeve i provjerite koje domene se kontaktiraju. Prepoznajte skripte trećih strana koje šalju neočekivane mrežne pozive — piksele za praćenje, prikupljanje podataka ili API pozive koje niste znali da postoje.
Otvorite plutajući dock DevSuite Pro i kliknite ikonu Network Monitora. Panel se otvara i odmah počinje bilježiti mrežne zahtjeve.
Koristite stranicu normalno. Svaki mrežni zahtjev pojavljuje se u feedu čim se pošalje — API pozivi, učitavanja resursa i zahtjevi u pozadini su svi zabilježeni.
Kliknite filtere vrste (XHR, JS, CSS, IMG, Font) kako biste suzili prikaz. Prikažite samo API pozive za otklanjanje grešaka u dohvaćanju podataka ili samo slike za provjeru učitavanja resursa.
Kliknite bilo koji redak zahtjeva za prikaz detalja: URL, zaglavlja, tijelo zahtjeva, tijelo odgovora, statusni kod, veličinu i trajanje.
Crveni statusni kodovi (404, 500) označavaju neuspjele zahtjeve. Dugo trajanje upućuje na uska grla performansi. Velika veličina sugerira resurse koji trebaju optimizaciju.
Instalirajte DevSuite Pro besplatno i otključajte 64+ razvojnih alata za svoj preglednik.
