Google Chrome – Что нового в DevTools (Chrome 84) — Chrome World по-русски

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

Исправьте проблемы с сайтом с помощью новой вкладки “Проблемы”

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

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

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

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

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

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

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

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

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

Для того, чтобы получить Total Блокирующей информации о времени, не используйте Перезагрузить страницу

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

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

рабочего процесса для выполнения загрузки страницы записи. Вместо этого нажмите «Запись»

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Превью изображений

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

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

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

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

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

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

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

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

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

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

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

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

Ссылки:

  • console.dir()
  • $0

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

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

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

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