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

Кейси Баск
Kayce Basques

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

Выясните причину блокировки cookie.

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

Вкладка «Cookies».

Вкладка «Cookies» .

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

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

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

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

Оценка ценности файла cookie.

Оценка ценности файла cookie.

Выпуск Chromium № 462370

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

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

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

prefers-color-scheme: dark

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

Вы также можете имитировать prefers-reduced-motion: reduce используя выпадающее меню «Emulate CSS media feature prefers-reduced-motion» рядом с выпадающим меню «Emulate CSS media feature 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.

Что нового в инструментах разработчика

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