Síťový monitor zachytává a zobrazuje každý síťový požadavek aktuální stránky — volání XHR/Fetch API, načítání skriptů, stylů, obrázků, fontů a dalšího. Sledujte URL adresy, HTTP metody, stavové kódy, velikosti odpovědí a časování — vše v živě aktualizovaném plovoucím panelu bez otevírání DevTools prohlížeče.
Panel Network v Chrome DevTools je mocný, ale těžkopádný – zabírá značnou část obrazovky, resetuje se při přechodu na jinou stránku a nutí vás odklonit se od obsahu stránky. Network Monitor nabízí ty nejdůležitější funkce pro sledování síťového provozu v odlehčeném plovoucím panelu umístěném přímo nad stránkou.
Zachytává požadavky XHR a Fetch a sleduje načítání zdrojů přes Performance API, takže zobrazuje každý síťový požadavek v reálném čase. U každého požadavku vidíte URL, HTTP metodu (GET, POST, PUT, DELETE), stavový kód (barevně odlišený: zelená pro 2xx, žlutá pro 3xx, červená pro 4xx/5xx), velikost odpovědi v bajtech a dobu trvání v milisekundách. Kliknutím na kterýkoli požadavek rozbalíte jeho detail: hlavičky požadavku, hlavičky odpovědi, tělo požadavku, náhled těla odpovědi a rozpad časování.
Zachyceny jsou i požadavky odeslané přes Beacon API (běžně používané pro analytické pingy odesílané těsně před opuštěním stránky), což je normálně obtížné pozorovat, protože se spouští právě během navigace. Jde o samostatný nástroj oproti WebSocket Inspectoru – Network Monitor se zaměřuje na HTTP provoz typu požadavek/odpověď, zatímco WebSocket spojení a jejich rámce pokrývá vyhrazený nástroj WebSocket Inspector, takže každý panel zůstává přehledný a soustředěný místo aby míchal dva velmi odlišné typy provozu do jednoho zahlceného feedu.
Každý síťový požadavek se zobrazuje v panelu, jak nastane — načítání stránek, volání API, líně načítané zdroje a pozadí načítání. Přenos se aktualizuje v reálném čase bez potřeby ručního obnovení.
Kliknutím na libovolný požadavek zobrazíte plné detaily: URL požadavku, metodu, hlavičky, obsah (pro POST/PUT), hlavičky odpovědi, náhled těla odpovědi (JSON automaticky formátován), stavový kód, velikost a rozdělení časování.
Filtrujte požadavky podle typu: XHR/Fetch (volání API), JS (skripty), CSS (styly), IMG (obrázky), Font (webové fonty) nebo Vše. Izolujte provoz API od načítání zdrojů pro zaměření na to, co je důležité.
Stavové kódy jsou barevně kódovány pro okamžité rozpoznání: zelená pro 2xx (úspěch), žlutá pro 3xx (přesměrování), červená pro 4xx (chyby klienta) a 5xx (chyby serveru). Neúspěšné požadavky jsou okamžitě viditelné.
Každý požadavek zobrazuje velikost odpovědi (v KB) a celkovou dobu trvání (v milisekundách). Identifikujte pomalá volání API, příliš velké zdroje a zbytečné požadavky, které ovlivňují výkon stránky.
Souhrnná lišta zobrazuje celkový počet požadavků a kombinovanou velikost všech zachycených požadavků. Filtrujte přehled pro zobrazení celkových hodnot podle typu — kolik šířky pásma je spotřebováno skripty, obrázky nebo voláními API.
Sledujte požadavky XHR/Fetch a ověřte, že váš frontend volá správné API endpointy se správnými parametry. Kliknutím zkontrolujte obsahy požadavků a těla odpovědí — okamžitě odhalte neshodné datové formáty.
Červené záznamy 404 a 500 okamžitě zvýrazní rozbité zdroje nebo selhávající volání API. Zjistěte, která URL selhávají, kdy selhávají a jakou chybovou odpověď server vrací.
Seřaďte podle trvání a najděte nejpomalejší požadavky. Seřaďte podle velikosti a najděte největší zdroje. Souhrnné celkové hodnoty zobrazují plný obraz šířky pásma — provádí stránka příliš mnoho požadavků nebo stahuje příliš mnoho dat?
Zjistěte, jaké síťové požadavky stránka provádí na pozadí — analytické pingy, heartbeat volání, polling požadavky, líně načítané zdroje. Pochopte plnou síťovou aktivitu nad rámec toho, co je viditelné uživateli.
Filtrujte požadavky a zkontrolujte, které domény jsou kontaktovány. Identifikujte skripty třetích stran provádějící neočekávaná síťová volání — sledovací pixely, sběr dat nebo externí volání API, o kterých jste nevěděli.
Otevřete plovoucí dok DevSuite Pro a klikněte na ikonu Síťového monitoru. Panel se otevře a okamžitě začne zachytávat síťové požadavky.
Používejte stránku normálně. Každý síťový požadavek se zobrazuje v přenosu, jak je odeslán — volání API, načítání zdrojů a načítání na pozadí jsou všechna zachycena.
Klikněte na filtry typů (XHR, JS, CSS, IMG, Font) pro zúžení zobrazení. Zobrazte pouze volání API pro ladění načítání dat nebo pouze obrázky pro kontrolu načítání assetů.
Kliknutím na libovolný řádek požadavku rozbalte jeho detaily: URL, hlavičky, obsah, tělo odpovědi, stavový kód, velikost a časování.
Červené stavové kódy (404, 500) označují neúspěšné požadavky. Pomalá trvání signalizují výkonnostní úzká místa. Velké velikosti naznačují zdroje, které potřebují optimalizaci.
Nainstalujte si DevSuite Pro zdarma a odemkněte 64+ vývojářských nástrojů pro svůj prohlížeč.
