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

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

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

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

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

На панели «Стили» вы можете щелкнуть новый значок рядом с display: flex или display: inline-flex чтобы открыть редактор Flexbox . Редактор 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 в консоли. Раньше консоль не экранировала двойные кавычки при печати строк.

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

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

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

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

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

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

Проблема с хромом: 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 собирает трассировки стека и прикрепляет их к сообщениям консоли или асинхронным задачам для последующего использования разработчиком в случае возникновения проблемы. Поскольку этот сбор должен происходить синхронно в движке браузера, медленный сбор трассировки стека может значительно замедлить работу страницы с открытыми DevTools. Нам удалось значительно сократить затраты на сбор трассировки стека.

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

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

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

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

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

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

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

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

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

Столбец 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» .