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

Кейс Баскс

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

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

Чтобы начать работу, ознакомьтесь с разделом Поиск и устранение проблем с помощью вкладки «Проблемы» в Chrome DevTools .

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

Ошибка Chromium: #1068116

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

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

Подсказка режима проверки с информацией о доступности.

Ошибка Chromium: #1040025

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

Просмотр информации об общем времени блокировки (TBT) в нижнем колонтитуле

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

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

Информация об общем времени блокировки в нижнем колонтитуле записи панели производительности.

Ошибка Chromium: #1054381

События Layout Shift в новом разделе Experience

Новый раздел «Впечатления» на панели «Производительность» поможет вам обнаружить сдвиги макета . Накопительный сдвиг макета (CLS) — это метрика, которая может помочь вам количественно оценить нежелательную визуальную нестабильность и является одним из новых показателей Core Web Vitals от Google.

Нажмите на событие Layout Shift , чтобы увидеть подробности смены макета на вкладке Summary . Наведите указатель мыши на поля Moved from и Moved to, чтобы увидеть, где произошел сдвиг макета.

Детали смены макета.

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

При регистрации Promise консоль неправильно описывала состояние Promise как resolved :

Пример консоли, использующей старую терминологию «разрешено».

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

Пример консоли, использующей новую «выполненную» терминологию.

Ошибка V8: #6751

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

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

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

Установка значения свойства для возврата.

Ошибка Chromium: #1075437

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

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

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

Ошибка Chromium: #1040019

Color Picker теперь использует функциональную цветовую нотацию, разделенную пробелами.

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

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

Использование разделенных космических аргументов на панели Styles.

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

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

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

Ошибка Chromium: #1072952

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

Панель свойств на панели элементов устарела. Вместо этого запустите console.dir($0) в консоли .

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

Ссылки:

Поддержка ярлыков приложений на панели манифеста

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

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

Ярлыки приложений на панели манифеста.

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

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

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

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

Что нового в DevTools

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