Эта страница переведена с помощью Cloud Translation API.

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

Kayce Basques

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

Новая вкладка «Проблемы» в ящике призвана помочь уменьшить утомляемость уведомлениями и загромождение консоли . В настоящее время консоль является центральным местом для разработчиков веб-сайтов, библиотек, фреймворков и самого 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`

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

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

Ошибка хрома: #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.

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