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 flik Network är kraftfull men tung — den tar upp mycket skärmutrymme, återställs när du navigerar och kräver att du växlar bort från sidans innehåll. Network Monitor ger dig de viktigaste nätverksövervakningsfunktionerna i en lättviktig flytande panel som ligger ovanpå sidan.
Verktyget fångar upp XHR- och Fetch-anrop och övervakar resursladdning via Performance API, och visar varje nätverksanrop i realtid. Varje anrop visar URL, HTTP-metod (GET, POST, PUT, DELETE), statuskod (färgkodad: grön för 2xx, gul för 3xx, röd för 4xx/5xx), svarsstorlek i bytes och varaktighet i millisekunder. Klicka på ett anrop för att expandera detaljerna: request headers, response headers, request payload, en förhandsvisning av response body samt en tidsuppdelning.
Anrop som görs via Beacon API (vanligtvis använt för analytics-pingar som skickas precis innan en sida laddas ur) fångas också upp, vilket normalt är svårt att observera eftersom de utlöses under navigering. Detta är ett separat verktyg från WebSocket Inspector — Network Monitor fokuserar på HTTP-request/response-trafik, medan WebSocket-anslutningar och deras frames täcks av det dedikerade verktyget WebSocket Inspector, så att varje panel förblir fokuserad och lättläst istället för att blanda två väldigt olika trafiktyper i ett enda rörigt flöde.
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.
Installera DevSuite Pro gratis och lås upp 64+ utvecklarverktyg för din webbläsare.
