A Network Monitor rögzít és megjelenít minden hálózati kérést, amelyet az aktuális oldal végez — XHR/Fetch API hívásokat, szkript betöltéseket, stíluslap lekéréseket, képletöltéseket, betűtípusfájlokat és egyebeket. Láthatod az URL-eket, HTTP metódusokat, állapotkódokat, válaszméreteket és időzítési adatokat — mindezt egy élőben frissülő lebegő panelen, a böngésző DevTools megnyitása nélkül.
A Chrome DevTools Network lapja hatékony, de nehézkes — jelentős képernyőterületet foglal el, navigáláskor visszaáll, és az oldal tartalmától el kell navigálnod. A Network Monitor az alapvető hálózatfigyelési funkciókat nyújtja egy könnyűsúlyú lebegő panelen, amely az oldal tetején helyezkedik el. Elfogja az XHR és Fetch kéréseket, és figyeli az erőforrásbetöltést a Performance API-n keresztül, megjelenítve minden hálózati kérést, ahogy az megtörténik. Minden kérésnél látható az URL, a HTTP metódus (GET, POST, PUT, DELETE), az állapotkód (színkódolva: zöld 2xx esetén, sárga 3xx esetén, piros 4xx/5xx esetén), a válasz mérete bájtban, és az időtartam milliszekundumban. Kattints bármelyik kérésre a részletek kibontásához: kérés fejlécek, válasz fejlécek, kérési hasznos teher (POST/PUT esetén), választest előnézet és időzítési bontás. Szűrj típus szerint (XHR/Fetch, JS, CSS, képek, betűtípusok), hogy a releváns forgalomra koncentrálhass.
Minden hálózati kérés megjelenik a panelen, ahogy megtörténik — oldalbetöltések, API hívások, lazán betöltött erőforrások és háttér fetch-ek. A hírfolyam valós időben frissül, manuális frissítés nélkül.
Kattints bármelyik kérésre a teljes részletek megtekintéséhez: kérési URL, metódus, fejlécek, hasznos teher (POST/PUT esetén), válasz fejlécek, választest előnézet (JSON automatikusan formázva), állapotkód, méret és időzítési bontás.
Szűrd a kéréseket típus szerint: XHR/Fetch (API hívások), JS (szkriptek), CSS (stíluslapok), IMG (képek), Font (webfonts) vagy Összes. Különítsd el az API forgalmat az erőforrásbetöltéstől, hogy arra összpontosíthass, ami számít.
Az állapotkódok azonnali felismerhetőség érdekében színkódoltak: zöld 2xx esetén (siker), sárga 3xx esetén (átirányítások), piros 4xx esetén (kliens hibák) és 5xx esetén (szerver hibák). A sikertelen kérések azonnal láthatók.
Minden kérésnél látható a válasz mérete (KB-ban) és a teljes időtartam (milliszekundumban). Azonosítsd a lassú API hívásokat, a túlméretezett erőforrásokat és a felesleges kéréseket, amelyek befolyásolják az oldal teljesítményét.
Az összesítő sáv mutatja az összes rögzített kérés teljes számát és összesített méretét. Szűrd az összesítést a típusonkénti összegek megtekintéséhez — mennyi sávszélességet fogyasztanak a szkriptek a képekhez és az API hívásokhoz képest.
Figyeld az XHR/Fetch kéréseket, hogy ellenőrizd, a frontendjed a megfelelő API végpontokat hívja-e a helyes paraméterekkel. Kattints a kérési hasznos terhek és választestek vizsgálatához — azonnal észleld az eltérő adatformátumokat.
A piros 404-es és 500-as bejegyzések azonnal kiemelik a törött erőforrásokat vagy a sikertelen API hívásokat. Lásd, mely URL-ek sikertelenek, mikor hibásodnak meg, és milyen hibaválaszt küld a szerver.
Rendezz időtartam szerint a leglassabb kérések megtalálásához. Rendezz méret szerint a legnagyobb erőforrások megtalálásához. Az összesítő végösszegek mutatják a teljes sávszélesség-képet — túl sok kérést indít az oldal, vagy túl sok adatot tölt le?
Lásd, milyen hálózati kéréseket küld az oldal a háttérben — analitikai pingek, szívverés hívások, lekérdezési kérések, lazán betöltött erőforrások. Értsd meg a teljes hálózati aktivitást a felhasználó számára láthatón túl.
Szűrd a kéréseket, és ellenőrizd, mely domainekkel kerül kapcsolatba az oldal. Azonosítsd a váratlan hálózati hívásokat kezdeményező harmadik féltől származó szkripteket — követőképpontok, adatgyűjtés vagy olyan külső API hívások, amelyekről nem tudtál.
Nyisd meg a DevSuite Pro lebegő dockot, és kattints a Network Monitor ikonra. Megnyílik egy panel, és azonnal elkezdi rögzíteni a hálózati kéréseket.
Használd az oldalt normálisan. Minden hálózati kérés megjelenik a hírfolyamban, ahogy megtörténik — API hívások, erőforrásbetöltések és háttér fetch-ek mind rögzítve lesznek.
Kattints a típusszűrőkre (XHR, JS, CSS, IMG, Font) a nézet szűkítéséhez. Csak API hívásokat jelenítve meg hibakereshetsz az adatlekérésnél, vagy csak képeket megjelenítve ellenőrizheted az eszközök betöltését.
Kattints bármelyik kéréssorra a részletek kibontásához: URL, fejlécek, hasznos teher, választest, állapotkód, méret és időzítés.
A piros állapotkódok (404, 500) sikertelen kéréseket jeleznek. A lassú időtartamok teljesítménybeli szűk keresztmetszetekre utalnak. A nagy méretek olyan erőforrásokat sugallnak, amelyek optimalizálást igényelnek.
Telepítse ingyen a DevSuite Pro-t, és oldjon fel 39+ fejlesztői eszközt böngészőjéhez.
