Efektīva Chrome izstrādātāja rīku lietošana (pamācība)

Praktiska pielietošana Chrome izstrādātāja rīkos Application cilnesjos

Visi pamācības video Efektīva Chrome izstrādātāja rīku lietošana (pamācība)

Š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.

Praktiskā izmantošana Application cilnes Chrome Developer rīkos

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.

Praktiska pielietošana Application cilnes Chrome Developer Tools

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ē.

Praktisks pielietojums Chrome Developer Tools lietotņu cilnē

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.

Praktiska pielietošana Chrome Developer Tools Application cilnē

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.

Praktiska pielietošana Application cilnes Chrome Developer Tools'os

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.

Praktisks piemērojums Application cilnei Chrome Developer Tools

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ā.

Chrome Developer rīku Application cilnes praktiskā izmantošana

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.

Praktiskā pielietošana Application cilnes Chrome Developer Tools

Ī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.

Chrome Developer rīku Application cilnes praktiskā pielietojuma analīze

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.

Pielietojuma praktiskā izmantošana Chrome Developer Tools pogā

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.