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

Джеселин Йин

Панельная дискуссия по новым медиа

Теперь в панели «Медиа» в инструментах разработчика отображается информация о медиаплеерах.

Панельная дискуссия по новым медиа

До появления новой панели управления мультимедиа в инструментах разработчика, информацию о видеоплеерах, включая журналы событий и отладочные данные, можно было найти по chrome://media-internals .

Новая панель «Медиа» предоставляет более удобный способ просмотра событий, журналов, свойств и временной шкалы декодирования кадров в той же вкладке браузера, что и сам видеоплеер. Вы можете просматривать видео в режиме реального времени и быстрее выявлять потенциальные проблемы (например, почему происходит выпадение кадров, почему JavaScript взаимодействует с плеером неожиданным образом).

Проблема с Chromium: 1018414

Создавайте снимки экрана узлов через контекстное меню панели «Элементы».

Теперь вы можете делать снимки экрана узлов через контекстное меню на панели «Элементы».

Например, вы можете сделать снимок экрана оглавления, щелкнув правой кнопкой мыши по элементу и выбрав «Сделать снимок экрана узла» .

Сделать снимки экрана узла

Проблема Chromium: 1100253

Обновления вкладки «Проблемы»

Теперь панель предупреждений «Проблемы» на панели консоли заменена обычным сообщением.

Проблемы в сообщении консоли

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

флажком проблемы с файлами cookie третьих сторон

Проблемы Chromium: 1096481 , 1068116 , 1080589

Имитация отсутствующих локальных шрифтов

Откройте вкладку «Рендеринг» и воспользуйтесь новой функцией «Отключить локальные шрифты» , чтобы имитировать отсутствующие источники local() в правилах @font-face .

Например, если на вашем устройстве установлен шрифт "Rubik", и правило @font-face src использует его в качестве local() шрифта, Chrome будет использовать локальный файл шрифта с вашего устройства.

Если параметр «Отключить локальные шрифты» включен, инструменты разработчика игнорируют local() , и загружают их из сети.

Имитация отсутствующих локальных шрифтов

Нередко разработчики и дизайнеры используют две разные копии одного и того же шрифта в процессе разработки:

  • Локальный шрифт для ваших инструментов дизайна, и
  • Веб-шрифт для вашего кода

Отключение локальных шрифтов упростит вам выполнение следующих действий:

  • Отладка и измерение производительности загрузки веб-шрифтов, а также оптимизация.
  • Проверьте правильность правил CSS @font-face
  • Найдите различия между веб-шрифтами и их локальными версиями.

Номер выпуска Chromium: 384968

Имитация неактивных пользователей

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

Имитация неактивных пользователей

Проблема Chromium: 1090802

Emulate prefers-reduced-data

Медиазапрос prefers-reduced-data определяет, предпочитает ли пользователь получать альтернативный контент, который использует меньше данных для отображения страницы.

Теперь вы можете использовать DevTools для эмуляции медиа-запроса prefers-reduced-data .

Emulate prefers-reduced-data

Проблема Chromium: 1096068

Поддержка новых функций JavaScript

В инструментах разработчика теперь улучшена поддержка некоторых новейших функций языка JavaScript:

Проблемы Chromium: 1086817 , 1080569

Маяк 6.2 на панели «Маяк»

В панели Lighthouse теперь используется Lighthouse 6.2. Полный список изменений см. в примечаниях к выпуску .

Увеличить размер изображения

В Lighthouse 6.2 появились новые функции аудита:

  • Избегайте длительных задач в основном потоке . Сообщает о самых длительных задачах в основном потоке, что полезно для выявления основных причин задержки ввода.
  • Ссылки доступны для индексации . Проверьте, ведет ли атрибут href элементов привязки к соответствующему ресурсу, чтобы ссылки могли быть обнаружены.
  • Элементы изображений без указания размера — проверьте, заданы ли явно width и height для элементов изображений. Явное указание размера изображения может уменьшить смещения макета и улучшить CLS.
  • Избегайте некомпозитных анимаций . Сообщает о некомпозитных анимациях , которые выглядят некачественно и снижают CLS.
  • Отслеживает события unload . Сообщает о событии unload . Рекомендуется использовать события pagehide или visibilitychange , поскольку событие unload срабатывает ненадежно.

В Lighthouse 6.2 обновлены аудиты:

  • Удалите неиспользуемый JavaScript . Теперь Lighthouse улучшит аудит, если страница содержит общедоступные карты исходного кода JavaScript.

Номер выпуска Chromium: 772558

Удалена возможность отображения раздела «другие источники происхождения» в панели «Работники сферы услуг».

