Chrome представляет новый инструмент отладки в сборнике Canary, помогая разработчикам выявлять и исправлять проблемы стабильности макета веб-сайта.
- Chrome Canary добавил новую функцию «Виновники изменения макета», которая визуально определяет проблемы макета страницы.
- Теперь разработчики могут видеть и воспроизводить изменения макета в реальном времени, чтобы точно определить конкретные проблемы.
- В будущем выпуске инструмент будет перенесен из Chrome Canary на обычный Chrome, хотя дата не сообщается.
Команда разработчиков Chrome представила новую функцию для своего инструментария разработчика, которая устраняет изменения макета, влияющие на производительность веб-сайта.
Функция Layout Shift Culprits, доступная в сборниках Canary, улучшает возможности настройки для совокупного смещения макета (CLS).
Это знаменует заметное улучшение в этой сфере за последние годы.
Ключевые детали
Новый интерфейс отладки работает в Chrome’s Insights Panel, предоставляя разработчикам:
- Визуализация событий изменения компоновки в реальном времени
- Покадровое воспроизведение случаев сдвига
- Автоматизированная идентификация наиболее влиятельных кластеров сдвига
- Визуальное наложение, подсвечивающее пораженные элементы страницы
- Детальная метрика для каждого события изменения
Консультант по веб-программе Сандер ван Сурксум, который сначала поделился подробностями об этой функции, заметил, что разработчики могут наводить курсор мыши на обнаруженные проблемные области, чтобы увидеть изменения макета в действии.
Эта визуализация облегчает определение точных проблем, влияющих на стабильность страницы.
Контекст
Это событие важно, поскольку CLS является ключевым показателем в Google’s Core Web Vitals.
CLS измеряет визуальную стабильность, воздействуя на:
- Взаимодействие с пользователем
- Поисковые рейтинги
- Мобильные возможности
- Оценки производительности страницы
Барри Поллард, защитник веб-разработчиков Google Chrome, отметил эту функцию как часть недавних усовершенствований DevTools.
Этот инструмент может стать важным ресурсом для оптимизации рабочих процессов.
Практические применения
Разработчики могут использовать новую функцию, чтобы:
- Определите проблемное внедрение стороннего контента
- Настройка проблем с загрузкой динамического содержимого
- Оптимизация размещения рекламы
- Улучшить стратегии загрузки медиа-элементов
- Точно настроить реализацию отложенной загрузки
Взгляд вперед
Эта функция, которая теперь доступна в Chrome Canary, может влиять на то, как разработчики оптимизируют производительность после достижения стабильных версий Chrome.
Предлагает мгновенную визуальную обратную связь при изменении макета, что делает отладку производительности более эффективной.
Разработчики могут загрузить Chrome Canary отдельно от стабильного браузера Chrome, чтобы протестировать обе версии одновременно.