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

Кейс Баскс
Kayce Basques
X GitHub

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

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

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

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

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

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

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

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

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

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

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

Проблема с Chromium № 462370

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

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

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

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

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

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

Проблема с Chromium № 1004246

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Проблема с Chromium № 977394

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

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

Проблема с Chromium № 983874

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

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

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

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

Что нового в DevTools

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