В този учебник ще ти обясня как да използваш Application раздела в Chrome Developer Tools, за да проучиш ресурсите на уеб-приложение. Специално внимание се обръща на различни опции за съхранение като Local Storage, Session Storage и IndexedDB. Също така ще бъдат разгледани управлението на данните, съхранението чрез Service Worker и работата с бисквитки. Чрез оптимизиране на управлението на паметта можеш да се увериш, че твоето уеб-приложение функционира по-ефективно.
Най-важните изводи
- Разделът Application е централен инструмент за анализ и оптимизация на твоето уеб-приложение.
- Можеш директно да проучваш манифест файла, Service Worker, опциите за съхранение и бисквитките в браузъра.
- Изчистването и нулирането на тези опции за съхранение може да помогне при отстраняването на проблеми и оптимизацията на производителността.
Стъпка по стъпка ръководство
Достъп до Application раздела
За да отвориш раздела Application, отиди на своята страница и натисни клавиш F12 или кликни с десния бутон на мишката и избери "Провери". В Developer Tools ще намериш раздел "Application", който ти предоставя общ преглед на различните ресурси, които твоето уеб-приложение използва.
Проучване на манифеста
В раздела Application се увери, че си отворил раздела "Манифест". Тук можеш да видиш манифест файла на твоето уеб-приложение и да провериш посочената в него безпроблемна информация като икони, имена и описание. Това е особено важно, когато разработваш прогресивни уеб приложения (PWAs).
Използване на Service Worker
Следващата стъпка е да проучиш Service Worker. Те са от съществено значение за офлайн режима на твоето уеб-приложение. Кликни върху раздела "Service Workers", за да видиш регистрираните Service Worker-и и да тестваш техните функционалности като изпращане на известия или синхронизация.
Тестване на офлайн функционалност
Важно е да тестваш офлайн функционалността. Можеш да активираш офлайн режим и да презаредиш страницата, за да видиш как се държи. Добре дизайнерирано уеб-приложение трябва да функционира дори в този режим и да дава подходящи инструкции, когато е без връзка.
Анализ на съхранението
Сега премини към раздела "Sorage". Тук ще получиш общ преглед на кеша, локалното съхранение, сесийното съхранение и IndexedDB. Тези опции за съхранение играят важна роля, когато става въпрос за съхранение на данни между различни посещения или сесии.
Изтриване на съхранени данни
Можеш да изтриеш всички съхранени данни, като маркираш отговарящите кутии и след това избереш "Изчисти данните на сайта". Това може да бъде полезно за отстраняване на проблеми, причинени от остарели или повредени данни.
Работа с локално съхранение
Сега премини към локалното съхранение и задай някои стойности. Можеш да използваш localStorage.setItem('ключ', 'стойност'); в конзолата, за да създадеш нов запис, и след това да актуализираш раздела за локално съхранение, за да видиш промените.
Промяна на стойности в локалното съхранение
В този раздел можеш също така да променяш стойности директно. Двойно кликни върху стойност, за да я редактираш. Обърни внимание, че текстът може да бъде въведен в JSON формат, което ти позволява да съхраняваш по-сложни данни.
Използване на сесионно съхранение
Сесионното съхранение е подобно на локалното съхранение, но е персонализирано и се изтрива, когато се затвори раздел или браузър. Можеш да тестваш това, като добавиш някои стойности и ги провериш по време на твоята сесия.
Преглед на бисквитки
Цъкнете в раздела "Бисквитки" върху домейна на вашето уеб приложение, за да видите бисквитките, които са зададени. Можете да проверите стойностите на тези бисквитки, да ги промените или дори да ги изтриете. Това е особено важно, ако имате проблеми с потребителски сесии или удостоверяване.
Преглед на кеш за съхранение
Кеш съхранението ви предоставя обзор на всички файлове, които вашето приложение вече е кеширало. Това ви помага да разберете кои файлове са налични офлайн или кои може би трябва да бъдат актуализирани.
Използване на фонови услуги
Ако вашето уеб приложение използва функции като известия или синхронизация на фон, можете да ги намерите в раздел "Фонови услуги". Това е особено важно за разработката на PWAs, тъй като те използват тези функции, за да подобрят потребителското изживяване.
Анализ на рамките и iFrames
Ако използвате iFrames или рамки във вашето уеб приложение, можете да проверите заредените ресурси в раздела "Рамки". Тук може да видите кои файлове се зареждат от iFrames и да установите дали има проблеми.
Обобщение
В това ръководство научихте как да използвате различните функции на раздела за приложения в Chrome Developer Tools. Получихте общ преглед на манифеста, използването на услугови работници, различните опции за съхранение и управлението на бисквитките. Чрез редовен анализ и оптимизация на тези ресурси можете значително да подобрите производителността на вашето уеб приложение.
Често задавани въпроси
Как да достъпя Application Tab?Натиснете F12 или щракнете с десния бутон на мишката върху страница и изберете "Преглед".
Каква е разликата между локално съхранение и сесионно съхранение?Локалното съхранение запазва данните постоянно, докато сесионното съхранение е валидно само по време на сесията на браузъра.
Как да изтрия бисквитки чрез раздела за приложения?Отидете в раздела "Бисквитки" и изберете домейна, след което можете да видите и изтриете бисквитките.
Как да тествам офлайн функционалността на моето уеб приложение?Активирайте офлайн режима в раздела "Мрежа" и презаредете страницата, за да проверите нейната офлайн функционалност.
Какво е услугов работник?Услугов работник е скрипт, който браузърът инсталира във фона и контролира мрежовите заявки, за да позволи офлайн функционалност и кеширане.
