Что нового в DevTools (Chrome 79)

Кейс Баскс

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

Устранение причины блокировки cookie-файла

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

Вкладка «Файлы cookie».

Вкладка «Файлы cookie» .

  • Желтые файлы cookie запроса не были отправлены по сети. Они скрыты по умолчанию. Нажмите «Показать отфильтрованные файлы cookie запроса», чтобы отобразить их.
  • Файлы cookie Yellow Response были отправлены по сети, но не сохранены.
  • Наведите курсор на «Дополнительная информация» информация чтобы узнать, почему был заблокирован файл cookie.
  • Большинство данных в таблицах Request Cookies и Response Cookies поступают из HTTP-заголовков ресурса. Данные Domain , Path и Expires/Max-Age поступают из Chrome DevTools Protocol .

Проблемы с Chromium #856777 , #993843

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

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

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

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

Проблема с хромом #462370

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

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

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

предпочитаемая цветовая схема: темная

Если prefers-color-scheme: dark (среднее поле), на панели «Стили» (правое поле) отображается CSS, который применяется, когда этот медиа-запрос имеет значение true, а в области просмотра отображаются стили темного режима (левое поле).

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

Проблема с хромом #1004246

Эмуляция часового пояса

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

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

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

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

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

Вкладка «Покрытие».

Вкладка «Покрытие».

Панель Sources отображает данные покрытия кода, если они доступны. Щелчок по красным или синим меткам рядом с номером строки открывает вкладку Coverage и выделяет файл.

Данные о покрытии на панели «Источники».

Данные о покрытии на панели «Источники». Строка 8 — пример неиспользуемого кода. Строка 11 — пример используемого кода.

Проблемы с Chromium #1003671 , #1004185

Устранение причины запроса сетевого ресурса

После записи сетевой активности выберите сетевой ресурс, а затем перейдите на вкладку Initiator , чтобы понять, почему был запрошен ресурс. Раздел Request call stack описывает стек вызовов JavaScript, ведущий к сетевому запросу.

Вкладка «Инициатор».

Вкладка « Инициатор» .

Проблемы с хромом 963183 , 842488

Панели «Консоль» и «Источники» снова учитывают настройки отступов.

Долгое время в DevTools была настройка для настройки отступов на 2 пробела, 4 пробела, 8 пробелов или табуляции. Недавно эта настройка была по сути бесполезной, поскольку панели Console и Sources игнорировали ее. Теперь эта ошибка исправлена.

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

Проблема с хромом #977394

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

Нажмите Control+P на панелях Console или Sources, чтобы переместить курсор на строку выше. Нажмите Control+N, чтобы переместить курсор на строку ниже.

Проблема с хромом #983874

Загрузите каналы предварительного просмотра

Рассмотрите возможность использования Chrome Canary , Dev или Beta в качестве браузера для разработки по умолчанию. Эти каналы предварительного просмотра предоставляют вам доступ к новейшим функциям DevTools, позволяют тестировать передовые API веб-платформ и помогают находить проблемы на вашем сайте до того, как это сделают ваши пользователи!

Свяжитесь с командой Chrome DevTools

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

Что нового в DevTools

Список всего, что было рассмотрено в серии «Что нового в DevTools» .