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

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

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

Новая панель «Media»

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

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

open

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

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

media

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

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

nodes

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

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

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

Lighthouse 6.2

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

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

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

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

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

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

Подпишитесь на рассылку SearchEngines

— Статьи мировых экспертов

— Аналитические обзоры

— Важные новости

— Горячие темы с нашего форума

preview Google назвал 4 причины, почему сайт может терять позиции

Google назвал 4 причины, почему сайт может терять позиции

И напомнил, что интернет – это очень динамичная среда
preview Google позволил управлять показом информации о товарах в поиске

Google позволил управлять показом информации о товарах в поиске

Ритейлеры смогут настраивать поисковые сниппеты
preview Apple отменила блокировку приложения WordPress

Apple отменила блокировку приложения WordPress

Ранее компания требовала добавить в него in-app покупки
preview В Squarespace появились данные из Google Search Console

В Squarespace появились данные из Google Search Console

Они будут доступны на панели Search Keywords
preview Google: ключевые слова в URL имеют минимальное влияние после индексации страницы

Google: ключевые слова в URL имеют минимальное влияние после индексации страницы

Поэтому URL нужно создавать для пользователей, а не для SEO