V tejto príručke sa dozvieš, ako pomocou nástrojov Chrome Developer Tools obmedziť sieťové pripojenia, analyzovať HTTP hlavičky a zobraziť náhľady odpovedí. Tieto funkcie sú veľmi užitočné na testovanie výkonu tvojej webovej stránky pri rôznych sieťových podmienkach a na porozumenie štruktúry vrátených dát. Obmedzenie sieťových pripojení ti umožňuje simulovať používateľskú skúsenosť na mobilných zariadeniach, zatiaľ čo analýza hlavičiek ti poskytne nápady na možné problémy.
Najdôležitejšie zistenia
- Pomocou obmedzenia rýchlosti môžeš simulovať pomalé sieťové šírky a skontrolovať používateľské správanie za týchto podmienok.
- HTTP hlavičky poskytujú informácie o spôsobe, akým sú dáta vrátené klientovi.
- Funkcia Náhľad v nástrojoch vývojára ti umožňuje jednoducho preskúmať štruktúru JSON dát a iných formátov.
Krok za krokom sprievodca
Obmedzenie rýchlosti siete
Na simulovanie pomalých sieťových pripojení otvorte Chrome Developer Tools a prejdite na kartu Sieť. Tu môžete vybrať rôzne rýchlosti, ako napríklad "rýchle 3G". To vám umožní testovať doby načítania vašej webovej stránky v realistických podmienkach.
Ak znovu načítate stránku, môžete okamžite vidieť, aká je výkonnosť pri tejto nastavení. Dôrazne odporúčame si všimnúť, že doby načítania sú výrazne pomalšie než za bežných okolností.
Ak chcete ešte pomalšie, môžete si vybrať možnosť "pomalé 3G". Pri tejto voľbe si všimnete, že trvá podstatne dlhšie, kým sa obsahy načítajú.
Okrem toho môžete aktivovať funkciu "offline". Táto možnosť je špeciálne zaujímavá pre testovanie toho, ako funguje váš webová aplikácia, keď nie je k dispozícii internetové pripojenie.
Offline test s pracovníkmi služby
Pracovníci služby umožňujú webové stránky sprístupniť offline. Ak máte stránku, ktorá má fungovať offline, môžete pomocou aktivácie funkcie Offline v nástrojoch vývojára skontrolovať, či sú príslušné obsahy dostupné aj offline.
Môžete tiež skontrolovať, či je navigácia offline alebo online, skontrolovaním okna „Navigátor“. Je to dôležité pre overenie, či vaša aplikácia je použiteľná aj bez pripojenia na internet.
Správa s hlavičkami
Na preskúmanie HTTP hlavičiek načítajte svoju webovú stránku znovu a pozrite si vrátené dáta. Na karte Sieť môžete vidieť podrobnosti o odpovedajúcich hlavičkách, ako napríklad Content-Type a Content-Length.
Nájdete tu aj informácie o tom, či je aktivované ukladanie do medzipamäte pre daný súbor alebo nie. Je to dôležité pre optimalizáciu výkonu vašej stránky.
Preskúmanie štruktúry JSON dát
Ak dostanete JSON dáta, ich náhľad môžete veľmi jednoducho skontrolovať. V menu pre vývojárov môžete rozkliknúť štruktúru údajov a skontrolovať ich. Tým uvidíte dáta nielen v surovej podobe textu, ale aj farebne zvýraznené, čo zlepšuje čitateľnosť.
Veľkou výhodou náhľadu je, že si môžete ľahko skopírovať údaje, aby ste ich napríklad mohli ďalej použiť vo svojom kódovom editore.
Správa s obrázkami
Pristupovať k obrazovým dátam je možné aj cez nástroje pre vývojárov. Ak napríklad prezeráte súbory SVG, môžete ich vidieť pod kartou „Náhľad“.
Pre iné formáty ako PNG alebo JPEG môžete použiť možnosti „Kopírovať URL obrázka“ alebo „Uložiť obrázok ako“, aby ste si uložili obrázky lokálne alebo len skopírovali URL adresy.
Identifikácia problémov
Špeciálnou užitočnou funkciou vývojárskych nástrojov je schopnosť analyzovať kódové stavy. Ak je vrátený stav vyšší ako 400, naznačuje to problém, ktorý by ste mali bližšie preskúmať.
Prehliadajte Request Header, aby ste identifikovali možné zdroje chýb, či už ide o chybu pri overovaní identity alebo iné problémy, ktoré sa vyskytli pri načítavaní stránky.
Zhrnutie
V tejto príručke ste sa naučili, ako obmedziť rýchlosť siete, analyzovať HTTP hlavičky a efektívne využívať náhľady informácií. S týmito nástrojmi môžete ďalej optimalizovať používateľský zážitok na svojom webe a odhaliť možné zdroje chýb.
