Новые функции для файлов cookie

Отладка, почему файл cookie был заблокирован

После записи сетевой активности выберите сетевой ресурс, а затем перейдите на обновленную вкладку Файлы cookie, чтобы понять, почему были заблокированы файлы cookie запроса или ответа этого ресурса. См. Изменения поведения по умолчанию без SameSite, чтобы понять, почему вы можете видеть больше заблокированных файлов cookie в Chrome 76 и более поздних версиях.

  • Желтый Запросить файлы cookie не отправлялся по сети. По умолчанию они скрыты. Нажмите показать файлы cookie отфильтрованных запросов, чтобы отобразить их.
  • Желтый Ответные файлы cookie были отправлены по сети, но не сохранены.
  • Наведите указатель мыши на Дополнительная информация, чтобы узнать, почему файл cookie был заблокирован.
  • Большая часть данных в таблицах Куки-запросы и Куки-файлы ответов поступает из HTTP-заголовков ресурса. Данные Домен, Путь и Истекает / Максимальный срок поступают из Протокола Chrome DevTools.

Просмотр значений файлов cookie

Щелкните строку на панели файлов cookie, чтобы просмотреть значение этого файла cookie.

Примечание. Основное различие между вкладкой «Файлы cookie» на панели «Сеть» и панелью «Файлы cookie» на панели приложения заключается в том, что панель «Файлы cookie» на панели приложения позволяет редактировать и удалять файлы cookie.

Имитация различных предпочтительных цветовых схем и предпочтений с ограниченным движением

Медиа-запрос prefers-color-scheme позволяет подобрать стиль вашего сайта в соответствии с предпочтениями пользователя. Например, если prefers-color-scheme: dark медиа-запрос истинен, это означает, что ваш пользователь установил свою операционную систему в темный режим и предпочитает пользовательские интерфейсы темного режима.

Откройте Командное меню, запустите команду Показать рендеринг, а затем установите раскрывающееся меню Эмуляция CSS-мультимедиа предпочитает цветовую схему для отладки стилей prefers-color-scheme: dark и prefers-color-scheme: light.

Вы также можете смоделировать prefers-reduced-motion: reduce с помощью раскрывающегося меню Эмулировать CSS-медиа-функцию предпочитает-уменьшенное-движение рядом с раскрывающимся списком Эмулировать CSS-медиа-функцию предпочитает-цветовую-схему.

Обновления покрытия кода

Вкладка Покрытие может помочь вам найти неиспользуемые JavaScript и CSS.

На вкладке «Покрытие» теперь используются новые цвета для обозначения используемого и неиспользуемого кода. Доказано, что эта цветовая комбинация более доступна для людей с нарушениями цветового зрения. Красная полоса слева представляет неиспользованный код, а голубоватая полоса справа представляет использованный код.

Новое текстовое поле фильтр типа покрытия позволяет фильтровать информацию о покрытии по его типу: отображать только покрытие JavaScript, только CSS или отображать все типы покрытия.

На панели «Источники» отображаются данные о покрытии кода, если они доступны. Щелчок по красной или синеватой метке рядом с номером строки открывает вкладку Покрытие и выделяет файл.

Отладка, почему был запрошен сетевой ресурс

После записи сетевой активности выберите сетевой ресурс, а затем перейдите на вкладку Инициатор, чтобы понять, почему был запрошен ресурс. В разделе Стек вызовов запроса описывается стек вызовов JavaScript, ведущий к сетевому запросу.

Примечание. Вы также можете получить доступ к этим данным, наведя курсор на столбец Инициатор в сетевом журнале. Мы добавили вкладку Инициатор, потому что она более доступна.

Панели консоли и источников снова соблюдают настройки отступа

В течение долгого времени DevTools имел настройку для настройки вашего предпочтения отступа до 2 пробелов, 4 пробелов, 8 пробелов или табуляции. В последнее время этот параметр был практически бесполезен, потому что панели «Консоль» и «Источники» игнорировали его. Эта ошибка исправлена.

Перейдите в НастройкиНастройкиИсточникиОтступ по умолчанию, чтобы задать свои предпочтения.

Новые ярлыки для навигации по курсору

Нажмите Control + P на панели «Консоль» или «Источники», чтобы переместить курсор на строку выше. Нажмите Control + N, чтобы переместить курсор в строку ниже.

Рассмотрим канарейку

Если у вас Mac или Windows, подумайте об использовании Chrome Canary в качестве браузера разработки по умолчанию. Canary предоставляет вам доступ к последним функциям DevTools.

Примечание. Canary выпускается сразу после сборки, без тестирования. Это означает, что канарейка ломается примерно раз в месяц. Обычно это устраняется в течение дня. Вы можете вернуться к использованию Chrome Stable, пока Canary не работает.

Подпишитесь на нас в Twitter 🐦 и Facebook 👥 и присоединитесь к нашей группе Facebook 💬 .

Чтобы присоединиться к нашему сообществу Slack 🗣️ и читать наши еженедельные темы о Фавнах 🗞️, нажмите здесь⬇

Если этот пост был полезен, пожалуйста, несколько раз нажмите кнопку хлопка 👏 ниже, чтобы выразить поддержку автору! ⬇