«
»
GoogleGoogle Chrome

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

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

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

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

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

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

Что нового в DevTools (Chrome 84) | Интернет | Разработчики Google

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

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

Что нового в DevTools (Chrome 84) | Интернет | Разработчики Google

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

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

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

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

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

Что нового в DevTools (Chrome 84) | Интернет | Разработчики Google

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

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

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

Что нового в DevTools (Chrome 84) | Интернет | Разработчики Google

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

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

Что нового в DevTools (Chrome 84) | Интернет | Разработчики Google

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

Что нового в DevTools (Chrome 84) | Интернет | Разработчики Google

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

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

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

Что нового в DevTools (Chrome 84) | Интернет | Разработчики Google

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

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

Что нового в DevTools (Chrome 84) | Интернет | Разработчики Google

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

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

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

Что нового в DevTools (Chrome 84) | Интернет | Разработчики Google

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

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

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

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

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

Что нового в DevTools (Chrome 84) | Интернет | Разработчики Google

Ссылки:

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

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

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

Что нового в DevTools (Chrome 84) | Интернет | Разработчики Google

Источник записи: https://developers.google.com

Связанные записи
Google ChromeWindows инструкции

Vivaldi, браузер с вертикальными вкладками для опытных пользователей

GoogleGoogle AdsensePageSpeed Insights

Как настроить отложенную загрузку для рекламных блоков Google AdSense?

GoogleGoogle AdsensePageSpeed Insights

6 способов повысить скорость загрузки страниц сайта AdSense »WebNots

GoogleGoogle AnalyticsPageSpeed Insights

Google Tag Manager vs Page Speed | Диспетчер тегов Google и скорость страницы: влияние и способы улучшения