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.
Het tabblad Netwerk van Chrome DevTools is krachtig maar zwaar — het neemt veel schermruimte in, reset zodra u navigeert, en vereist dat u wegschakelt van de pagina-inhoud. Network Monitor biedt de essentiële netwerkmonitoringfuncties in een lichtgewicht zwevend paneel dat bovenop de pagina wordt weergegeven.
Het onderschept XHR- en Fetch-verzoeken en monitort het laden van resources via de Performance API, waarbij elk netwerkverzoek in real time wordt getoond. Elk verzoek toont de URL, HTTP-methode (GET, POST, PUT, DELETE), statuscode (kleurgecodeerd: groen voor 2xx, geel voor 3xx, rood voor 4xx/5xx), responsgrootte in bytes en duur in milliseconden. Klik op een verzoek om de details uit te klappen: request headers, response headers, request payload, een voorbeeld van de response body, en een uitsplitsing van de timing.
Verzoeken die via de Beacon API worden verstuurd (vaak gebruikt voor analytics-pings die vlak voordat een pagina wordt verlaten worden verzonden) worden ook vastgelegd, terwijl deze normaal gesproken lastig waar te nemen zijn omdat ze tijdens de navigatie worden geactiveerd. Dit is een aparte tool ten opzichte van WebSocket Inspector — Network Monitor richt zich op HTTP-request/response-verkeer, terwijl WebSocket-verbindingen en hun frames worden behandeld door de speciale WebSocket Inspector-tool, zodat elk paneel overzichtelijk en leesbaar blijft in plaats van twee heel verschillende soorten verkeer in één rommelige feed te combineren.
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.
