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' Netværk-fane er kraftfuld, men tung — den tager betydelig skærmplads, nulstilles, når du navigerer, og kræver, at du skifter væk fra sideindholdet. Netværksmonitor giver de væsentlige netværksovervågningsfunktioner i et letvægtigt flydende panel, der sidder oven på siden. Det opfanger XHR og Fetch-anmodninger og overvåger ressourceindlæsning via Performance API og viser alle netværksanmodninger, efterhånden som de sker. Hver anmodning viser URL'en, HTTP-metode (GET, POST, PUT, DELETE), statuskode (farvekoderet: grøn for 2xx, gul for 3xx, rød for 4xx/5xx), responsestørrelse i bytes og varighed i millisekunder. Klik på en anmodning for at udvide dens detaljer: anmodnings-headers, respons-headers, anmodnings-payload (for POST/PUT), respons-body-forhåndsvisning og en timing-opdeling. Filtrer efter type (XHR/Fetch, JS, CSS, Billeder, Fonts) for at fokusere på specifik trafik.
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 op for 39+ udviklerværktøjer til din browser.
