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

Jecelyn Yeen

Панель «Новые медиа»

DevTools теперь отображает информацию о медиаплеерах на панели «Медиа» .

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

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

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

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

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

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

Проблема с хромом: 1100253

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

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

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

Проблемы с хромом: 1096481 , 1068116 , 1080589.

Эмулировать отсутствующие локальные шрифты

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

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

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

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

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

Отключение локальных шрифтов облегчит вам:

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

Проблема с хромом: 384968

Эмулируйте неактивных пользователей

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

Проблема с хромом: 1090802

Эмулировать prefers-reduced-data

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

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

Проблема с хромом: 1096068

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

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

• Операторы логического присваивания . DevTools теперь поддерживает логическое присваивание с помощью новых операторов &&= , ||= и ??= на панелях «Консоль» и «Источники».
• Красивая печать числовых разделителей — DevTools теперь корректно печатает числовые разделители на панели «Источники».

Проблемы с хромом: 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.

Проблема с хромом: 772558

Устаревший список «другие источники» на панели Service Workers.

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

Раньше DevTools отображал список, вложенный в панель «Приложения» > «Сервисные работники» .

Проблема с хромом: 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 issue: 1061385

Новый вид деталей кадра на панели приложения.

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

Проблема с хромом: 1093247

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

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

Проблема с хромом: 1107766

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

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

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

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

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

Доступное предложение цвета на панели «Стили»

DevTools теперь предоставляет варианты цвета для текста с низким цветовым контрастом.

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

Проблема с хромом: 1093227

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

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

Проблема с хромом: 1105205 , 1116085

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

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

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

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

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

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

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

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

Последовательное отображение типа ресурса на панели «Сеть».

DevTools теперь последовательно отображает тот же тип ресурса, что и исходный сетевой запрос, и добавляет / Redirect к значению столбца Type , когда происходит перенаправление (статус 302).

Раньше DevTools иногда менял тип на Other .

Проблема с хромом: 997694

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

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

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

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

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

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

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

• Отправляйте нам отзывы и запросы на добавление новых функций на crbug.com .
• Сообщите о проблеме DevTools, используя more_vert Дополнительные параметры > Справка > Сообщить о проблеме DevTools в DevTools.
• Напишите в Твиттере @ChromeDevTools .
• Оставляйте комментарии к видеороликам YouTube «Что нового в DevTools» или «Советы разработчика» на YouTube .

Что нового в DevTools

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