Tässä ohjeessa selitän sinulle, miten voit käyttää Chrome Developer Tools -sovellusvälilehteä web-sovelluksen resurssien tutkimiseen. Erityisesti tarkastelussa ovat erilaiset tallennusvaihtoehdot, kuten Local Storage, Session Storage ja IndexedDB. Myös datan hallinta, tallentaminen Service Workerin avulla ja evästeiden käsittely ovat käsiteltyjä osa-alueita. Säätämällä tallennushallintaa voit varmistaa, että web-sovelluksesi toimii tehokkaammin.
Tärkeimmät havainnot
- Sovellusvälilehti on keskeinen työkalu web-sovelluksesi analysoimiseen ja optimointiin.
- Voit tarkastella sovelluksen manifestitiedostoa, Service Workeria, tallennusvaihtoehtoja ja evästeitä suoraan selaimessa.
- Tallennusvaihtoehtojen poistaminen ja nollaus voi auttaa virheiden etsimisessä ja suorituskyvyn parantamisessa.
Askel-askeleelta-opas
Pääsy Application Tabiin
Jotta voit avata Application Tabin, mene sivullesi ja paina F12-näppäintä tai napsauta hiiren oikealla painikkeella ja valitse "Tutki". Developer Toolseista löydät "Application" -välilehden, joka tarjoaa yleiskatsauksen eri resursseista, joita web-sovelluksesi käyttää.
Manifestin tarkastelu
Varmista, että Application Tabissa avaat osion "Manifest". Täällä voit nähdä web-sovelluksesi manifestitiedoston ja tarkistaa ilmoitetut virheettömät tiedot, kuten kuvakkeet, nimet ja kuvauksen. Tämä on erityisen tärkeää kehitettäessä progressiivisia web-sovelluksia (PWAs).
Service Workerin käyttäminen
Seuraava askel on Service Workerin tutkiminen. Ne ovat ratkaisevia web-sovelluksesi offline-toiminnalle. Napsauta osiota "Service Workers" nähdäksesi rekisteröidyt Service Workerit ja testataksesi niiden toiminnallisuuksia, kuten push-ilmoitukset tai synkronointi.
Offline-toiminnallisuuden testaaminen
Tärkeä vaihe on offline-toiminnallisuuden testaus. Voit ottaa Offline-tilan käyttöön ja päivittää sivun nähdäksesi, miten se toimii. Hyvin suunnitellun web-sovelluksen tulisi toimia myös tässä tilassa ja antaa asianmukaisia ohjeita, jos se on offline-tilassa.
Tallennustilan analysointi
Siirry nyt osioon "Storage". Täältä saat yleiskatsauksen välimuistista, Local Storagesta, Session Storagesta ja IndexedDB:stä. Nämä tallennusvaihtoehdot ovat ratkaisevassa roolissa datan tallennuksessa eri vierailujen tai istuntojen välillä.
Tallennettujen tietojen poistaminen
Voit poistaa kaikki tallennetut tiedot ruksaamalla vastaavat laatikot ja valitsemalla sitten "Clear Site Data". Tämä voi olla hyödyllistä ongelmien korjaamiseksi vanhentuneiden tai virheellisten tietojen vuoksi.
Local Storagen käyttäminen
Mene nyt Local Storageen ja aseta joitain arvoja. Voit käyttää localStorage.setItem('key', 'value'); konsolissa luodaksesi uuden tietueen ja päivittää Local Storage -osion nähdäksesi muutokset.
Arvon muuttaminen Local Storagessa
Tässä osiossa voit myös muuttaa arvoja suoraan. Kaksoisnapsauta arvoa muokataksesi sitä. Huomaa, että JSON-muodossa olevaa tekstiä voidaan syöttää, mikä mahdollistaa monimutkaisempien tietojen tallentamisen.
Session Storagen käyttö
Session Storage on samankaltainen kuin Local Storage, mutta henkilökohtainen ja se poistetaan, kun välilehti tai selain suljetaan. Voit testata tätä lisäämällä joitain arvoja ja tarkastelemalla niitä istuntosi aikana.
Evästeiden tarkastelu
Klikkaa "Evästeet" kohdassa nähdäksesi web-sovelluksesi verkkotunnuksen evästeet. Voit tarkastella näiden evästeiden arvoja, muuttaa niitä tai jopa poistaa ne. Tämä on erityisen tärkeää, jos sinulla on ongelmia käyttäjäistuntojen tai todennuksen kanssa.
Välimuistin yleiskatsaus
Välimuisti antaa sinulle mahdollisuuden nähdä kaikki sovelluksesi käyttämät välimuistiin tallennetut tiedostot. Tämä auttaa sinua ymmärtämään, mitkä tiedostot ovat offline-tilassa tai tarvittaessa päivitettäviä.
Taustapalvelujen käyttö
Jos web-sovelluksessasi on toimintoja kuten ilmoitukset tai taustasynkronointi, löydät ne kohdasta "Taustapalvelut". Tämä on erityisen tärkeää PWA:iden kehityksen kannalta, koska ne hyödyntävät näitä ominaisuuksia parantaakseen käyttäjäkokemusta.
Iframe- ja kehyselementtien analysointi
Jos käytät iframeja tai kehyksiä web-sovelluksessasi, voit tarkistaa ladatut resurssit kohdasta "Kehykset". Täällä voit nähdä, mitkä tiedostot iframeilta ladataan ja onko niissä mahdollisia ongelmia.
Yhteenveto
Tässä oppaassa opit hyödyntämään erilaisia sovellusvälilehden toimintoja Chrome-kehitystyökaluissa. Saat yleiskuvan manifesesta, palvelutyöntekijöiden käytöstä, erilaisista tallennusvaihtoehdoista sekä evästeiden hallinnasta. Säännöllisellä resurssien analysoinnilla ja optimoinnilla voit merkittävästi parantaa web-sovelluksesi suorituskykyä.
Usein kysytyt kysymykset
Miten pääsen käsiksi sovellusvälilehteen?Paina F12 tai klikkaa hiiren oikealla painikkeella sivulla ja valitse "Tutki".
Mikä ero on paikallisen tallennustilan ja istunnon tallennustilan välillä?Paikallinen tallennustila tallentaa tiedot pysyvästi, kun taas istunnon tallennustila on voimassa vain selaimen istunnon ajan.
Miten voin poistaa evästeet sovellusvälilehdeltä?Mene "Evästeet" osioon ja valitse verkkotunnus, jonka jälkeen voit nähdä ja poistaa evästeet.
Miten voin testata web-sovellukseni offline-toiminnallisuutta?Aktivoi offline-tila Verkko-osiossa ja päivitä sivu tarkistaaksesi sen offline-toiminnallisuuden.
Mikä on palvelutyöntekijä?Palvelutyöntekijä on skripti, jonka selain asentaa taustalla ja joka hallitsee verkkopyyntöjä mahdollistaakseen offline-toiminnallisuuden ja välimuistin.
