V tem vodniku ti bom pojasnil, kako lahko uporabiš zavihek Aplikacija v orodjih za razvijalce Chromium, da preučiš vire spletne aplikacije. Poseben poudarek bo namenjen različnim možnostim shranjevanja, kot so Lokalno shranjevanje, Sejno shranjevanje in IndexedDB. Prav tako se bomo osredotočili na upravljanje podatkov, shranjevanje prek delavca za storitev ter upravljanje s piškotki. Z optimizacijo upravljanja s pomnilnikom lahko zagotoviš, da bo tvoja spletna aplikacija delovala bolj učinkovito.
Najpomembnejše ugotovitve
- Zavihek Aplikacija je ključno orodje za analizo in optimizacijo tvoje spletne aplikacije.
- Lahko neposredno preučiš manifestno datoteko, delavca za storitev, možnosti shranjevanja in piškotke v brskalniku.
- Brisanje in ponastavljanje teh možnosti shranjevanja ti lahko pomagata pri odpravljanju težav ter optimizaciji uspešnosti.
Korak za korakom
Dostop do zavihka Aplikacija
Za odpiranje zavihka Aplikacija pojdi na svojo stran in pritisni tipko F12 ali klikni z desno miškino tipko ter izberi "Preišči". V orodjih za razvijalce boš našel zavihek "Aplikacija", ki ti bo ponudil pregled različnih virov, ki jih tvoja spletna aplikacija uporablja.
Preučevanje manifesta
V zavihku Aplikacija se prepričaj, da si v razdelku "Manifest". Tu lahko vidiš manifestno datoteko svoje spletne aplikacije ter preveriš navedene brezhibne informacije, kot so ikone, imena in opis. To je še posebej pomembno pri razvoju progresivnih spletnih aplikacij (PWAs).
Uporaba delavca za storitev
Naslednji korak je preučiti delavce za storitev. Ti so ključni za brezpravno delovanje tvoje spletne aplikacije. Klikni na razdelek "Delavci za storitev", da vidiš registrirane delavce za storitev ter preizkusi njihove funkcionalnosti, kot so opozorila Push ali sinhronizacija.
Preizkus brezpravnosti
Pomemben vidik je preizkus brezpravnosti. Lahko aktiviraš način brez povezave ter ponovno naložiš stran, da vidiš njeno delovanje. Dobra zasnovana spletna aplikacija bi morala prav tako delovati v tem stanju in ponuditi ustrezna navodila, ko je brez povezave.
Analiza pomnilnika
Zdaj preklopi na razdelek "Shramba". Tukaj dobiš pregled nad predpomnilnikom, lokalnim shranjevanjem, sejnim shranjevanjem in IndexedDB. Te možnosti shranjevanja igrajo ključno vlogo pri shranjevanju podatkov med različnimi obiski ali sejami.
Brisanje shranjenih podatkov
Vse shranjene podatke lahko zbrišeš tako, da označiš ustrezne polja in izbereš "Izbriši podatke spletnega mesta". To ti lahko pomaga pri reševanju težav, ki jih povzročajo zastareli ali napakolni podatki.
Dela z lokalnim shranjevanjem
Sedaj preidimo na lokalno shranjevanje in nastavi nekaj vrednosti. Lahko uporabiš localStorage.setItem('ključ', 'vrednost'); v konzoli, da ustvariš nov zapis, in nato osveži območje lokalnega shranjevanja, da vidiš spremembe.
Spreminjanje vrednosti v lokalnem shranjevanju
V tem razdelku lahko tudi neposredno spreminjaš vrednosti. Dvakrat klikni na vrednost, da jo urediš. Upoštevaj, da lahko vnesete besedilo v JSON formatu, kar vam omogoča shranjevanje kompleksnejših podatkov.
Uporaba sejnega shranjevanja
Sejno shranjevanje je podobno kot lokalno shranjevanje, vendar je osebno in se izbriše, ko se karta ali brskalnik zapre. To lahko preizkusiš z dodajanjem nekaj vrednosti in jih preveriš med svojo sejo.
Pregled piškotkov
Kliknite na domeno vaše spletne aplikacije v razdelku "Piškotki", da vidite, katere piškotke ste nastavili. Lahko preverite vrednosti teh piškotkov, jih spremenite ali celo izbrišete. To je še posebej pomembno, če imate težave z uporabniškimi sejami ali avtentikacijo.
Pregled pomnilnika predpomnilnika
Pomnilnik predpomnilnika vam omogoča vpogled v vse predpomnjene datoteke, ki jih vaša aplikacija uporablja. To vam pomaga razumeti, katere datoteke so na voljo brez povezave ali katere morda potrebujejo posodobitev.
Uporaba ozadnjih storitev
Če vaša spletna aplikacija uporablja funkcije, kot so obvestila ali sinhronizacija v ozadju, jih boste našli v razdelku "Ozadnje storitve". To je zlasti pomembno za razvoj PWA, saj te funkcije uporabljajo za izboljšanje uporabniške izkušnje.
Analiza okvirjev in iOkvirjev
Če uporabljate iOkvirje ali okvirje v svoji spletni aplikaciji, lahko pod razdelkom "Okvirji" preverite naložene vire. Tu lahko vidite, katere datoteke se nalagajo iz iOkvirjev in ali prihaja do težav.
Povzetek
V tej vadnici ste se naučili, kako lahko uporabite različne funkcije zavihka aplikacije v orodjih za razvijalce Chrome. Dobili ste pregled manifesta, uporabe delavcev storitev, različnih možnosti shranjevanja in upravljanja piškotkov. Z rednim analiziranjem in optimiziranjem teh virov lahko bistveno izboljšate učinkovitost svoje spletne aplikacije.
Pogosto zastavljena vprašanja
Kako lahko dostopam do zavihka aplikacije?Pritisnite F12 ali desno kliknite na stran in izberite "Razišči".
Kakšna je razlika med lokalnim shranjevanjem in sejnim shranjevanjem?Lokalno shranjevanje podatke shrani trajno, medtem ko je sejno shranjevanje veljavno le za trajanje seje brskalnika.
Kako lahko izbrišem piškotke prek zavihka aplikacije?Pojdite v razdelek "Piškotki" in izberite domeno, nato lahko prikažete in izbrišete piškotke.
Kako lahko preizkusim funkcionalnost brez povezave moje spletne aplikacije?Aktivirajte način brez povezave v omrežnem območju in osvežite stran, da preverite njeno funkcionalnost brez povezave.
Kaj je delavec storitev?Delavec storitev je skript, ki ga brskalnik namesti v ozadju in prevzame nadzor nad omrežnimi zahtevami, da omogoči funkcionalnost brez povezave in predpomnjenje.
