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

Jecelyn Yeen

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Сообщать о проблемах с доверенной веб-активностью

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

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

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

Отформатируйте строки как (допустимые) строковые литералы JavaScript в консоли.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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 устарела .

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

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

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

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

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

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

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

Полное древовидное представление специальных возможностей на панели «Элементы».

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

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

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

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

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

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

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

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

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

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

Что нового в DevTools

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