Как найти куки в хроме devtools

Обновлено: 04.07.2024

Вы можете удалять файлы cookie, настраивать для них разрешения, а также устанавливать отдельные параметры для различных сайтов.

Что такое файлы cookie?

Файлы cookie создаются сайтами для хранения пользовательской информации. Они делают работу в Интернете проще и удобнее. Благодаря файлам cookie сайты могут хранить настройки, предлагать наиболее подходящую информацию и запоминать, что вы вошли в аккаунт.

Существует два типа файлов cookie:

Основные файлы cookie создаются сайтами, URL которых указан в адресной строке браузера.
Сторонние файлы cookie сохраняются другими сайтами, которые размещают свой контент (например, объявления или изображения) на просматриваемых вами веб-страницах.

Как удалить все файлы cookie

Если вы очистите файлы cookie, то автоматически выйдете из аккаунтов на всех сайтах. Также ваши настройки будут сброшены.

Откройте Chrome на компьютере.
В правом верхнем углу экрана нажмите на значок "Настройка и управление Google Chrome" Настройки.
В разделе "Конфиденциальность и безопасность" выберите Файлы cookie и другие данные сайтов.
Нажмите Все файлы cookie и данные сайтаУдалить все.
Подтвердите действие.

Как удалить отдельные файлы cookie

Откройте Chrome на компьютере.
В правом верхнем углу экрана нажмите на значок "Настройка и управление Google Chrome" Настройки.
В разделе "Конфиденциальность и безопасность" выберите Файлы cookie и другие данные сайтов.
Нажмите Все файлы cookie и данные сайта.
С помощью поисковой строки в правом верхнем углу найдите нужный сайт.
Справа от названия сайта нажмите на значок "Удалить" .

Откройте Chrome на компьютере.
В правом верхнем углу нажмите на значок с тремя точками .
Выберите Дополнительные инструментыУдаление данных о просмотренных страницах.
Нажмите на стрелку вниз в разделе "Временной диапазон".
Выберите период, например последний час или последние 24 часа.
Установите флажок напротив параметра "Файлы cookie и другие данные сайтов" и снимите все остальные флажки.
Нажмите Удалить данные.

Как изменить настройки файлов cookie

Вы можете разрешить или запретить сайтам сохранять файлы cookie.

Примечание. Если вы запретите их сохранять, то не сможете пользоваться сайтами, на которых нужно входить в аккаунт.

Вы можете сделать так, чтобы все файлы cookie сохранялись или блокировались по умолчанию. Ещё можно разрешить файлы cookie только от конкретных сайтов, но при этом запретив файлы cookie от сторонних сайтов, которые размещают на них рекламу или изображения.

Откройте Chrome на компьютере.
В правом верхнем углу экрана нажмите на значок "Настройка и управление Google Chrome" Настройки.
В разделе "Конфиденциальность и безопасность" выберите Файлы cookie и другие данные сайтов.
Выберите один из вариантов:
- "Показать все файлы cookie";
- "Заблокировать все файлы cookie (не рекомендуется)";
- "Блокировать файлы cookie сторонних сайтов в режиме инкогнито";
- "Блокировать сторонние файлы cookie".

Важно! Если вы заблокируете сторонние файлы cookie, все файлы cookie и данные этих сайтов будут заблокированы, даже если они добавлены в список исключений.

Чтобы установить для сайта отдельные настройки, выполните следующие действия:

Чтобы удалить исключение, справа от названия сайта нажмите на значок "Другие действия" Удалить.

Примечание. Если вы используете Chromebook на работе или в учебном заведении, указанные настройки могут быть недоступны. В таком случае обратитесь к администратору.

Чтобы сохранять данные во время работы в интернете, но удалять их при выходе из Chrome, выполните следующие действия:

Я хочу просматривать, добавлять и редактировать файлы cookie моего Google Chrome. Может кто-нибудь предложить мне способ сделать это?

так как опция изменилась в более новых версиях Chrome, просто щелкните правой кнопкой мыши на странице и выберите Inspect (или нажмите F12), перейдите на вкладку Application и выберите Cookies, которые находятся в разделе Storage: Right-Click: Inspect > Application tab > Storage > Cookies

Вы можете перейти к Developer Tools ( Ctrl - Shift - J или Tools -> Developer Tools ) -> Console и ввести команду javascript:

Вы можете заменить или добавить новые куки с этой техникой.

Можно установить несколько параметров cookie, т.е.

