Ebben a útmutatóban elmagyarázom neked, hogyan használhatod a Alkalmazás fület a Chrome Fejlesztői Eszközökben, hogy megvizsgáld egy webes alkalmazás erőforrásait. Különösen az offline tárolás, Session Storage és IndexedDB különböző tárolási lehetőségei állnak a középpontban. Emellett a Service Worker segítségével történő adatkezelés, a sütik kezelése is szerepel. A tárolókezelés optimalizálásával biztosíthatod, hogy a webes alkalmazásod hatékonyabban működjön.
Legfontosabb megállapítások
- Az Alkalmazás fül egy központi eszköz a webes alkalmazás elemzéséhez és optimalizálásához.
- Ellenőrizheted a Manifeszt fájlt, a Service Workert, a tárolási lehetőségeket és a sütiket közvetlenül a böngészőben.
- A tárolási lehetőségek törlése és visszaállítása segíthet a hibák keresésében és a teljesítmény optimalizálásában.
Lépésről lépésre útmutató
Hozzáférés az Alkalmazás fülhöz
Az Alkalmazás fül megnyitásához látogass el az oldaladra, és nyomd meg az F12 billentyűt, vagy kattints jobb klikkelve és válaszd az „Elemzés” lehetőséget. A Fejlesztői Eszközökben megtalálható az „Alkalmazás” fül, ahol áttekintést kaphatsz a webes alkalmazás használt különböző erőforrásairól.
A Manifeszt megvizsgálása
Az Alkalmazás fülön győződj meg arról, hogy a „Manifeszt” szekciót nézed. Itt láthatod az alkalmazás Manifeszt fájlját, és ellenőrizheted az ikonokat, neveket, és leírásokat. Ez különösen fontos, ha progresszív webes alkalmazásokat (PWA-kat) fejlesztesz.
A Service Worker használata
A következő lépés a Service Worker vizsgálata. Ezek elengedhetetlenek a webes alkalmazásod offline működéséhez. Kattints a „Service Workerek” szekcióra, hogy megtekinthesd a regisztrált Service Workereket és tesztelhesd funkcióikat, mint például a közvetített üzenetek vagy a szinkronizáció.
Offline funkcionalitás tesztelése
Fontos lépés az offline funkcionalitás tesztelése. Engedélyezheted az offline módot, és újratöltheted az oldalt annak érdekében, hogy láthasd a viselkedését. Egy jól megtervezett webes alkalmazásnak ebben az állapotban is működnie kell, és megfelelő tájékoztatást kell nyújtania a kapcsolat nélküli állapotban.
Tárolók elemzése
Válts a „Tárolás” részre. Itt áttekintést kaphatsz a Gyorsítótárról, Local Storage-ról, Session Storage-ról és IndexedDB-ről. Ezek a tárolási lehetőségek kulcsfontosságúak az adatok tárolásánál különböző látogatások vagy munkamenetek között.
Tárolt adatok törlése
Az összes tárolt adatot törölheted a megfelelő jelölőnégyzetek bejelölésével, majd a „Webhelyadatok törlése” opció kiválasztásával. Ez lehet hasznos problémák megoldására, amelyeket elavult vagy hibás adatok okozhatnak.
Lokális tárolás használata
Lépj most a Lokális tárolás részhez, és állíts be néhány értéket. A console-ban használhatod a localStorage.setItem('kulcs', 'érték'); parancsot egy új elem létrehozásához, majd frissítheted a Lokális tárolás területet a változások megtekintéséhez.
Értékek módosítása a Lokális tárolásban
Ebben a részben közvetlenül módosíthatod az értékeket is. Kattints duplán az egyik értékre a szerkesztéshez. Figyelem, hogy a szöveg JSON formátumban is bevihető, ami lehetővé teszi neked, hogy összetettebb adatokat tárolj.
Session Storage használata
A Session Storage hasonló a Lokális tároláshoz, azonban az aktuális felhasználóhoz kapcsolódik, és törlődik, amikor az ablak vagy a böngésző bezáródik. Ez kipróbálható azzal, hogy hozzáadsz néhány értéket, majd ellenőrzöd azokat az üléted során.
Sütik ellenőrzése
Kattints a „Sütik“ részen a webes alkalmazásod domainjára, hogy megtekinthesd a beállított sütiket. Ellenőrizheted ezeknek a sütiknek az értékét, megváltoztathatod vagy akár törölheted is azokat. Ez különösen fontos, ha problémáid vannak a felhasználói munkamenetekkel vagy az azonosítással.
Gyorsítótár tárolónak áttekintése
A gyorsítótár tároló betekintést nyújt az összes helyileg tárolt fájlra, amelyeket az alkalmazásod használ. Ez segít megérteni, mely fájlok érhetők el offline, vagy melyeket lehet frissíteni szükséges.
Háttérszolgáltatások használata
Ha a webes alkalmazásod értesítéseket vagy háttér-szinkronizációt használ, ezeket a „Háttérszolgáltatások” alatt találod. Ez különösen fontos a PWA-k fejlesztése során, mivel ezek a funkciók hozzájárulnak a felhasználói élmény javításához.
Keretek és iFrame-ek elemzése
Ha iFrame-eket vagy kereteket használsz a webes alkalmazásodban, az „iFrame-ek” szakaszon belül ellenőrizheted a betöltött erőforrásokat. Itt láthatod, hogy mely fájlok vannak betöltve az iFrame-ekből, és vannak-e problémák.
Összefoglalás
Ebben a útmutatóban megtanultad, hogyan használhatod a Chrome Developer Tools alkalmazás fülek különböző funkcióit. Áttekintést kaptál a manifesztról, a service workerek használatáról, különböző tárolási lehetőségekről, valamint a sütik kezeléséről. A rendszeres elemzéssel és optimalizálással jelentősen javíthatod webes alkalmazásod teljesítményét.
Gyakran ismételt kérdések
Hogyan férhetek hozzá az alkalmazás fülhöz?Nyomd meg az F12-t, vagy kattints jobb gombbal egy oldalon, majd válaszd a „Vizsgálat” opciót.
Mi a különbség a helyi tároló és a munkamenet-tároló között?A helyi tárolás állandóan tárol adatokat, míg a munkamenet-tároló csak a böngésző-munkamenet idejére érvényes.
Hogyan törölhetem a sütiket az alkalmazás fülön keresztül?Menj a „Sütik” részhez, válaszd ki a domain-t, majd megtekintheted és törölheted a sütiket.
Hogyan tesztelhetem webes alkalmazásom offline funkcionalitását?Aktiváld az Offline módot a Hálózat részben, majd frissítsd az oldalt, hogy ellenőrizd az offline funkcionalitást.
Mi az a szolgáltató munkamenet?A szolgáltató munkamenet egy olyan script, amelyet a böngésző a háttérben telepít, és amely irányítja a hálózati kéréseket az offline funkcionalitás és a gyorsítótár lehetővé tétele érdekében.
