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

Kayce Basques

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

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

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

Ошибка Chromium: #1068116

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

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

Ошибка Chromium: #1040025

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

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

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

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

Ошибка Chromium: #1054381

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

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

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

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

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

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

Ошибка V8: #6751

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

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

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

Ошибка Chromium: #1075437

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

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

Ошибка Chromium: #1040019

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

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

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

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

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

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

Ошибка Chromium: #1072952

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

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

Ссылки:

• console.dir()
• $0

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

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

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

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

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

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

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

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

Что нового в DevTools

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