Aplicația practică a filei de aplicații în instrumentele de dezvoltare Chrome

În acest tutorial, îți voi explica cum poți folosi tab-ul Application în Chrome Developer Tools pentru a investiga resursele unei aplicații web. Se va pune accent pe diferitele opțiuni de stocare cum ar fi Local Storage, Session Storage și IndexedDB. De asemenea, gestionarea datelor, stocarea prin Service Worker și tratarea cookie-urilor vor fi prezentate. Prin optimizarea gestionării stocării, poți asigura că aplicația ta web funcționează mai eficient.

Cele mai importante constatări

• Tab-ul Application este un instrument central pentru analiza și optimizarea aplicației web.
• Poți investiga direct în browser fișierul manifest, Service Worker, opțiunile de stocare și cookie-urile.
• Ștergerea și resetarea acestor opțiuni de stocare poate ajuta la depistarea erorilor și optimizarea performanței.

Ghid pas cu pas

Accesarea tab-ului Application

Pentru a deschide tab-ul Application, mergi pe pagina ta și apasă tasta F12 sau fă clic dreapta și selectează „Inspectați”. În Developer Tools vei găsi tab-ul „Application” care îți oferă o privire de ansamblu asupra diferitelor resurse pe care le utilizează aplicația ta web.

Investigarea manifestului

În tab-ul Application, asigură-te că accesezi secțiunea „Manifest”. Aici poți vedea fișierul manifest al aplicației tale web și poți verifica informațiile indicate corect cum ar fi icoanele, numele și descrierea. Acest lucru este deosebit de important când dezvolți aplicații web progresive (PWAs).

Utilizarea Service Worker

Urmează pasul următor care constă în investigarea Service Worker-ului. Acestea sunt cruciale pentru funcționarea offline a aplicației tale web. Fă clic pe secțiunea „Service Workers” pentru a vedea Service Worker-ii înregistrați și pentru a testa funcționalitățile lor, cum ar fi notificările push sau sincronizarea.

Testarea funcționalității offline

Un punct important este testarea funcționalității offline. Poți activa modul offline și reîncărca pagina pentru a vedea cum se comportă. O aplicație web bine concepută ar trebui să funcționeze și în această stare, oferind indiciile corespunzătoare atunci când este offline.

Analiza stocării

Schimbă acum la secțiunea „Storage”. Aici vei obține o vedere de ansamblu a stocării cache-ului, a Local Storage-ului, a Session Storage-ului și a IndexedDB-ului. Aceste opțiuni de stocare au un rol crucial în păstrarea datelor între diferite vizite sau sesiuni.

Ștergerea datelor stocate

Poți șterge toate datele stocate selectând casetele corespunzătoare și apoi selectând „Șterge datele site-ului”. Acest lucru poate fi util pentru remedierea problemelor cauzate de date învechite sau eronate.

Lucrul cu Local Storage

Merge acum la Local Storage și setează unele valori. Poți folosi localStorage.setItem('cheie', 'valoare'); în consolă pentru a crea o intrare nouă, și apoi să actualizezi zona Local Storage pentru a vedea schimbările.

Modificarea valorilor din Local Storage

În această secțiune poți, de asemenea, să modifici valorile direct. Dă dublu clic pe o valoare pentru a o edita. Reține că textul poate fi introdus în formatul JSON, ceea ce îți permite să stochezi date mai complexe.

Folosirea Session Storage-ului

Session Storage este similar cu Local Storage, dar este specific ființei și este șters când tab-ul sau browser-ul este închis. Poți testa acest lucru adăugând câteva valori și verificându-le pe parcursul sesiunii tale.

Examinarea cookie-urilor

Dați clic pe domeniul aplicației dvs. web din secțiunea „Cookie-uri” pentru a vedea cookie-urile setate. Puteți verifica valorile acestor cookie-uri, le puteți schimba sau chiar șterge. Acest lucru este deosebit de important dacă întâmpinați probleme legate de sesiunile utilizatorilor sau de autentificare.

Prezentare generală a Cache Storage

Cache Storage vă oferă o privire asupra tuturor fișierelor cache-ate pe care aplicația dvs. le utilizează. Acest lucru vă ajută să înțelegeți ce fișiere sunt disponibile offline sau care ar trebui actualizate.

Utilizarea serviciilor de fundal

Dacă aplicația dvs. web folosește funcții cum ar fi notificările sau sincronizarea în fundal, acestea sunt disponibile în secțiunea „Servicii de fundal”. Acest lucru este deosebit de important pentru dezvoltarea aplicațiilor web progresive, deoarece acestea folosesc aceste funcții pentru a îmbunătăți experiența utilizatorilor.

Analiza frame-urilor și iFrame-urilor

Dacă utilizați iFrame-uri sau framesets în aplicația dvs. web, puteți verifica resursele încărcate în secțiunea „Frame-uri”. Aici puteți vedea ce fișiere sunt încărcate de iFrame-uri și dacă există probleme asociate.

Sumar

În acest ghid, ați învățat cum să utilizați diferitele funcționalități ale filelor de aplicații în instrumentele pentru dezvoltatori Chrome. Ați obținut o prezentare generală a manifestului, utilizarea lucrătorilor de serviciu, opțiunile de stocare diferite, precum și managementul cookie-urilor. Prin analiza și optimizarea regulată a acestor resurse, puteți îmbunătăți semnificativ performanța aplicației dvs. web.