Network Monitor legt alle netwerkaanvragen van de huidige pagina vast en geeft deze weer — XHR/Fetch API-aanroepen, scriptbelastingen, stylesheetfetches, afbeeldingsdownloads, fontbestanden, en meer. Bekijk URL's, HTTP-methoden, statuscodes, antwoordgroottes, en timing — allemaal in een live-bijwerkt zwevend paneel zonder browserDevTools te openen.
Chrome DevTools' Network-tabblad is krachtig maar zwaar — het neemt veel schermruimte in beslag, wordt opnieuw ingesteld wanneer u navigeert, en vereist dat u weg van de paginainhoud gaat. Network Monitor biedt de essentiële functies voor netwerkbewaking in een licht zwevend paneel dat bovenop de pagina zit. Het onderschept XHR- en Fetch-aanvragen en bewaakt het laden van bronnen via de Performance API, met elke netwerkaanvraag wanneer deze gebeurt. Elke aanvraag toont de URL, HTTP-methode (GET, POST, PUT, DELETE), statuscode (kleurgecodeerd: groen voor 2xx, geel voor 3xx, rood voor 4xx/5xx), antwoordgrootte in bytes, en duur in milliseconden. Klik op een aanvraag om de details uit te vouwen: aanvraagheaders, antwoordheaders, aanvraagpayload (voor POST/PUT), antwoordbody-voorbeeld, en een timing-breakdown. Filter op type (XHR/Fetch, JS, CSS, Images, Fonts) om u op specifiek verkeer te concentreren.
Elke netwerkaanvraag verschijnt in het paneel wanneer deze gebeurt — paginaladen, API-aanroepen, traag geladen bronnen, en achtergrondophaalacties. De feed wordt in real-time bijgewerkt zonder handmatig verversen.
Klik op een aanvraag om volledige details te zien: aanvraag-URL, methode, headers, payload (voor POST/PUT), antwoordheaders, antwoordbody-voorbeeld (JSON auto-opgemaakt), statuscode, grootte, en timing-breakdown.
Filteraanvragen op type: XHR/Fetch (API-aanroepen), JS (scripts), CSS (stylesheets), IMG (afbeeldingen), Font (webfonts), of Alles. Isoleer API-verkeer van het laden van bronnen om u op wat belangrijk is te concentreren.
Statuscodes zijn kleurgecodeerd voor onmiddellijke herkenning: groen voor 2xx (succes), geel voor 3xx (omleidingen), rood voor 4xx (clientfouten) en 5xx (serverfouten). Mislukte aanvragen zijn onmiddellijk zichtbaar.
Elke aanvraag toont de antwoordgrootte (in KB) en totale duur (in milliseconden). Identificeer trage API-aanroepen, oversized bronnen, en onnodige aanvragen die de paginaprestatie beïnvloeden.
Een samenvattingsbalk toont het totale aantal aanvragen en gecombineerde grootte voor alle vastgelegde aanvragen. Filter het overzicht om totalen per type te zien — hoeveel bandbreedte wordt besteed aan scripts versus afbeeldingen versus API-aanroepen.
Bekijk XHR/Fetch-aanvragen om te verifiëren dat uw frontend de juiste API-eindpunten aanroept met de juiste parameters. Klik om aanvraagpayloads en antwoordbody's te inspecteren — vang niet-overeenkomende gegevensindelingen direct.
Rode 404- en 500-items markeren onmiddellijk verbroken bronnen of mislukte API-aanroepen. Zie welke URL's mislukken, wanneer ze mislukken, en welk foutantwoord de server retourneert.
Sorteer op duur om de langzaamste aanvragen te vinden. Sorteer op grootte om de grootste bronnen te vinden. De samenvattingstotalen tonen het volledige bandbreedteplan — maakt de pagina te veel aanvragen of downloadt te veel gegevens?
Zie welke netwerkaanvragen de pagina op de achtergrond maakt — analyticspings, hartslagaanroepen, polingsaanvragen, traag geladen bronnen. Begrijp de volledige netwerkactiviteit buiten wat zichtbaar is voor de gebruiker.
Filteraanvragen en controleer welke domeinen worden benaderd. Identificeer scripts van derden die onverwachte netwerkaanroepen maken — volgpixels, gegevensverzameling, of externe API-aanroepen die u niet kende.
Open het zwevende dock van DevSuite Pro en klik op het pictogram Netwerkmonitor. Een paneel opent en begint onmiddellijk netwerkaanvragen vast te leggen.
Gebruik de pagina normaal. Elke netwerkaanvraag verschijnt in de feed wanneer deze wordt gemaakt — API-aanroepen, middelenbewerkingen, en achtergrondophaalacties worden allemaal vastgelegd.
Klik op de typefilters (XHR, JS, CSS, IMG, Font) om de weergave te beperken. Toon alleen API-aanroepen om dataaophaling op te sporen, of alleen afbeeldingen om het laden van middelen te controleren.
Klik op een aanvraaggrij om de details uit te vouwen: URL, headers, payload, antwoordbody, statuscode, grootte, en timing.
Rode statuscodes (404, 500) duiden op mislukte aanvragen. Trage duren geven prestatieknelpunten aan. Grote groottes suggereren bronnen die optimalisatie nodig hebben.
Installeer DevSuite Pro gratis en ontgrendel 64+ ontwikkelaarstools voor uw browser.