Стэнли в основном сказал это, но для пояснения - если вы отредактируете только один файл cookie с помощью этой команды, он не удалит все остальные файлы cookie на сайте, он на самом деле только заменит файлы cookie, упомянутые в команде. Привет, вы также можете установить срок годности, используя этот метод?

Возможно, самый простой способ просмотреть ваши куки в Chrome - это посетить:

Это не позволяет редактировать файлы cookie в Google Chrome 33.0.1750.117 (Официальная сборка 252094) в Mac OS X, но позволяет просматривать и удалять.

В более поздних версиях файлы cookie перечислены по адресу:

Чтобы просмотреть контент, вам нужно будет выбрать «Просмотреть все файлы cookie и данные сайта» или следовать .

Там нет гиперссылки, потому что Chrome не позволяет гиперссылки для chrome:// . @moose Хотя Chrome действительно позволяет вам добавлять эти специальные ссылки в закладки Chrome для легкого доступа (он также назначает специальную иконку «cog»). У меня есть этот конкретный на моей панели закладок для быстрого доступа. @ Лоси Да. (Хотя Chrome раньше позволял вам перетаскивать эти специальные ссылки в адресную строку / поле омни, но они также остановили это - вы просто получаете about:blank страницу сейчас. Вы все равно можете вручную «Скопировать адрес ссылки» и вставить ее в адресную строку - немного быстрее, чем выбор , копирование и вставка.) Местоположение изменено. Новое местоположение - chrome: // настройки / содержимое / файлы cookie? Search = cookie

Используя 10.0.648.45 dev, вы можете просматривать файлы cookie в разделе «Параметры» → «Под капотом» → «Настройки содержимого» → «Все файлы cookie» и данные сайта.

Кроме того, вы можете просмотреть файлы cookie для текущего сайта с помощью Инструментов разработчика ( F12 , Ctrl - Shift - J или Настройки (значок гамбургера) Дополнительные инструменты → Инструменты разработчика), Приложения → Файлы cookie.

Но вы не можете редактировать значения в любой панели, не так ли? Это верно, вы можете просматривать их только в Chrome без дополнений. Обратите внимание, что в разделе «Ресурсы> Файлы cookie» (в инструментах разработчика) просто отображаются файлы cookie, доступные для текущего запроса. Принимая во внимание, что «Все файлы cookie и данные сайта . » отображают все файлы cookie, которые были установлены для определенного домена (независимо от пути ). @phihag И если значение cookie слишком длинное, Developer Tools обрежет его. Под заявкой | Файлы cookie в более новой версии Chrome (59) позволяют редактировать существующие значения и добавлять новые записи (дважды щелкнув последнюю строку).

Я был разочарован текущими решениями в магазине расширений для просмотра, редактирования, создания, удаления файлов cookie. Текущие решения появились в виде всплывающих окон и не имели хорошего пользовательского интерфейса. Я хотел получить ту же функциональность, что и редактор куки Firebug с внешним видом Chrome. Итак, я сделал один:

Cookie Inspector - отсутствует менеджер файлов cookie для Google Chrome. Редактируйте и создавайте куки прямо в Инструментах разработчика.

Привет @nitech. Я на Chrome 43, и он работает довольно хорошо. Может быть, вы можете таблица, что не работает в поддержку . Благодарю.

Недавно он был изменен с ресурсов на приложения. Так:

Нажмите F12
Перейдите в Приложение (вкладка)> Cookies (боковая панель)
Отредактируйте существующие файлы cookie или создайте новый, дважды щелкнув мышью в пустой строке.

Перейти в настройки :

