Šajā instrukcijā es tev pastāstīšu, kā izmantot Pieteikumu cilni Chrome Developer Tools , lai pārbaudītu vienai vietnes apparātam pieejamos resursus. Galvenokārt tiek apspriestas dažādas datu uzglabāšanas iespējas, piemēram Vietējais uzglabājums, Sesijas uzglabāšana un IndexedDB. Tiek apstrādāts arī datu pārvaldība, uzglabāšana caur servisa strādnieku un cepumi. Optimizējot datu pārvaldību, vari nodrošināt, ka tava tīmekļa aplikācija darbojas efektīvāk.
Svarīgākie secinājumi
- Pieteikumu cilnis ir centrāls instruments tava tīmekļa aplikācijas analīzei un optimizēšanai.
- Tu vari pārbaudīt manifesta failu, servisa strādnieku, uzglabāšanas iespējas un cepumus tieši pārlūkā.
- Datu uzglabāšanas iespēju dzēšana un atiestatīšana var palīdzēt problēmu atkļūšanā un veiktspējas optimizēšanā.
Pieņemšanas process soli pa solim
Pieeja pieteikuma cilnij
Lai atvērtu pieteikumu cilni, dodies uz savu lapu un nospied F12 taustiņu vai noklikšķini ar labo peles taustiņu un izvēlies „Izpētīt“. Attīstītāja rīkos atradīsi cilni „Pieteikums”, kurā būs apkopota informācija par dažādiem resursiem, ko izmanto tava tīmekļa aplikācija.
Manifesta pārbaude
Pārliecinies, ka pieteikuma cilnī atvēries sadaļa “Manifests”. Šeit vari redzēt savas tīmekļa aplikācijas manifesta failu un pārbaudīt sniegtās pareizas informācijas, piemēram, ikonas, nosaukumu un aprakstu. Tas ir īpaši svarīgi, ja izstrādā progresīvas tīmekļa aplikācijas (PWA).
Servisa strādnieka izmantošana
Nākamais solis ir servisa strādnieku izpēte. Šie ir būtiski, lai tava tīmekļa aplikācija darbotos bezsaistē. Noklikšķini uz sadaļas „Servisa strādnieki”, lai redzētu reģistrētos servisa strādniekus un pārbaudītu to funkcionalitāti, piemēram, piespiedu ziņojumus vai sinhronizāciju.
Bezsaistes funkcionalitātes pārbaude
Svarīgs punkts ir bezsaistes funkcionalitātes pārbaude. Vari aktivizēt bezsaistes režīmu un atsvaidzināt lapu, lai redzētu, kā tā uzvedas. Labi izstrādāta tīmekļa aplikācija arī šajā stāvoklī vajadzētu darboties un parādīt atbilstošas norādes, ja tā ir bezsaistē.
Datu uzglabāšanas analīze
Tagad pārej uz “Uzglabāšana” sadaļu. Šeit vari iegūt pārskatu par kešatmiņu, vietējo datu uzglabāšanu, sesijas uzglabāšanu un IndexedDB. Šīs uzglabāšanas iespējas ir būtiskas, lai datus saglabātu starp dažādiem apmeklējumiem vai sesijām.
Datu dzēšana
Tu vari dzēst visus saglabātos datus, atzīmējot attiecīgās rūtiņas un pēc tam izvēloties “Notīrīt vietnes datus”. Tas var noderēt, lai novērstu problēmas, kas radušās no veciem vai nepareiziem datiem.
Strādāšana ar lokālo datu uzglabāšanu
Tagad pārej uz vietējo datu uzglabāšanu un iestaties dažus vērtības. Konsole varat izmantot localStorage.setItem('atslēga', 'vērtība');, lai izveidotu jaunu ierakstu, un pēc tam atjaunot vietējā uzglabāšanas sadaļu, lai redzētu veiktās izmaiņas.
Vērtību maiņa lokālajā datu uzglabāšanā
Šajā sadaļā vari mainīt vērtības. Dubultklikšķi uz vērtības, lai to rediģētu. Ņem vērā, ka tekstu var ievadīt JSON formātā, kas ļauj saglabāt sarežģītākus datus.
Sesijas uzglabāšanas izmantošana
Sesijas uzglabāšana ir līdzīga vietējai uzglabāšanai, taču tā ir personīgi identificējama un tiek izdzēsta, kad cilnis vai pārlūkprogramma tiek aizvērta. Vari to pārbaudīt, pievienojot dažas vērtības un pārbaudot tās sesijas laikā.
Sīkfailu pārbaude
Noklikšķini uz savas tīmekļa lietotnes domēna sadaļā "Sīkfaili", lai redzētu, kādi sīkfaili ir iestatīti. Tu vari pārbaudīt šo sīkfailu vērtības, mainīt tās vai pat dzēst. Tas ir īpaši svarīgi, ja tev ir problēmas ar lietotāju sesijām vai autentifikāciju.
Īsināto atmiņas krātuves pārskats
Īsinātā atmiņa ļauj tev redzēt visus krātuvē uzglabātos failus, ko izmanto tava lietotne. Tas palīdz saprast, kuri faili ir pieejami bezsaistē vai kuri varbūt ir jāatjauno.
Fona pakalpojumu izmantošana
Ja tavā tīmekļa lietotnē tiek izmantotas funkcijas, piemēram, paziņojumi vai fona sinhronizācija, šīs atrodas sadaļā "Fona pakalpojumi". Tas ir jo īpaši svarīgi PWA izstrādei, jo šīs funkcijas tiek izmantotas, lai uzlabotu lietotāja pieredzi.
Frame un iFrame analīze
Ja tavā tīmekļa lietotnē tiek izmantoti iFrame vai rāmjveida ietvari, sadaļā “Rāmji” varēsi pārbaudīt ielādētās resursus. Šeit redzēsi, kādi faili tiek ielādēti no iFrame un vai rodas kādas problēmas.
Kopsavilkums
Šajā rokasgrāmatā tu esi uzzinājis, kā izmantot dažādas funkcijas Application Tab Chrome izstrādātāja rīkos. Tu esi ieguvis pārskatu par manifestu, servisa darba projektu izmantošanu, dažādām krātuves iespējām un sīkfailu pārvaldīšanu. Regulāri analizējot un optimizējot šos resursus, tu vari ievērojami uzlabot savas tīmekļa lietotnes veiktspēju.
Bieži uzdotie jautājumi
Kā es varu piekļūt Application Tab?Nospied F12 vai labajā pelējumā noklikšķini uz lapas un izvēlies "Pārbaudīt".
Kas ir lokalā krātuve un sesijas krātuve?Lokālā krātuve saglabā datus pastāvīgi, bet sesijas krātuve ir derīga tikai pārlūkprogrammas sesijas laikā.
Kā es varu dzēst sīkfailus, izmantojot Application Tab?Dodieties uz sadaļu “Sīkfaili” un izvēlieties domēnu, tad vari apskatīt un dzēst sīkfailus.
Kā es varu pārbaudīt savas tīmekļa lietotnes bezsaistes funkcionalitāti?Iespējo bezsaistes režīmu tīkla sadaļā un atsvaidzini lapu, lai pārbaudītu tās bezsaistes funkcionalitāti.
Kas ir servisa darba projekts?Servisa darba projekts ir skripts, ko pārlūks instalē fona režīmā un kas kontrolē tīkla pieprasījumus, lai nodrošinātu bezsaistes funkcionalitāti un kešatmiņu.