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

Кейси Баски

Новые возможности файлов cookie

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

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

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

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

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

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

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

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

Просмотр значения cookie.

Просмотр значения cookie.

Проблема с хромом № 462370.

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

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

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

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

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

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

Проблема с хромом № 1004246.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Проблема с хромом № 977394.

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

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

Проблема с хромом № 983874.

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

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

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

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

Что нового в DevTools

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

,

Кейси Баски

Новые возможности файлов cookie

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

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

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

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

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

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

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

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

Просмотр значения cookie.

Просмотр значения cookie.

Проблема с хромом № 462370.

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

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

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

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

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

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

Проблема с хромом № 1004246.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Проблема с хромом № 977394.

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

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

Проблема с хромом № 983874.

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

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

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

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

Что нового в DevTools

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