Der Netzwerk-Monitor erfasst und zeigt jede Netzwerkanfrage der aktuellen Seite — XHR/Fetch-API-Aufrufe, Script-Ladevorgänge, Stylesheet-Abrufe, Bild-Downloads, Schriftdateien und mehr. Sehen Sie URLs, HTTP-Methoden, Statuscodes, Antwortgrößen und Timing — alles in einem live-aktualisierenden Floating-Panel ohne Browser-DevTools zu öffnen.
Der Network-Tab der Chrome DevTools ist leistungsstark, aber schwergewichtig – er nimmt erheblichen Bildschirmplatz ein, setzt sich bei jeder Navigation zurück und zwingt Sie, vom Seiteninhalt wegzuwechseln. Network Monitor bietet die wesentlichen Netzwerk-Überwachungsfunktionen in einem leichtgewichtigen, frei schwebenden Panel, das über der Seite liegt.
Es fängt XHR- und Fetch-Requests ab und überwacht das Laden von Ressourcen über die Performance-API, wobei jeder Netzwerk-Request angezeigt wird, sobald er stattfindet. Jeder Request zeigt die URL, die HTTP-Methode (GET, POST, PUT, DELETE), den Statuscode (farblich codiert: grün für 2xx, gelb für 3xx, rot für 4xx/5xx), die Antwortgröße in Bytes und die Dauer in Millisekunden. Klicken Sie auf einen Request, um die Details aufzuklappen: Request-Header, Response-Header, Request-Payload, eine Vorschau des Response-Bodys und eine Timing-Aufschlüsselung.
Auch Requests über die Beacon-API (üblicherweise für Analytics-Pings genutzt, die kurz vor dem Entladen einer Seite gesendet werden) werden erfasst, was normalerweise schwer zu beobachten ist, da sie während der Navigation feuern. Dies ist ein eigenständiges Tool, getrennt vom WebSocket Inspector – Network Monitor konzentriert sich auf HTTP-Request/Response-Verkehr, während WebSocket-Verbindungen und deren Frames vom dedizierten WebSocket-Inspector-Tool abgedeckt werden, sodass jedes Panel fokussiert und übersichtlich bleibt, statt zwei sehr unterschiedliche Verkehrsarten in einem einzigen, unübersichtlichen Feed zu vermischen.
Jede Netzwerkanfrage erscheint im Panel, wenn sie stattfindet — Seitenladevorgänge, API-Aufrufe, lazy-geladene Ressourcen und Hintergrund-Fetches. Der Feed aktualisiert sich in Echtzeit ohne manuelles Aktualisieren.
Klicken Sie auf eine Anfrage, um vollständige Details zu sehen: Anfrage-URL, Methode, Header, Payload (für POST/PUT), Antwort-Header, Antwortvorschau (JSON automatisch formatiert), Statuscode, Größe und Timing-Aufschlüsselung.
Filtern Sie Anfragen nach Typ: XHR/Fetch (API-Aufrufe), JS (Scripts), CSS (Stylesheets), IMG (Bilder), Font (Web-Schriften) oder Alle. Isolieren Sie API-Traffic von Ressourcenloading, um sich auf das Wesentliche zu konzentrieren.
Statuscodes sind für sofortige Erkennung farbkodiert: Grün für 2xx (Erfolg), Gelb für 3xx (Weiterleitungen), Rot für 4xx (Client-Fehler) und 5xx (Server-Fehler). Fehlgeschlagene Anfragen sind sofort sichtbar.
Jede Anfrage zeigt die Antwortgröße (in KB) und die Gesamtdauer (in Millisekunden). Identifizieren Sie langsame API-Aufrufe, zu große Ressourcen und unnötige Anfragen, die die Seiten-Performance beeinflussen.
Eine Zusammenfassungsleiste zeigt die Gesamtanzahl der Anfragen und die kombinierte Größe aller erfassten Anfragen. Filtern Sie die Zusammenfassung, um Gesamtwerte pro Typ zu sehen — wie viel Bandbreite wird für Scripts vs. Bilder vs. API-Aufrufe genutzt.
Beobachten Sie XHR/Fetch-Anfragen, um zu überprüfen, ob Ihr Frontend die richtigen API-Endpunkte mit den richtigen Parametern aufruft. Klicken Sie, um Anfrage-Payloads und Antwort-Texte zu inspizieren — erkennen Sie nicht übereinstimmende Datenformate sofort.
Rote 404- und 500-Einträge heben sofort defekte Ressourcen oder fehlschlagende API-Aufrufe hervor. Sehen Sie, welche URLs fehlschlagen, wann sie fehlschlagen und welche Fehlerantwort der Server zurückgibt.
Sortieren Sie nach Dauer, um die langsamsten Anfragen zu finden. Sortieren Sie nach Größe, um die größten Ressourcen zu finden. Die Zusammenfassungswerte zeigen das vollständige Bandbreitenbild — stellt die Seite zu viele Anfragen oder lädt sie zu viele Daten herunter?
Sehen Sie, welche Netzwerkanfragen die Seite im Hintergrund stellt — Analytics-Pings, Heartbeat-Aufrufe, Polling-Anfragen, lazy-geladene Ressourcen. Verstehen Sie die vollständige Netzwerkaktivität über das hinaus, was dem Nutzer sichtbar ist.
Filtern Sie Anfragen und prüfen Sie, welche Domains kontaktiert werden. Identifizieren Sie Drittanbieter-Scripts, die unerwartete Netzwerkaufrufe machen — Tracking-Pixel, Datenerfassung oder externe API-Aufrufe, von denen Sie nichts wussten.
Öffnen Sie das DevSuite Pro Floating Dock und klicken Sie auf das Symbol des Netzwerk-Monitors. Ein Panel öffnet sich und beginnt sofort, Netzwerkanfragen zu erfassen.
Verwenden Sie die Seite normal. Jede Netzwerkanfrage erscheint im Feed, wenn sie gestellt wird — API-Aufrufe, Ressourcenladevorgänge und Hintergrund-Fetches werden alle erfasst.
Klicken Sie auf die Typ-Filter (XHR, JS, CSS, IMG, Font), um die Ansicht einzugrenzen. Zeigen Sie nur API-Aufrufe zum Debuggen des Datenabrufs, oder nur Bilder, um das Asset-Loading zu prüfen.
Klicken Sie auf eine beliebige Anfragezeile, um Details zu erweitern: URL, Header, Payload, Antworttext, Statuscode, Größe und Timing.
Rote Statuscodes (404, 500) zeigen fehlgeschlagene Anfragen an. Langsame Dauern markieren Performance-Engpässe. Große Größen weisen auf Ressourcen hin, die optimiert werden müssen.
Installieren Sie DevSuite Pro kostenlos und schalten Sie 64+ Entwickler-Tools für Ihren Browser frei.
