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

Jecelyn Yeen

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

API обнаружения бездействия позволяет разработчикам обнаруживать неактивных пользователей и реагировать на изменения состояния бездействия. Теперь вы можете использовать DevTools для эмуляции изменений состояния бездействия на вкладке «Датчики» как для состояния пользователя, так и для состояния экрана, вместо того, чтобы ждать изменения фактического состояния бездействия. Вкладку «Датчики» можно открыть из 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 теперь предоставляет ссылку для просмотра полного списка сервис-воркеров из других источников в новой вкладке браузера — 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 .
• Оставляйте комментарии в видеороликах YouTube «Что нового в DevTools» или YouTube «Советы по DevTools» .

Что нового в DevTools

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