(теперь вы на Chrome: // settings /)

Выделите раздел конфиденциальности> Настройки контента .

(теперь вы находитесь на chrome: // settings / content)

Нажмите на Все куки и данные сайта .

(теперь вы находитесь на Chrome: // настройки / куки)

Здесь вы можете просмотреть / удалить куки или удалить все куки. Нажмите на ярлыки, чтобы увидеть детали.

Перейти к ресурсам > Cookies

В правой части вы можете увидеть печенье. Если вы хотите удалить их> щелкните правой кнопкой мыши> Удалить :

ОК, а как это сделать в режиме инкогнито? chrome://settings открывается в окне не в режиме инкогнито, и он не показывает мне куки, хотя у меня есть тонны вкладок, открытых в режиме инкогнито.

Существует плагин Chrome, который называется Edit This Cookie. Он добавляет меню на панель инструментов вашего браузера, которое позволяет добавлять, редактировать и удалять файлы cookie.

Для полноты следует отметить, что вам не нужна консоль инструментов разработчика или какие-либо дополнения, расширения или плагины.

Команды javascript, предоставляемые @StanleyD, могут быть непосредственно введены в адресную строку, просто добавив дополнительный «javascript:». Например

Я бы порекомендовал использовать внешние куки-менеджеры. Лично мне нравятся ChromeCookiesView и CookieSpy.

Если вы просто хотите просмотреть все файлы cookie для текущей страницы, не нажимая на каждый из них в графическом интерфейсе, вы можете сделать это:

Откройте консоль разработчика и распечатайте файлы cookie для текущей страницы, введя в консоли:

По крайней мере, в v59 Google Chrome вы можете перейти на:

Хром: // настройки / содержание / печенье

Существует множество расширений, которые могут помочь с этим. Вот менее известный, который хорошо работает, что я сделал. Это называется Cookie-Editor.

Cookie-Editor разработан для того, чтобы иметь простой в использовании интерфейс, который позволяет выполнять большинство стандартных операций с файлами cookie. Он идеально подходит для разработки и тестирования веб-страниц или даже ручного управления файлами cookie для вашей конфиденциальности.

Это позволяет вам просматривать все ваши куки и редактировать или создавать новые куки. Вы также можете удалить куки и импортировать / экспортировать их в файл.

Это соответствует именно тому, что вы просили, и я считаю, что его проще использовать, чем встроенный инструмент, поскольку вы можете получить к нему доступ непосредственно с панели инструментов.

Мы продолжаем цикл статей об инструментах разработчика — Chrome DevTools. В первых двух частях мы уже познакомились с вкладками Elements, Console, Sources и Network и разобрались с их основными функциями.

Возможности Chrome DevTools огромны. С их помощью можно изменять анимацию, проверять доступность, отлавливать ошибки, следить за производительностью сайта и выполнять многие другие задачи. Но на начальных этапах обучения веб-разработке не обязательно разбираться со всеми функциями. Достаточно знать набор базовых инструментов, который понадобится для решения повседневных задач.

Давайте разберёмся, какие задачи можно решить с помощью Chrome DevTools

Посмотреть, как выглядит страница с телефона и планшета

При создании адаптивных сайтов или веб-приложений полезно знать, как выглядит страница на планшете и мобильных устройствах. С помощью инструментов разработчика вы можете сделать это за несколько секунд. Для этого откройте Chrome Devtools, а затем кликните на иконку Toggle device toolbar в левом углу или нажмите комбинацию Ctrl+Shift+M:

Над страницей появится панель с режимами эмуляции из мобильных устройств и планшетов. По умолчанию панель инструментов открывается в режиме адаптивного окна просмотра. Чтобы изменить область до нужных размеров, задайте ширину или потяните за границы рабочей области. А если хотите увидеть, как страница отображается на конкретных устройствах, например, на iPhone 5, кликните на Responsive и выберите подходящий девайс.

Так выглядит страница в мобильной версии

На этой же панели есть еще одна полезная кнопка — DPR (Device Pixel Ratio). С её помощью проверяют, как выглядят изображения на ретина-дисплеях — экранах с повышенной плотностью. Чтобы посмотреть, как выглядит графика на разных устройствах, измените значение DPR и обновите страницу.

Быстро изменить стили прямо на странице

В процессе разработки бывает удобно менять стили прямо в браузере. Например, чтобы проверить, как выглядит элемент с новыми CSS-правилами, или выровнять его при вёрстке под PixelPerfect.

Менять стили в Chrome DevTools можно во вкладке Elements. Сначала выберите элемент, который хотите изменить. Для этого кликните по нему в дереве DOM или активируйте иконку выбора, а затем прямо на странице нажмите на этот элемент.

Меняем элемент прямо на странице

После этого в разделе Styles добавьте, удалите или поменяйте стилевые правила.

В разделе Styles также можно проверять, задавать и исправлять стилевые правила для :hover , :active , :focus и других псевдоклассов. Чтобы это сделать, выберите элемент, которому задано интерактивное состояние. Затем в разделе Styles нажмите на кнопку : hov, выберите подходящий псевдокласс и управляйте его стилями.

Изменяем стилевые правила для псевдоэлементов

Протестировать блоки на переполнение

Во вкладке Elements можно редактировать не только стили, но и DOM-дерево: добавлять и удалять элементы или блоки, менять текст, управлять атрибутами и классами. Это очень удобно, особенно если нужно протестировать какую-то гипотезу или проверить ошибки в вёрстке.

Одна из задач, выполняемых разработчикам с помощью Chrome DevTools — тестирование вёрстки на переполнение. То есть проверка, как ведут себя блоки и элементы при добавлении контента или изменении размеров страницы. Например, вы можете проверить, не выходит ли текст за рамки блока или не выпадают ли элементы из общего потока.

Популярный среди разработчиков мем и заодно пример того, как не нужно делать: вёрстка не должна ломаться при добавлении новых элементов, увеличении текста или изменении размеров страницы.

Как проверить элемент на переполнение текстом

Во вкладке Elements найдите в DOM-дереве элемент, кликните по нему два раза и добавьте текст:

Добавлять текст можно и на самой странице. Для этого откройте соседнюю вкладку Console, введите команду document.body.contentEditable = true и нажмите Enter. После запуска команды вы сможете нажать на элемент и отредактировать его.

Переполнение родительских блоков

Чтобы проверить, не выпадают ли блоки из потока и сохраняется ли сетка, найдите родителя и ему добавьте несколько дополнительных дочерних элементов. Для этого кликните на одном из таких элементов правой кнопкой мыши и нажмите на Duplicate Element.

Пример переполнения: элементы выпадают из родительского блока.

Узнать, какие файлы подключены, и посмотреть их расположение

Порой разработчикам нужно проверить подключенные к проекту файлы и посмотреть их содержимое. В таких случаях на помощь приходит вкладка Sources:

Слева на панели находятся все загруженные ресурсы. Справа — редактор, в котором можно просмотреть любой из загруженных файлов, в том числе изображения. Здесь же можно редактировать CSS и JavaScript. При этом если вы редактируете скрипты, обязательно сохраняйте изменения с помощью команд Command + S для Mac или Control + S для Windows и Linux. Сохранять правки CSS не нужно, они сразу вступают в силу. Конечно, после перезагрузки страницы всё откатится до начального состояния.

Меняем цвет фона во вкладке Sources

Понять, почему не работают скрипты

Здесь разработчик добавил лишнюю кавычку. Ошибка на первой строке в документе diseasmap.js

Иногда бывает сложно разобраться, с чем связана ошибка и как её решить — особенно если вы только начали учиться разработке. В таких случаях приходится искать ответ в интернете: на форумах и профессиональных чатах.

Еще один способ найти и отладить ошибку — воспроизвести её. Используйте для этого точки останова, которые приостанавливают код в момент его выполнения.

Как использовать точки останова

Для начала откройте вкладку Sources и выберите файл со скриптом. Затем кликните по номеру строки, на которой вы хотите приостановить выполнение кода. Выбранные точки сразу появятся на панели справа в разделе Breakpoints.

Также можно пойти другим путём: кликните на Event Listener Breakpoints и выберите события, на которых нужно приостановить выполнение кода.

JavaScript выполняется последовательно. Когда Chrome дойдет до точек останова, он остановит выполнение скрипта, и вы сможете отследить, что происходит с кодом. Например, посмотреть значения переменных или разобраться с логикой функций. С этого момента только вы управляете кодом. Можете перейти к следующей точке, шагнуть внутрь функции или отключить точки останова. В этом вам помогут кнопки на панели справа.

Для чего они нужны, пойдем по порядку:

Resume Script Execution — продолжает выполнение скрипта до следующей точки останова. Горячая клавиша F8.

Step over next function call — выполняет строку кода и переходит к следующей функции. Горячая клавиша F10.

Step into next call function call — выполняет строку кода и затем ныряет внутрь функции — на первую строку. Горячая клавиша F11.

Step out of current function — выполняет до конца текущую функцию и останавливается на её последней строке. Горячая клавиша Shift + F11.

Step — по принципу действия похожа на Step into of current function. Но если Step into нужен для того, чтобы попасть внутрь функции, то Step просто выполнит её и покажет результат. Горячая клавиша F9.

Deactivate breakpoints — отключает точки останова. Горячая клавиша Ctrl + F8.

Pause on exceptions — выполнение JavaScript приостанавливается, когда появляется какое-то исключение.

Проверить качество сайта

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

Lighthouse оценивает классические сайты по четырём критериям: производительность, лучшие практики, SEO и доступность. Для сайтов, выполненных по технологии PWA (прогрессивные веб-приложения), добавляется пятый критерий — progressive web app.

Как использовать Lighthouse

Чтобы запустить проверку, перейдите во вкладку Lighthouse и нажмите на кнопку Generate report. Во время тестирования инструмент будет менять размеры браузера, имитировать отключение и подключение интернета и выполнять другие операции.

В конце вы получите оценки качества сайта по 100-балльной шкале: чем выше оценка, тем лучше. При этом на чистоту проверки могут влиять разные факторы, в том числе интернет-соединение и расширения Chrome. Поэтому лучше запускать тест в режиме инкогнито, закрыв остальные вкладки.

Результаты проверки.

Ниже находятся показатели, которые повлияли на оценку, скриншоты поэтапной отрисовки страницы и предложения — что можно улучшить. Например, Lighthouse может предложить оптимизировать картинки и шрифты, включить отложенную загрузку графики, уменьшить неиспользуемый CSS и JavaScript или внести другие изменения. Каждое предложение подробно описано, можно даже перейти на отдельную страницу и прочитать о нём подробнее.

Lighthouse не единственный инструмент для оценки качества сайта. Есть и другие сервисы, например, PageSpeed Insights. Но он хорошо справляется со своей задачей, и его можно можно использовать при работе с сайтами на локальном сервере.

При оптимизации сайта в Chrome DevTools вы также можете использовать вкладку Network. Она поможет проанализировать загрузку страницы, посмотреть приоритет и вес загружаемых ресурсов, а также увидеть другую полезную информацию. Более подробно о ней мы рассказали в статье «Введение в Chrome DevTools. Console, Sources, Network».

Chrome DevTools облегчает процесс разработки. И хотя начинающим разработчикам бывает непросто сразу разобраться во всех инструментах — это и не нужно. Сначала осваивайте базу и читайте документацию. А чтобы научиться применять Chrome DevTools на практике, попробуйте наши интенсивы «HTML и CSS. Адаптивная вёрстка и автоматизация» и «JavaScript. Профессиональная разработка веб-интерфейсов».

Зачем нужны файлы куки в Гугл Хром

В каких функциях применяются куки:

Как включить куки в Гугл Хром

Все современные браузеры, в том числе веб-обозреватель от Google, поддерживают работу с содержимым куки. По умолчанию данная опция активна в них, но в случае ручного выключения или вмешательства со стороны другого ПО, она может оказаться в нерабочем состоянии.

Как включить файлы куки в Гугл Хром:

Порой появляется желание посмотреть куки в Google Chrome. Таким образом пользователь может извлечь некоторую ценную информацию, к примеру, код сессии, уточнить отсутствие вирусов и т.д. Отобразить содержимое куки представляется возможным двумя методами. Оба они простые и удобные в реализации.

Способ 1: стандартными средствами браузера

Не нужно ничего устанавливать, все необходимые возможности для просмотра cookie уже присутствуют в браузере Chrome.

Важно! Чтобы быстрее найти один или несколько сайтов из длинного перечня, удобно использовать поисковую строку. Она расположена в правой верхней части страницы и находит все совпадения в таблице с введённой фразой.

Если вызывают интерес только данные куки одного сайта, удобнее воспользоваться альтернативным методом, который подразумевает использование инструментов разработчика. В меню отображаются все cookie и помещенная в них информация.

Как загрузить данные из куки в Гугл Хром на конкретном веб-ресурсе:

Способ 2: открыть файл с куки

На самом деле куки в Гугл Хром имеют отдельный файл, хранящийся в каталоге с другими компонентами браузера. Как уже можно догадаться, его реально открыть и посмотреть всё содержимое. Плюс метода в том, что не нужно открывать веб-обозреватель. Еще файл можем скопировать на носитель и посмотреть уже в более подходящее время в удобном месте. Единственная сложность в том, что содержимое сохранено в виде базы данных, поэтому его можем посмотреть только с помощью соответствующего приложения.

Как увидеть содержимое файла куки:

Куки в Гугл Хром – полезная технология, позволяющая комфортно просматривать все веб-ресурсы. Небольшой риск её использования, из-за заражения отслеживающими cookie, в большинстве случаев не сравнится с приносимой пользой. Рекомендуем оставлять функцию включенной, а выключать только во время вынужденного подключения к опасным сайтам.

Читайте также: