Анонс новой версии Google Chrome DevTools

В рамках браузера Google Chrome 86 версии, релиз которой намечен на октябрь текущего года, будет доступна новая версия «Инструментов разработчика» (Chrome DevTools).

В ней будут реализованы новые возможности, которые значительно расширят функциональность данного инструмента. Среди ключевых нововведений – новая панель для отладки видео, большее количество доступных эмуляторов, а также улучшенный аудит с помощью Lighthouse 6.2.

О новой панели «Media»

Для того чтобы получить доступ к новой панели, которая позволит осуществлять отладку видео, необходимо будет сделать следующее:

  • Открыть Google Chrome Dev Tools.
  • Кликнуть по значку «три точки», расположенному в правом верхнем углу.
  • Выбрать пункт «Media».

На данной панели будут представлены четыре вкладки:

  • Вкладка Properties, на которой будут отображаться ресурсы медиаплеера.
  • Вкладка Events, на которой будут демонстрироваться все события.
  • Вкладка Messages, которая позволит просматривать журналы сообщений.
  • Вкладка Timeline, которая предоставит возможность просматривать воспроизведение мультимедиа и состояние буфера в режиме реального времени.

О скриншотах узлов

Еще одним важным нововведением станет возможность создания скриншотов узлов. Данная опция будет доступна в контекстном меню панели «Elements».

О новых эмуляторах

Помимо уже привычных, появятся и новые варианты эмуляции. Среди них:

  • Эмулятор отсутствующих локальных шрифтов. Если данная опция включена, то она будет игнорировать шрифты на компьютере и работать так, как будто они отсутствуют.
  • Эмулятор prefers-reduced-data. Данная настройка позволит максимально достоверно имитировать посетителя сайта, в браузере которого активирован режим сохранения данных.

О Lighthouse 6.2

Данное обновление будет включать в себя целый ряд улучшений и исправлений. Среди них и новые проверки:

  • «Избегайте длинных задач в основном потоке». Данная проверка информирует о самых длинных задачах в основном потоке. На практике это весьма полезно при определении элементов, которые больше всего способствуют задержке ввода.
  • «Ссылки доступны для сканирования». Указывает на необходимость убедиться в том, что атрибут href анкорных элементов ссылается на соответствующий пункт назначения. Это необходимо для того чтобы ссылки можно было обнаружить.
  • «Элементы изображения без размера». Эта проверка позволяет убедиться в том, что для элементов изображения корректно задана как ширина, так и высота. Совершенно очевидно, что четко заданный размер изображения позволяет уменьшить смещение макета, а также улучшить CLS.
  • «Избегайте несоставной анимации». Данная проверка информирует о несоставной анимации, которая выглядит неаккуратно и, как следствие, снижает CLS.

Со всеми обновлениями, реализованными в Lighthouse 6.2 можно познакомиться на Github.

Более подробное описание новой версии Google Chrome DevTools доступно здесь.

Меню