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.
Záložka Síť v Chrome DevTools je výkonná, ale těžkopádná — zabírá velké množství místa na obrazovce, resetuje se při navigaci a nutí vás přepínat pryč od obsahu stránky. Síťový monitor poskytuje základní funkce sledování sítě v odlehčeném plovoucím panelu, který sedí nad stránkou. Zachytává XHR a Fetch požadavky a sleduje načítání zdrojů přes Performance API, přičemž zobrazuje každý síťový požadavek, jak nastane. Každý požadavek zobrazuje URL, HTTP metodu (GET, POST, PUT, DELETE), stavový kód (barevně: 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 libovolný požadavek rozbalíte jeho detaily: hlavičky požadavku, hlavičky odpovědi, obsah požadavku (pro POST/PUT), náhled těla odpovědi a rozdělení časování. Filtrujte podle typu (XHR/Fetch, JS, CSS, Obrázky, Fonty) pro zaměření na konkrétní provoz.
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 39+ vývojářských nástrojů pro svůj prohlížeč.
