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 Netzwerk-Tab von Chrome DevTools ist leistungsstark, aber schwergewichtig — er nimmt erheblichen Bildschirmplatz ein, wird beim Navigieren zurückgesetzt und erfordert, dass Sie sich vom Seiteninhalt wegbewegen. Der Netzwerk-Monitor bietet die wesentlichen Netzwerküberwachungsfunktionen in einem leichtgewichtigen Floating-Panel, das auf der Seite liegt. Er fängt XHR- und Fetch-Anfragen ab und überwacht das Ressourcenladen über die Performance-API, und zeigt jede Netzwerkanfrage beim Auftreten. Jede Anfrage zeigt URL, HTTP-Methode (GET, POST, PUT, DELETE), Statuscode (farbkodiert: grün für 2xx, gelb für 3xx, rot für 4xx/5xx), Antwortgröße in Bytes und Dauer in Millisekunden. Klicken Sie auf eine Anfrage, um Details zu erweitern.
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 39+ Entwickler-Tools für Ihren Browser frei.
