У цьому Посібнику я поясню, як використовувати вкладку Податки заявок в інструментах розробника Chrome, щоб досліджувати ресурси веб-застосунка. Особлива увага зосереджена на різних опціях зберігання, таких як Локальне сховище, Сховище сеансу та IndexedDB. Також будуть розглянуті управління даними, збереження через супервізор служби та робота з Кукісами. Оптимізуючи управління пам'яттю, ви можете забезпечити ефективнішу роботу свого веб-застосунку.
Основні висновки
- Вкладка Податків є центральним інструментом для аналізу та оптимізації вашого веб-застосунка.
- Ви можете прямо в браузері переглянути файл маніфесту, службовців, опції зберігання та куки.
- Видалення та скидання цих опцій зберігання може допомогти у пошуку помилок та оптимізації продуктивності.
Крок-за-кроком інструкція
Доступ до вкладки Податків
Щоб відкрити вкладку Податків, перейдіть на вашу сторінку, натисніть клавішу F12 або клацніть правою кнопкою миші та виберіть "Огляд". У вікні розробника ви знайдете вкладку "Податки", яка надасть вам огляд різноманітних ресурсів, які використовує ваш веб-застосунок.
Дослідження маніфесту
На вкладці Податків переконайтеся, що ви відкрили розділ "Маніфест". Тут ви зможете побачити файл маніфесту вашого веб-застосунка та перевірити надану цілісну інформацію, таку як значки, назви та опис. Це особливо важливо при розробці прогресивних веб-застосунків (PWA).
Використання службовця праці
Наступним кроком є дослідження службовців. Вони є ключовими для автономної роботи вашого веб-застосунка. Клацніть на розділ "Службовці", щоб переглянути зареєстрованих службовців та протестувати їх функціональність, такі як повідомлення Push або синхронізація.
Тестування функціоналу в офлайні
Важливим етапом є тестування функціоналу в офлайні. Ви можете активувати режим офлайну та перезавантажити сторінку, щоб побачити, як вона себе веде. Гарно розроблений веб-застосунок повинен працювати навіть в цьому стані та надавати відповідні вказівки, якщо він офлайн.
Аналіз зберігання
Тепер перейдіть до розділу "Сховище". Тут ви отримаєте огляд сховища кешу, локального сховища, сховища сеансу та IndexedDB. Ці опції зберігання відіграють вирішальну роль у зберіганні даних між різними відвідуваннями або сеансами.
Видалення збережених даних
Ви можете видалити всі збережені дані, відзначивши відповідні прапорці й вибравши "Очистити дані сайта". Це може бути корисною в пошуку та виправленні проблем, спричинених застарілими або неправильними даними.
Робота з локальним сховищем
Перейдіть зараз до локального сховища й встановіть деякі значення. Ви можете використовувати localStorage.setItem('ключ', 'значення'); в консолі, щоб створити новий запис, а потім оновити область локального сховища, щоб побачити зміни.
Зміна значень в локальному сховищі
В цьому розділі ви також можете безпосередньо змінювати значення. Подвійне клацання на значенні, щоб відредагувати його. Зверніть увагу, що текст може вводитися у форматі JSON, що дає вам змогу зберігати складні дані.
Використання сховища сеансу
Сховище сеансу схоже на локальне сховище, але воно є персоналізованим та видаляється при закритті вкладки або браузера. Ви можете протестувати це, додаючи деякі значення та перевіряючи їх під час вашої сесії.
Перевірка файлів cookie
Клацніть на домен вашого веб-застосунку в розділі "Cookies", щоб переглянути файли cookie, які були встановлені. Ви можете перевірити значення цих файлів cookie, змінити їх або навіть видалити. Це особливо важливо, якщо у вас виникають проблеми з сеансами користувачів або аутентифікацією.
Огляд сховища кешу
Сховище кешу надає вам інформацію про всі файли, які використовує ваш застосунок. Це допомагає вам зрозуміти, які файли доступні офлайн або які можуть бути оновлені.
Використання фонових служб
Якщо ваш веб-застосунок використовує функції, такі як сповіщення чи фонова синхронізація, ви знайдете їх у розділі "Фонові служби". Це особливо важливо для розвитку прогресивних веб-застосунків, оскільки вони використовують ці функції для покращення користувацького досвіду.
Аналіз фреймів та iFrame
Якщо ви використовуєте iFrame або набори кадрів у вашому веб-застосунку, ви можете перевірити завантажені ресурси в розділі "Кадри". Тут ви можете побачити, які файли завантажуються через iFrame та чи є з цим проблеми.
Підсумок
У цьому посібнику ви дізналися, як використовувати різноманітні функції вкладки "Застосунок" в Chrome Developer Tools. Ви знайшли огляд маніфесту, використання службовців, різні варіанти зберігання та керування файлами cookie. Регулярний аналіз та оптимізація цих ресурсів допоможе значно покращити продуктивність вашого веб-застосунку.
Часті питання
Як я можу отримати доступ до вкладки "Застосунок"?Натисніть F12 або клацніть правою кнопкою миші на сторінці і виберіть "Досліджувати".
Яка різниця між Local Storage і Session Storage?Local Storage зберігає дані постійно, тоді як Session Storage є гілками лише для тривалості сеансу в браузері.
Як я можу видалити файли cookie через вкладку "Застосунок"?Перейдіть до розділу "Cookies" та виберіть домен, потім ви зможете переглянути та видалити файли cookie.
Як я можу перевірити режим офлайн для мого веб-застосунку?Увімкніть режим офлайну в розділі "Мережа" і перезавантажте сторінку, щоб перевірити її роботу в офлайні.
Що таке службовець?Службовець - це скрипт, який браузер встановлює в фоновому режимі та контролює мережові запити, щоб забезпечити можливість роботи в офлайні та кешування.
