Netværksmonitor fanger og viser alle netværksanmodninger foretaget af den aktuelle side — XHR/Fetch API-kald, scriptindlæsninger, stylesheethentning, billeddownloads, fontfiler og mere. Se URL'er, HTTP-metoder, statuskoder, respons-størrelser og timing — alt i et live-opdaterende flydende panel uden at åbne browser-DevTools.
Chrome DevTools' Network-fane er kraftig, men tung — den tar opp mye skjermplass, nullstilles når du navigerer, og krever at du forlater selve sideinnholdet. Network Monitor gir deg de viktigste funksjonene for nettverksovervåking i et lettvekts flytende panel som ligger oppå siden.
Det fanger opp XHR- og Fetch-forespørsler og overvåker lasting av ressurser via Performance API, og viser hver nettverksforespørsel etter hvert som den skjer. Hver forespørsel viser URL, HTTP-metode (GET, POST, PUT, DELETE), statuskode (fargekodet: grønt for 2xx, gult for 3xx, rødt for 4xx/5xx), responsstørrelse i bytes og varighet i millisekunder. Klikk på en forespørsel for å utvide detaljene: request headers, response headers, request payload, forhåndsvisning av response body, og en tidsnedbryting.
Forespørsler sendt via Beacon API (ofte brukt til analytics-pinger som sendes rett før en side lastes ut) fanges også opp, noe som normalt er vanskelig å observere fordi de avfyres under navigering. Dette er et eget verktøy atskilt fra WebSocket Inspector — Network Monitor fokuserer på HTTP-forespørsel/-svar-trafikk, mens WebSocket-tilkoblinger og deres frames dekkes av det dedikerte WebSocket Inspector-verktøyet, slik at hvert panel forblir fokusert og lesbart i stedet for å blande to svært ulike trafikktyper i én støyete strøm.
Alle netværksanmodninger vises i panelet, efterhånden som de sker — sideindlæsninger, API-kald, lazy-loadede ressourcer og baggrundshentning. Feedet opdateres i realtid uden manuel opdatering nødvendig.
Klik på en anmodning for at se fulde detaljer: anmodnings-URL, metode, headers, payload (for POST/PUT), respons-headers, respons-body-forhåndsvisning (JSON auto-formateret), statuskode, størrelse og timing-opdeling.
Filtrer anmodninger efter type: XHR/Fetch (API-kald), JS (scripts), CSS (stylesheets), IMG (billeder), Font (webfonts) eller Alle. Isoler API-trafik fra ressourceindlæsning for at fokusere på det der betyder noget.
Statuskoder er farvekodede til øjeblikkelig genkendelse: grøn for 2xx (succes), gul for 3xx (omdirigering), rød for 4xx (klientfejl) og 5xx (serverfejl). Mislykkede anmodninger er øjeblikkeligt synlige.
Hver anmodning viser respons-størrelsen (i KB) og den samlede varighed (i millisekunder). Identificer langsomme API-kald, oversized ressourcer og unødvendige anmodninger, der påvirker sideydelsen.
En oversigtsbar viser det samlede antal anmodninger og kombineret størrelse for alle fangede anmodninger. Filtrer oversigten for at se totaler per type — hvor meget båndbredde bruges på scripts vs. billeder vs. API-kald.
Se XHR/Fetch-anmodninger for at verificere, at dit frontend kalder de korrekte API-endepunkter med de rigtige parametre. Klik for at inspicere anmodnings-payloads og respons-bodies — fang uoverensstemmende dataformater øjeblikkeligt.
Røde 404 og 500-poster fremhæver øjeblikkeligt ødelagte ressourcer eller fejlende API-kald. Se hvilke URL'er der fejler, hvornår de fejler og hvad fejlrespons serveren returnerer.
Sortér efter varighed for at finde de langsomste anmodninger. Sortér efter størrelse for at finde de største ressourcer. Oversigtstotalerne viser det fulde båndbreddebillede — foretager siden for mange anmodninger eller downloader for meget data?
Se hvilke netværksanmodninger siden foretager i baggrunden — analyse-pings, heartbeat-kald, polling-anmodninger, lazy-loadede ressourcer. Forstå den fulde netværksaktivitet ud over, hvad der er synligt for brugeren.
Filtrer anmodninger og tjek, hvilke domæner der kontaktes. Identificer tredjeparts scripts, der foretager uventede netværkskald — sporings-pixels, dataindsamling eller eksterne API-kald, du ikke vidste om.
Åbn den flydende DevSuite Pro-dock, og klik på Netværksmonitor-ikonet. Et panel åbnes og begynder øjeblikkeligt at fange netværksanmodninger.
Brug siden normalt. Alle netværksanmodninger vises i feedet, efterhånden som de foretages — API-kald, ressourceindlæsninger og baggrundshentning fanges alle.
Klik på typefiltrene (XHR, JS, CSS, IMG, Font) for at indsnævre visningen. Vis kun API-kald for at debugge datahentning eller kun billeder for at kontrollere aktivindlæsning.
Klik på en anmodningsrække for at udvide dens detaljer: URL, headers, payload, respons-body, statuskode, størrelse og timing.
Røde statuskoder (404, 500) indikerer mislykkede anmodninger. Langsomme varigheder markerer ydeevneflaskehalse. Store størrelser antyder ressourcer, der skal optimeres.
Installer DevSuite Pro gratis og lås opp 64+ utviklerverktøy for nettleseren din.
