Praktické použitie aplikácie na záložkách v Chrome Developer Tools

V tomto návode vám vysvetlím, ako môžete využiť kartu Application v nástrojoch pre vývojárov Chrome, aby ste mohli preskúmať zdroje webovej aplikácie. Špeciálny dôraz bude klásť na rôzne možnosti ukladania ako Lokálny úložný priestor, Úložný priestor relácie a IndexedDB. Budú sa tiež riešiť správa údajov, ukladanie pomocou služobného pracovníka a manipulácia s Cookies. Optimalizáciou riadenia uloženia môžete zabezpečiť efektívnejšie fungovanie vašej webovej aplikácie.

Najdôležitejšie zistenia

• Karta Application je centrálne nástroj na analýzu a optimalizáciu vašej webovej aplikácie.
• Môžete priamo v prehliadači preskúmať manifestový súbor, služobného pracovníka, možnosti ukladania a Cookies.
• Odstránenie a obnovenie týchto možností ukladania môže pomôcť pri identifikácii chýb a optimalizácii výkonu.

Krok za krokom sprievodca

Prístup k záložke Application

Ak chcete otvoriť kartu Application, prejdite na svoju stránku a stlačte kláves F12 alebo kliknite pravým tlačidlom myši a vyberte možnosť „Skontrolovať“. V nástrojoch pre vývojárov nájdete kartu „Application“, ktorá vám poskytuje prehľad o rôznych zdrojoch, ktoré vaša webová aplikácia využíva.

Prieskum manifestu

V karte Application sa presvedčte, že ste otvorili sekciu „Manifest“. Tu môžete vidieť manifestový súbor vašej webovej aplikácie a overiť uvedené správne informácie ako ikony, názov a popis. Toto je obzvlášť dôležité pri vývoji progresívnych webových aplikácií (PWAs).

Využívanie služobného pracovníka

Ďalším krokom je preskúmanie služobných pracovníkov. Títo sú kľúčoví pre offline prevádzku vašej webovej aplikácie. Kliknite na sekciu „Service Workers“, aby ste videli registrovaných služobných pracovníkov a otestovali ich funkčnosti, ako sú push notifikácie alebo synchronizácia.

Testovanie offline funkcionality

Dôležité je otestovať offline funkcionalitu. Môžete povoliť režim offline a znovu načítať stránku, aby ste videli, ako sa správa. Dobrá webová aplikácia by mala fungovať aj v tomto stave a poskytovať príslušné informácie v prípade, že je offline.

Analýza úložiska

Teraz prejdite do sekcie „Storage“. Tu získate prehľad o vyrovnávacej pamäti, Lokálnom úložisku, Úložisku relácie a IndexedDB. Tieto možnosti ukladania zohrávajú kľúčovú úlohu pri uchovávaní údajov medzi rôznymi návštevami alebo reláciami.

Odstránenie uložených údajov

Môžete vymazať všetky uložené údaje označením príslušných políčok a následne vybraním možnosti „Clear Site Data“. Toto môže pomôcť pri riešení problémov spôsobených zastaranými alebo chybnými údajmi.

Práca s Lokálnym úložiskom

Prejdite teraz do Lokálneho úložiska a nastavte niektoré hodnoty. Môžete použiť localStorage.setItem('kľúč', 'hodnota'); v konzole na vytvorenie nového záznamu a potom obnoviť oblasť Lokálneho úložiska, aby ste videli zmeny.

Zmena hodnôt v Lokálnom úložisku

V tomto kroku môžete tiež priamo meniť hodnoty. Dvojkliknite na hodnotu, ktorú chcete upraviť. Upozorňujeme, že text môže byť zadaný vo formáte JSON, čo vám umožňuje ukladať komplexnejšie údaje.

Využívanie Úložiska relácie

Úložisko relácie je podobné Lokálnemu úložisku, ale je osobné a vymaže sa, keď sa zavrie karta alebo prehliadač. Môžete to otestovať pridaním niektorých hodnôt a kontrolou počas vašej relácie.

Skúmanie súborov cookies

Kliknite na doménu svojej webovej aplikácie v sekcii „Cookies“, aby ste videli nastavené cookies. Môžete skontrolovať hodnoty týchto cookies, zmeniť ich alebo ich dokonca vymazať. To je obzvlášť dôležité, ak máte problémy s používateľskými reláciami alebo autentifikáciou.

Prehľad o ukladaní do medzipamäte (Cache Storage)

Cache Storage vám poskytne prehľad o všetkých súboroch uložených v medzipamäti, ktoré vaša aplikácia používa. To vám pomôže pochopiť, ktoré súbory sú k dispozícii offline alebo ktoré by mali byť aktualizované.

Využívanie služieb na pozadí (Background Services)

Ak vaša webová aplikácia používa funkcie ako oznámenia alebo synchronizáciu na pozadí, nájdete ich pod „Background Services“. Toto je obzvlášť dôležité pri vývoji PWAs, pretože tieto funkcie využívajú na zlepšenie používateľského zážitku.

Analýza rámceov a iFrames

Ak používate iFrames alebo rámce (framesets) vo svojej webovej aplikácii, môžete v sekcii „Frames“ skontrolovať načítané zdroje. Tu môžete vidieť, ktoré súbory sú načítané cez iFrames a či s tým sú spojené nejaké problémy.

Zhrnutie

V tejto príručke ste sa naučili, ako môžete využívať rôzne funkcie Application Tabs v nástrojoch Chrome Developer Tools. Získali ste prehľad o manifeste, používaní služobníkov (Service Workernov), rôznych možnostiach ukladania a správe cookies. Pravidelnou analýzou a optimalizáciou týchto zdrojov môžete výrazne zlepšiť výkon svojej webovej aplikácie.