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

Кейси Баски

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

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

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

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

Ошибка хрома: #1068116.

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

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

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

Ошибка хрома: #1040025.

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

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

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

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

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

Ошибка хрома: #1054381.

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

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

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

Детали изменения макета.

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

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

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

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

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

Ошибка V8: #6751

Обновления панели «Стили»

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

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

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

Ошибка хрома: #1075437.

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

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

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

Ошибка хрома: #1040019.

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

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

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

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

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

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

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

Ошибка хрома: #1072952.

Устаревшая панель «Свойства» на панели «Элементы»

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

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

Ссылки:

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

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

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

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

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

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

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

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

Что нового в DevTools

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