В инструментах разработчика теперь можно открыть ссылку для просмотра полного списка сервис-воркеров из других источников в новой вкладке браузера: chrome://serviceworker-internals/?devtools .

Ранее в инструментах разработчика отображался список, вложенный в панель «Приложения» > панель «Сервисные работники» .

Ссылка на другие источники

Проблема с Chromium: 807440

Показать сводку покрытия для отфильтрованных элементов

Теперь DevTools динамически пересчитывает и отображает сводку информации о покрытии кода при применении фильтров на вкладке «Покрытие» . Ранее на вкладке «Покрытие» всегда отображалась сводка всей информации о покрытии.

В приведенном ниже примере обратите внимание, что в сводке изначально указано 446 kB of 2.0 MB (22%) used so far. 1.5 MB unused. а затем — 57 kB of 604 kB (10%) used so far. 546 kB unused. после применения CSS-фильтрации.

Сводка по покрытию для отфильтрованных элементов

Проблема с Chromium: 1061385

Новый режим просмотра сведений о фрейме в панели приложений.

В инструментах разработчика теперь отображается подробное представление каждого кадра. Доступ к нему можно получить, щелкнув кадр в меню «Кадры» на панели «Приложение» .

Новый режим просмотра сведений о фрейме в панели приложений.

Номер выпуска Chromium: 1093247

Детали рамы для открытых окон

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

Детали открытой оконной рамы

Проблема Chromium: 1107766

Информация о безопасности и изоляции (COEP / COOP)

В инструментах разработчика теперь в сведениях о фрейме отображаются защищенный контекст, политика Cross-Origin-Embedder-Policy (COEP) и политика Cross-Origin-Opener-Policy (COOP) .

Информация о безопасности и изоляции

В ближайшее время в окно сведений о фрейме будет добавлена ​​дополнительная информация о безопасности.

Проблема с Chromium: 1051466

Обновления панелей «Элементы» и «Сеть».

Доступные варианты цветовых решений в панели «Стили».

В инструментах разработчика теперь отображаются цветовые рекомендации для текста с низким цветовым контрастом.

В приведенном ниже примере заголовок h1 имеет низкий контраст. Чтобы это исправить, откройте палитру цветов свойства color на панели «Стили». После того, как вы развернете раздел « Коэффициент контрастности» , инструменты разработчика предложат варианты цветов AA и AAA. Щелкните по предложенному цвету, чтобы применить его.

Номер выпуска Chromium: 1093227

Восстановить свойства (панель «Элементы»)

Панель «Свойства» вернулась, она была устарела в Chrome 84. В будущей версии DevTools мы улучшим рабочий процесс проверки свойств элементов.

Панель свойств в панели «Элементы».

Проблемы Chromium: 1105205 , 1116085

Удобочитаемые значения заголовка X-Client-Data на панели «Сеть».

При проверке сетевого ресурса на панели «Сеть» инструменты разработчика теперь форматируют любые значения заголовка X-Client-Data на панели «Заголовки» как код.

HTTP-заголовок X-Client-Data содержит список идентификаторов экспериментов и флагов Chrome, включенных в вашем браузере. Исходные значения заголовка выглядят как непрозрачные строки, поскольку они представляют собой закодированные в Base64 сериализованные буферы протокола . Чтобы сделать содержимое более понятным для разработчиков, в инструментах разработчика теперь отображаются декодированные значения.

Удобочитаемые значения заголовка `X-Client-Data`

Проблема с Chromium: 1103854

Автозаполнение пользовательских шрифтов в панели «Стили».

Теперь импортированные шрифты добавляются в список автозаполнения CSS при редактировании свойства font-family на панели «Стили» .

В этом примере 'Noto Sans' — это пользовательский шрифт, установленный на локальном компьютере. Он отображается в списке автозаполнения CSS. Ранее он там не отображался.

Автозаполнение пользовательских шрифтов

Проблема с Chromium: 1106221

Единообразное отображение типа ресурса на панели «Сеть»

Теперь в инструментах разработчика отображается тот же тип ресурса, что и в исходном сетевом запросе, и к значению столбца «Тип» добавляется / Redirect при перенаправлении (статус 302).

Ранее в инструментах разработчика тип иногда менялся на Other .

Отображение типа ресурса перенаправления

Номер выпуска Chromium: 997694

Кнопки очистки на панелях «Элементы» и «Сеть»

В полях фильтра на панелях «Стили» и «Сеть» , а также в поле поиска DOM на панели «Элементы» теперь есть кнопки «Очистить» . Нажатие кнопки «Очистить» удаляет весь введенный текст.

Кнопки очистки на панелях «Элементы» и «Сеть»

Проблема с Chromium: 1067184

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

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

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

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

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

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