Google готовит к запуску обновлённую версию Chrome DevTools

Google Chrome 86, который выйдет в октябре, будет включать в себя обновлённую версию «Инструментов разработчика» (Chrome DevTools).

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

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

            Открыть Chrome Dev Tools
            Нажать на значок в виде трёх точек в правом верхнем углу
            Выбрать «Media»

Эта панель будет содержать четыре вкладки:

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

Скриншоты узлов

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

Новые эмуляторы

Разработчики добавили следующие варианты:

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

Lighthouse 6.2

Это обновление включает ряд улучшений и исправлений, в том числе новые проверки:

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

Со всеми изменениями в Lighthouse 6.2 можно ознакомиться на Github.

Подробное описание обновлённой версии Chrome DevTools доступно по ссылке.

Материалы по теме:

    10 советов по использованию Chrome DevTools для SEO-аудита

Источник: Search Engine Journal