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

Jecelyn Yeen

Новая медиа панель

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

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

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

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

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

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

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

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

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

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

Проблемы с сторонними файлами cookie теперь по умолчанию скрыты на вкладке Issues. Включите новый флажок Include third-party cookie issues, чтобы просмотреть их.

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

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

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

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

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

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

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

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

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

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

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

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

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

Эмуляция prefers-reduced-data

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

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

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

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

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

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

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

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

Прекращение использования списка «другие источники» на панели Service Workers

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

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

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

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

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

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

Проблема с хромом: 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, которые включены в вашем браузере. Необработанные значения заголовка выглядят как непрозрачные строки, поскольку они представляют собой закодированные в base-64, сериализованные буферы протокола . Чтобы сделать содержимое более прозрачным для разработчиков, 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 .
• Оставляйте комментарии к видео «Что нового в DevTools» на YouTube или к видео «Советы по DevTools» на YouTube .

Что нового в DevTools

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