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

Jecelyn Yeen

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

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

Когда к элементу HTML на вашей странице применен display: flex или display: inline-flex , вы можете увидеть значок flex рядом с ним на панели Elements. Щелкните значок, чтобы переключить отображение наложения flex на странице.

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

Кроме того, панель Layout имеет раздел 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. Затем откройте вкладки Issues , нажав кнопку Issues count в строке состояния Console , чтобы просмотреть проблемы. Посмотрите это выступление Андре, чтобы узнать больше о том, как создать и развернуть Trusted Web Activity.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Кроме того, панель Manifest теперь показывает предупреждающее сообщение, если снимок экрана PWA не соответствует требованиям. Узнайте больше о свойстве снимков экрана PWA и его требованиях здесь.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Chrome традиционно поддерживал нестандартное свойство fn.displayName как способ для разработчиков контролировать имена отладки для функций, которые отображаются в error.stack и в трассировках стека DevTools. В приведенном выше примере Call Stack ранее отображал 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 устарел .

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Что нового в DevTools

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