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

Джеселин Йен

Новые инструменты отладки CSS Flexbox

В DevTools теперь есть специальные инструменты отладки CSS Flexbox!

Инструменты отладки CSS Flexbox

Если к HTML-элементу на странице применено свойство display: flex или display: inline-flex , рядом с ним на панели «Элементы» отображается значок flex . Щелкните по нему, чтобы включить или отключить отображение Flex-наложения на странице.

На панели «Стили» нажмите на новый значок рядом с display: flex или display: inline-flex чтобы открыть редактор Flexbox . Редактор Flexbox обеспечивает быстрое редактирование свойств Flexbox. Попробуйте сами!

Кроме того, на панели «Макет» есть раздел Flexbox , где отображаются все Flexbox-элементы на странице. Вы можете включить или отключить наложение каждого элемента.

Раздел Flexbox на панели «Макет»

Проблемы с Chromium: 1166710 , 1175699

Новый слой Core Web Vitals

Лучшая визуализация и измерение производительности вашей страницы с помощью нового наложения Core Web Vitals.

Core Web Vitals — это инициатива Google, направленная на предоставление единых рекомендаций по качественным сигналам, которые необходимы для обеспечения отличного пользовательского опыта в Интернете.

Откройте меню команд , выполните команду «Показать рендеринг» , а затем установите флажок «Основные веб-показатели» .

В настоящее время наложение отображает:

  • Отрисовка самого большого контента (LCP) : измеряет скорость загрузки . Для обеспечения комфортного пользовательского опыта отрисовка LCP должна происходить в течение 2,5 секунд с момента начала загрузки страницы.
  • Задержка первого ввода (FID) : измеряет интерактивность . Для обеспечения комфортного пользовательского опыта страницы должны иметь FID менее 100 миллисекунд .
  • Кумулятивный сдвиг макета (CLS) : измеряет визуальную стабильность . Для обеспечения комфортного пользовательского опыта страницы должны поддерживать CLS менее 0,1 .

Наложение основных веб-показателей

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

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

Количество проблем перенесено в строку состояния консоли.

В строку состояния консоли добавлена ​​новая кнопка количества проблем, которая улучшает видимость предупреждений о проблемах. Она заменит сообщение о проблеме в консоли .

Количество проблем в строке состояния консоли

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

Сообщить о проблемах с Trusted Web Activity

На вкладке «Проблемы» теперь отображаются сообщения о проблемах с Trusted Web Activity . Это призвано помочь разработчикам выявлять и устранять проблемы Trusted Web Activity на своих сайтах, повышая качество приложений.

Откройте Trusted Web Activity. Затем откройте вкладку «Проблемы» , нажав кнопку « Количество проблем» в строке состояния консоли , чтобы просмотреть список проблем. Посмотрите это выступление Андре, чтобы узнать больше о создании и развертывании Trusted Web Activity.

Проблемы с доверенной веб-активностью на вкладке «Проблемы»

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

Форматировать строки как (допустимые) строковые литералы JavaScript в консоли

Теперь Консоль форматирует строки как допустимые строковые литералы JavaScript. Раньше Консоль не экранировала двойные кавычки при выводе строк.

Форматировать строки как (допустимые) строковые литералы JavaScript

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

Новая панель «Токены доверия» на панели приложений

DevTools теперь отображает все доступные токены доверия в текущем контексте просмотра на новой панели «Токены доверия» под панелью «Приложение» .

Trust Token — это новый API, помогающий бороться с мошенничеством и отличать ботов от реальных людей без пассивного отслеживания. Узнайте, как начать работу с Trust Tokens .

Новая панель токенов доверия

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

Эмулировать медиа-функцию CSS цветовой гаммы

Эмулировать медиа-функцию CSS цветовой гаммы

Медиазапрос color-gamut позволяет проверить приблизительный диапазон цветов, поддерживаемых браузером и устройством вывода. Например, если медиазапрос color-gamut: p3 совпадает, это означает, что устройство пользователя поддерживает цветовое пространство Display-P3.

Откройте меню команд , выполните команду «Показать рендеринг» , а затем настройте раскрывающийся список цветовой гаммы функции «Эмулировать CSS-медиа» .

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

