Selles õpetuses selgitan sulle, kuidas saad kasutada Chrome'i arendajatööriistade jaotist Rakendused, et uurida veebirakenduse ressursse. Eriti olulised on erinevad salvestusvõimalused nagu Kohalik salvestus, Ig-session ja IndexedDB. Samuti käsitletakse andmete haldamist, salvestamist teenusetöötaja kaudu ja Küpsiste kasutamist. Mäluhalduse optimeerimisega saad veenduda, et sinu veebirakendus töötab efektiivsemalt.
Kõige olulisemad järeldused
- Veebirakenduse Rakendused jaotis on oluline tööriist sinu veebirakenduse analüüsimiseks ja optimeerimiseks.
- Saad vaadata Manifesti faili, teenusetöötajaid, salvestusvõimalusi ja küpsiseid otse brauseris.
- Neid salvestusvõimalusi saab kustutada ja lähtestada, mis võib aidata tõrkeotsingul ja jõudluse optimeerimisel.
Samm-sammuline juhend
Juurdepääs Rakendused jaotisele
Rakenduste jaotise avamiseks mine oma lehele ja vajuta klahvi F12 või klõpsa parema hiireklahviga ja vali "Uurimine". Arendajatööriistadest leiad jaotise "Rakendused", mis pakub ülevaadet erinevatest ressurssidest, mida sinu veebirakendus kasutab.
Manifesti uurimine
Rakendused jaotises veendu, et avad osa "Manifest". Siin saad vaadata oma veebirakenduse manifestifaili ja kontrollida esitatud vigadeta teavet nagu ikoonid, nimed ja kirjeldused. See on eriti oluline, kui arendad progresseeruvaid veebirakendusi (PWA).
Teenusetöötaja kasutamine
Järgmine samm on teenusetöötaja uurimine. Need on olulised oma veebirakenduse offline-režiimi jaoks. Klikka jaotises "Teenusetöötajad", et näha registreeritud teenusetöötajaid ja testi nende funktsionaalsusi nagu sõnumite saatmine või sünkroniseerimine.
Offline-funktsionaalsuse testimine
Oluline osa on offline-funktsionaalsuse testimine. Saad aktiveerida offline-režiimi ja lehte uuesti laadida, et näha, kuidas see käitub. Hästi kujundatud veebirakendus peaks toimima ka selles olekus ning andma vastavaid juhiseid, kui see on offline-režiimis.
Salvestusruumi analüüs
Mine nüüd jaotisse "Salvestus". Siin saad ülevaate vahemälu, kohaliku salvestuse, sessioonisalvestuse ja IndexedDB kohta. Need salvestusvõimalused mängivad olulist rolli andmete salvestamisel erinevate külastuste või sessioonide vahel.
Salvestatud andmete kustutamine
Saad kõik salvestatud andmed kustutada, tšekkides vastavad kastid ja valides seejärel "Clear Site Data". See võib aidata lahendada probleeme, mis on põhjustatud aegunud või vigastest andmetest.
Töötamine kohaliku salvestusega
Mine nüüd kohaliku salvestuse jaotisse ja seadista mõned väärtused. Saad kasutada konsoolis localStorage.setItem('key', 'value');, et luua uus kirje ning seejärel värskendada kohaliku salvestuse ala, et näha muudatusi.
Väärtuste muutmine kohalikus salvestuses
Selles jaotises saad väärtusi otse muuta. Topeltklõpsa väärtusel, mida soovid muuta. Pidage meeles, et saad sisestada teksti JSON-vormingus, mis võimaldab sul salvestada keerukamaid andmeid.
Sessioonisalvestuse kasutamine
Sessioonisalvestus on sarnane kohalikule salvestusele, kuid isiklik ja kustutatakse, kui vahekaart või brauser suletakse. Saad seda testida, lisades mõned väärtused ja kontrollides neid oma seansi jooksul.
Piiküpsiste uurimine
Klõpsa valdkonnas "Küpsised" oma veebirakenduse domeenil, et näha, millised küpsised on loodud. Saad neid küpsiste väärtusi kontrollida, neid muuta või isegi kustutada. See on eriti oluline, kui sul tekib probleeme kasutajate sessioonide või autentimisega.
Vahemälu haldamine
Vahemälu haldus annab sulle ülevaate kõigist vahemällu salvestatud failidest, mida sinu rakendus kasutab. See aitab sul aru saada, millised failid on saadaval offline'i või milliseid võib-olla värskendada tuleb.
Taustateenuste kasutamine
Kui sinu veebirakendus kasutab funktsioone nagu teated või taustsünkroonimine, leiad need "Taustateenuste" alt. See on eriti oluline PWA-de arendamisel, kuna nad kasutavad neid funktsioone kasutajakogemuse parandamiseks.
Raamide ja iFrame'ide analüüs
Kui kasutad oma veebirakenduses iFrame'e või Frame-sette, saad "Raamide" jaotise all kontrollida laetud ressursse. Siin saad näha, milliseid faile iFrame'id laevad ja kas seal esineb probleeme.
Kokkuvõte
Selles juhendis õppisid, kuidas kasutada Chrome'i arendajate tööriistade rakenduste vahekaardi erinevaid funktsioone. Sa said ülevaate manifesdast, teenustöötajate kasutamisest, erinevatest salvestusvõimalustest ja küpsiste haldusest. Regulaarse ressursside analüüsi ja optimeerimisega saad oluliselt parandada oma veebirakenduse jõudlust.
Sagedased küsimused
Kuidas pääseda ligi rakenduse vahekaardile?Vajuta klahvi F12 või paremklõpsa lehel ja vali "Vaata lähtekoodi".
Mis vahe on kohaliku salvestuse ja sessiooni salvestuse vahel?Kohalik salvestus salvestab andmeid püsivalt, samas kui sessiooni salvestus on kehtiv ainult brauseri sessiooni vältel.
Kuidas kustutada küpsiseid rakenduse vahekaardi kaudu?Mine jaotisesse "Küpsised" ja vali domeen, seejärel saad küpsiseid vaadata ja kustutada.
Kuidas testida oma veebirakenduse offline-funktsionaalsust?Aktiveeri võrguosa all offline-režiim ja värskenda lehte, et kontrollida selle offline-funktsionaalsust.
Mis on teenusetöötaja?Teenusetöötaja on skript, mille brauser installeerib taustal ja mis kontrollib võrgupäringuid, et võimaldada offline-funktsionaalsust ja vahemälustamist.
