Как просматривать и редактировать cookies в Chrome DevTools
Когда ломается аутентификация, сессии неожиданно истекают или клиентское состояние ведёт себя странно, cookies — это обычно первое место, куда стоит заглянуть. Chrome DevTools даёт вам прямой доступ к каждой cookie, которую устанавливает ваша страница, — и позволяет изменять их без написания единой строки кода.
Вот точная инструкция, как использовать панель cookies в Chrome DevTools для просмотра, добавления, редактирования и удаления cookies в процессе разработки.
Ключевые моменты
- Откройте панель cookies через Application → Storage → Cookies в Chrome DevTools, чтобы просмотреть все cookies для данного источника.
- Каждая строка cookie содержит критически важные поля, такие как Domain, Path, SameSite, HttpOnly и Secure — понимание этих полей необходимо для отладки проблем с аутентификацией и сессиями.
- Вы можете добавлять, редактировать и удалять cookies напрямую в панели Application без написания кода.
- Используйте вкладку Cookies в панели Network, чтобы проверить, какие cookies фактически отправляются в запросах и получаются в ответах на HTTP-уровне.
- Сторонние cookies отображаются со значками предупреждения в панели Application, что помогает выявлять проблемы с межсайтовыми cookies по мере ужесточения браузерных ограничений конфиденциальности.
Открытие панели Cookies в Chrome DevTools
- Откройте Chrome DevTools клавишей
F12(Windows/Linux) илиCmd + Option + I(Mac). - Перейдите на вкладку Application.
- В левой боковой панели разверните Storage → Cookies.
- Выберите источник для просмотра его cookies.
Вы увидите таблицу со списком всех cookies, связанных с этим источником.
Понимание полей Cookie
Каждая строка в таблице cookies представляет одну cookie. Вот что означает каждый столбец и почему это важно при отладке cookies в Chrome DevTools:
| Поле | Что оно показывает |
|---|---|
| Name | Ключ cookie |
| Value | Сохранённые данные (установите флажок Show URL-decoded для декодирования процентно-кодированных значений) |
| Domain | Какие хосты получают эту cookie — .example.com включает поддомены, а sub.example.com — нет |
| Path | Область URL-пути, необходимая для того, чтобы браузер отправил cookie |
| Expires / Max-Age | Дата истечения или Session для cookies, которые удаляются при завершении сеанса браузера |
| Size | Размер cookie в байтах (вычисляется автоматически, не редактируется) |
| HttpOnly | Если отмечено, JavaScript не может прочитать эту cookie — она видна только через DevTools или панель Network |
| Secure | Если отмечено, cookie передаётся только по HTTPS |
| SameSite | Strict, Lax или None — управляет поведением отправки между сайтами |
| Partition Key | Присутствует в разделённых cookies (CHIPS) — показывает сайт верхнего уровня, которому принадлежит этот раздел хранилища |
Используйте поле Filter для поиска по имени или значению, когда страница устанавливает много cookies. Разделённые cookies (CHIPS) являются частью новых моделей конфиденциальности браузеров, и статус их поддержки можно отслеживать на https://webstatus.dev/features/partitioned-cookies.
Как добавлять, редактировать и удалять Cookies
Добавление cookie:
- Дважды щёлкните по пустой строке внизу таблицы.
- Введите имя и значение, затем нажмите
Enter. - DevTools автоматически заполнит значения по умолчанию для остальных полей.
Редактирование cookie:
- Дважды щёлкните по любому полю для редактирования прямо в таблице.
- Поле Size обновляется автоматически — всё остальное можно редактировать.
- DevTools выделяет недопустимые значения красным цветом.
- Используйте Only show cookies with an issue, чтобы отфильтровать корректные записи и сосредоточиться на проблемах.
Удаление cookies:
- Выберите строку cookie и нажмите Delete selected на панели действий.
- Нажмите Clear all, чтобы удалить все cookies для выбранного источника.
Это особенно полезно при тестировании процессов входа — вы можете вручную установить срок действия сессионной cookie или изменить значение токена, чтобы проверить, как ваше приложение обрабатывает граничные случаи.
Discover how at OpenReplay.com.
Использование панели Network для отладки заголовков Cookie
Панель Application — это ваше рабочее пространство для редактирования cookies. Панель Network — это место, где вы проверяете, что фактически отправляется и получается.
Откройте панель Network, щёлкните по любому запросу, затем выберите вкладку Cookies. Вы увидите два раздела:
- Request Cookies — что браузер отправил на сервер.
- Response Cookies — что сервер указал браузеру установить через заголовки
Set-Cookie.
Это различие важно, потому что JavaScript не может напрямую прочитать заголовок ответа Set-Cookie. Если cookie не появляется после входа, сначала проверьте панель Network, чтобы убедиться, что сервер действительно её устанавливает. Поведение заголовка Set-Cookie описано в справочнике MDN по Set-Cookie.
Определение сторонних Cookies
В панели Application сторонние cookies — те, которые установлены доменом, отличным от текущей страницы верхнего уровня, — отображаются со значком предупреждения. Эти cookies обычно имеют SameSite=None и требуют атрибута Secure. Наведите курсор на значок для получения подробностей. В современных версиях Chrome DevTools предупреждения о конфиденциальности cookies и связанная диагностика могут также появляться непосредственно в Console.
По мере развития политик конфиденциальности браузеров Chrome и другие браузеры всё больше ограничивают поведение сторонних cookies. Тестирование поведения cookies вашего сайта в условиях этих ограничений стоит включить в регулярный рабочий процесс отладки.
Заключение
Панель cookies в Chrome DevTools даёт вам всё необходимое для просмотра и редактирования cookies, не покидая браузер. Используйте панель Application для проверки хранилища и ручного редактирования. Используйте панель Network для проверки того, какие cookies фактически отправляются и получаются на HTTP-уровне. Вместе эти две панели охватывают полный рабочий процесс отладки cookies для аутентификации, сессий и управления клиентским состоянием.
Если вам нужен более глубокий справочный материал о том, как Chrome предоставляет доступ к cookies и связанным атрибутам в DevTools, см. официальное руководство по отладке cookies в Chrome DevTools.
Часто задаваемые вопросы
Сервер может неправильно отправлять заголовок Set-Cookie, или атрибуты Domain или Path cookie могут не соответствовать текущей странице. Откройте панель Network, найдите запрос входа и проверьте вкладку Response Cookies, чтобы убедиться, что заголовок присутствует и правильно сформирован.
Сессионная cookie не имеет значения Expires или Max-Age и отображает Session в столбце истечения срока действия. Она удаляется при завершении сеанса браузера. Постоянная cookie имеет конкретную дату истечения и остаётся сохранённой до наступления этой даты или до ручного удаления cookie.
Значок предупреждения обычно указывает на стороннюю cookie или cookie с отсутствующим или неправильно настроенным атрибутом SameSite. Наведите курсор на значок для получения сводки, а дополнительная диагностика может появиться в консоли DevTools.
Нет. HttpOnly cookies по замыслу недоступны для JavaScript, что защищает их от атак межсайтового скриптинга. Однако вы можете просматривать и редактировать их непосредственно в панели Application Chrome DevTools, дважды щёлкнув по соответствующему полю.
Gain control over your UX
See how users are using your site as if you were sitting next to them, learn and iterate faster with OpenReplay. — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data. Check our GitHub repo and join the thousands of developers in our community.