Улучшенный инструментарий Progressive Web Apps

DevTools теперь отображает более подробное предупреждение о возможности установки Progressive Web Apps (PWA) в консоли со ссылкой на документацию .

Предупреждение об установке PWA

На панели «Манифест» теперь отображается предупреждающее сообщение, если длина описания манифеста превышает 324 символа.

Предупреждение об усечении описания PWA

Кроме того, на панели «Манифест» теперь отображается предупреждение, если снимок экрана PWA не соответствует требованиям. Подробнее о свойстве «Снимки экрана PWA» и его требованиях можно узнать здесь.

Предупреждение о скриншоте PWA

Проблемы с хромом: 1146450 , 1169689 , 965802

Новый столбец Remote Address Space на панели «Сеть»

Используйте новый столбец Remote Address Space на панели «Сеть», чтобы просмотреть сетевое IP-адресное пространство каждого сетевого ресурса.

Новый столбец «Удаленное адресное пространство»

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

Улучшения производительности

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

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

Следите за новостями, чтобы увидеть более подробную информацию о реализации этого проекта в инженерном блоге.

Проблемы с Chromium: 1069425 , 1077657

Отображение разрешенных/запрещенных функций в представлении сведений о кадре

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

Политика разрешений — это API веб-платформы, которая дает веб-сайту возможность разрешать или блокировать использование функций браузера в его собственном фрейме или во встроенных им фреймах.

Разрешенные/запрещенные функции на основе политики разрешений

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

Новый столбец SameParty на панели «Файлы cookie»

На панели «Файлы cookie» панели «Приложение» теперь отображается атрибут SameParty для файлов cookie. Атрибут SameParty — это новый логический атрибут, указывающий, следует ли включать файл cookie в запросы к источникам из тех же наборов First-Party Sets .

Колонка SameParty

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

Устаревшая нестандартная поддержка fn.displayName

Поддержка нестандартного fn.displayName прекращена. Вместо него используйте fn.name .

Пример использования displayName

Chrome традиционно поддерживает нестандартное свойство fn.displayName , позволяющее разработчикам управлять отладочными именами функций, отображаемыми в error.stack и в трассировках стека DevTools. В примере выше стек вызовов ранее отображал noLongerSupport .

Замените fn.displayName стандартным fn.name , которое стало настраиваемым (через Object.defineProperty ) в ECMAScript 2015 для замены нестандартного свойства fn.displayName .

Поддержка fn.displayName ненадёжна и неравномерна в разных браузерах. Это замедляет сбор трассировки стека, и разработчики всегда платят за это, независимо от того, используют ли они fn.displayName на самом деле или нет.

Пример использования имени

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

Прекращение поддержки функции « Don't show Chrome Data Saver warning в меню «Настройки»

Параметр Don't show Chrome Data Saver warning удален, поскольку Chrome Data Saver устарел .

Устаревшие настройки «Не показывать предупреждение Chrome Data Saver»

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

Экспериментальные возможности

Автоматическое сообщение о проблемах с низкой контрастностью на вкладке «Проблемы»

В DevTools добавлена ​​экспериментальная поддержка автоматического сообщения о проблемах контрастности на вкладке «Проблемы».

Низкоконтрастный текст — самая распространённая проблема доступности, автоматически обнаруживаемая в интернете. Отображение этих проблем на вкладке «Проблемы» помогает разработчикам легче их выявлять.

Откройте страницу с проблемами низкой контрастности (например, эту демонстрацию ). Затем откройте вкладку «Проблемы» , нажав кнопку « Количество проблем» в строке состояния консоли , чтобы просмотреть их.

Автоматическое сообщение о проблемах с низкой контрастностью

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

Полное представление дерева доступности на панели «Элементы»

Теперь вы можете переключиться, чтобы просмотреть новое и улучшенное древовидное представление полной доступности страницы.

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

После включения эксперимента на панели «Элементы» появится новая кнопка, нажав которую, можно переключиться между существующим деревом DOM и деревом полной доступности.

Обратите внимание, что это всего лишь ранний эксперимент. Мы планируем улучшать и расширять функционал со временем.

Полное представление дерева доступности

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

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

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

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

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

Что нового в DevTools

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