DevTools -- Application панель

Панель Application в Chrome DevTools — инструмент для просмотра и управления хранилищами браузера: localStorage, sessionStorage, cookies, IndexedDB, Cache Storage, Service Workers.

Зачем нужно

При разработке веб-приложений часто нужно проверить, что записывается в localStorage, какие куки установлены, работает ли Service Worker. Application позволяет читать, редактировать и удалять данные хранилищ прямо в браузере без написания кода. Это незаменимо при отладке авторизации, кеширования и PWA.

Где используется

  • Отладка аутентификации: просмотр и удаление токенов из cookies/localStorage
  • PWA-разработка: управление Service Workers, проверка Cache Storage
  • Отладка состояния приложения, сохранённого в хранилищах
  • Проверка квот хранилища и очистка данных при тестировании

Основной контент

Открытие панели

F12 → вкладка Application (может быть скрыта за »).

Структура боковой панели

Application
├── Manifest           — Web App Manifest
├── Service Workers    — регистрация, статус, обновление SW
├── Storage            — обзор и очистка всех хранилищ
│
Storage
├── Local Storage      — данные по origin, без срока
├── Session Storage    — данные на время сессии вкладки
├── IndexedDB          — структурированное хранилище
├── Web SQL            — (устаревшее)
├── Cookies            — куки по домену
│
Cache
├── Cache Storage      — кеш Service Worker
└── Back/forward cache — кеш навигации

Работа с localStorage

Левая панель: Local Storage → выбрать origin.

Таблица показывает ключ/значение. Можно:

  • Двойной клик → редактировать значение прямо в таблице
  • Выбрать строку → Delete → удалить запись
  • Кнопка «Clear all» — очистить всё хранилище

Работа с cookies

Cookies → выбрать домен. Видны все атрибуты:

Поле Описание
Name Имя куки
Value Значение
Domain Для какого домена
Path Для какого пути
Expires Срок истечения
HttpOnly Недоступен JS
Secure Только HTTPS
SameSite Политика кросс-сайт

Service Workers

Service Workers → статус (activated, waiting, stopped). Кнопки:

  • Update — принудительно обновить SW
  • Unregister — снять регистрацию
  • Offline — симулировать режим офлайн

Консольные команды для хранилищ

// localStorage
localStorage.setItem('key', 'value');
localStorage.getItem('key');
localStorage.removeItem('key');
localStorage.clear();

// sessionStorage — тот же API
sessionStorage.setItem('session', '123');

// cookies (базовый API)
document.cookie = "name=value; expires=Fri, 31 Dec 2026 23:59:59 GMT";

Частые ошибки

  • Изменили localStorage в консоли, а в Application не обновилось — нажми Refresh (иконка обновления в панели)
  • Service Worker завис в состоянии «waiting» — старый SW не уступает место новому; в панели нажми skipWaiting
  • Не видно cookies — если куки HttpOnly, они видны в Application, но недоступны через document.cookie

Связанные темы

Ресурсы