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

Кейси Баск
Kayce Basques
X GitHub

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

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

Для начала ознакомьтесь с разделом «Поиск и устранение проблем во вкладке „Проблемы“ в инструментах разработчика Chrome» .

Вкладка «Проблемы».

Ошибка в Chromium: #1068116

Информация о доступности отображается во всплывающей подсказке в режиме «Проверить элемент».

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

Всплывающая подсказка в режиме проверки документов содержит информацию о доступности.

Ошибка в Chromium: #1040025

Обновления панели производительности

Информацию об общем времени блокировки (TBT) можно посмотреть в нижнем колонтитуле.

После записи данных о производительности загрузки, на панели «Производительность» в нижнем колонтитуле отображается информация о общем времени блокировки (TBT). TBT — это метрика производительности загрузки, которая помогает количественно оценить, сколько времени требуется странице, чтобы стать доступной для использования. По сути, она измеряет, как долго страница кажется доступной для использования (поскольку ее содержимое отобразилось на экране), но на самом деле недоступна, потому что JavaScript блокирует основной поток, и поэтому страница не может реагировать на ввод пользователя. TBT является основной лабораторной метрикой для приблизительной оценки задержки первого ввода (First Input Delay), которая является одним из новых показателей Core Web Vitals от Google.

Чтобы получить информацию об общем времени блокировки, не используйте функцию перезагрузки страницы. Перезагрузить страницу Для записи результатов проверки производительности загрузки страницы используйте следующий алгоритм: нажмите «Запись». Записывать Перезагрузите страницу вручную, дождитесь ее загрузки, а затем остановите запись. Если вы видите сообщение Total Blocking Time: Unavailable , это означает, что инструменты разработчика не получили необходимую информацию из внутренних данных профилирования Chrome.

Информация об общем времени выполнения задания отображается в нижней части страницы записи на панели «Производительность».

Ошибка в Chromium: #1054381

События изменения макета в новом разделе «Опыт работы»

Новый раздел «Опыт» на панели «Производительность» поможет вам обнаружить изменения в расположении элементов . Показатель Cumulative Layout Shift (CLS) позволяет количественно оценить нежелательную визуальную нестабильность и является одним из новых ключевых показателей веб-разработки Google.

Щелкните событие «Изменение макета» , чтобы просмотреть подробности изменения макета на вкладке «Сводка» . Наведите курсор на поля «Перемещено из» и «Перемещено в», чтобы увидеть, где произошло изменение макета.

Подробности изменения планировки.

Более точная терминология обещаний в консоли.

При регистрации Promise в консоли раньше отображалось некорректное сообщение о том, что Promise resolved :

Пример использования в консоли старой терминологии «решено».

В консоли теперь используется термин fulfilled , что соответствует спецификации Promise :

Пример использования в консоли новой терминологии «выполнено».

Ошибка V8: #6751

Обновления панели стилей

Поддержка ключевого слова revert

В панели «Стили» функция автозаполнения теперь распознает ключевое слово CSS revert , которое возвращает каскадное значение свойства к тому значению, которое было бы, если бы в стилизацию элемента не вносились изменения.

Установка значения свойства, которое будет возвращено к исходному значению.

Ошибка в Chromium: #1075437

Предварительный просмотр изображений

Наведите курсор на значение background-image в панели «Стили», чтобы увидеть предварительный просмотр изображения во всплывающей подсказке.

Наведение курсора на значение фонового изображения.

Ошибка в Chromium: #1040019

В инструменте выбора цвета теперь используется функциональная цветовая нотация с разделителями-пробелами.

В CSS Color Module Level 4 указано, что цветовые функции, такие как rgb() должны поддерживать аргументы, разделённые пробелами. Например, rgb(0, 0, 0) эквивалентно rgb(0 0 0) .

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

Использование аргументов, разделенных пробелами, на панели «Стили».

Синтаксис также отображается в панели «Вычисления» и во всплывающей подсказке режима «Проверка кода».

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

Синтаксис аргументов, разделённых пробелами, поддерживается большинством браузеров уже некоторое время. См. раздел «Можно ли использовать функциональные обозначения цветов, разделённые пробелами?»

Ошибка в Chromium: #1072952

Прекращение поддержки панели «Свойства» в панели «Элементы».

Панель «Свойства» в панели «Элементы» устарела. Вместо неё используйте команду console.dir($0) в консоли .

Устаревшая панель «Свойства».

Ссылки:

Поддержка ярлыков приложений в панели «Манифест».

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

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

Ярлыки приложений в панели «Манифест».

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

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

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

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

Что нового в инструментах разработчика

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