Что представляет собой вкладка Storage в браузерных DevTools?

Вкладка Storage в инструментах разработчика браузера (DevTools) — это панель для инспекции, управления и отладки всех видов клиентских хранилищ данных.

Как открыть: F12 → вкладка Application (в Chrome/Edge) или Storage (в Firefox) → раздел Storage.

Что можно увидеть и делать:

1. Local Storage / Session Storage

   • Просмотр всех пар ключ-значение для текущего origin.
   • Добавление, редактирование и удаление записей в реальном времени.
   • Полезно для отладки состояния приложения.

2. Cookies

   • Список всех cookies для текущего домена.
   • Просмотр атрибутов: имя, значение, срок жизни, флаги (HttpOnly, Secure, SameSite).
   • Возможность удалить отдельные cookie.

3. IndexedDB

   • Просмотр NoSQL-баз данных и их объектных хранилищ (object stores).
   • Инспекция записей, выполнение запросов.

4. Cache Storage

   • Просмотр кэшей, созданных Service Workers (из Cache API).
   • Можно увидеть закэшированные ресурсы (HTML, CSS, JS, изображения).

Практическое применение для отладки:

// Код приложения сохраняет токен
localStorage.setItem('authToken', 'abc123.xyz.789');

1. Откройте DevTools → Application → Local Storage.
2. Найдите свой домен и убедитесь, что ключ authToken присутствует со значением abc123.xyz.789.
3. Можно изменить значение прямо в таблице для тестирования разных сценариев.

Эта вкладка незаменима для анализа проблем, связанных с персистентностью данных, работой PWA (Progressive Web Apps) и отладкой механизмов кэширования.