Отладка проблем, связанных с прокруткой, стала проще с новым значком прокрутки DevTools! В этом посте объясняется, что такое прокручиваемые элементы, почему их может быть трудно найти и как эта новая функция помогает быстро их найти. Мы также познакомим вас за кулисами, чтобы увидеть, как мы разработали значок прокрутки.
Что такое прокручиваемый элемент?
Если вы можете прокручивать содержимое внутри элемента, это прокручиваемый элемент (или контейнер прокрутки ). Не имеет значения, есть ли у него полосы прокрутки или нет.
Почему трудно найти прокручиваемый элемент?
Отладка проблем с прокруткой сложна. Без инструмента для четкого отображения прокручиваемого элемента легко заблудиться, особенно на сложных страницах, где нет полос прокрутки.
Поиск прокручивающегося элемента вручную может оказаться утомительным процессом проб и ошибок:
- Вы выбираете элемент и изменяете его стили.
- Полоса прокрутки исчезла? Если нет, вы повторяете процесс.
Представляем значок прокрутки
В Chrome 130 вы можете использовать новый значок прокрутки на панели «Элементы» , чтобы найти прокручиваемые элементы!
Например, в следующем примере попробуйте определить, какой элемент вызывает появление полос прокрутки, используя новый значок прокрутки.
Техническая реализация нового значка прокрутки
За кулисами реализация разделена на две части:
- Определение прокручиваемых элементов . Используйте сигналы
Blink's(движок рендеринга Chrome), чтобы идентифицировать элементы, которые можно прокручивать или которые стали прокручиваемыми из-за изменений на странице. - Отображение значка прокрутки . После получения сигналов мы добавляем новый значок (похожий на существующие значки сетки ) рядом с прокручиваемыми элементами на панели «Элементы» .
Идентификация прокручиваемых элементов
Чтобы идентифицировать прокручиваемые элементы, мы использовали метод IsUserScrollable в Blink. Этот метод определяет, прокручивается ли узел, проверяя, не выходит ли он за пределы по оси X или Y, что указывает на то, что содержимое превышает размеры контейнера и его можно прокручивать. Мы вызываем этот метод каждый раз, когда в DevTools загружается новый элемент, чтобы идентифицировать прокручиваемые контейнеры.
Для динамического обновления состояния прокрутки уже загруженных элементов нам пришлось углубиться в кодовую базу механизма рендеринга Blink, чтобы отслеживать, где добавляется или удаляется область прокрутки для узла.
Переполнение базовой логики управляется компонентом PaintLayerScrollableArea . В частности, метод UpdateScrollableAreaSet отвечает за обнаружение возникновения или устранения переполнения.
Эта информация передается в серверную часть DevTools путем отправки ссылки на узел, который изменил свою ScrollableArea .
Затем серверная часть повторно проверяет узел, используя метод IsUserScrollable , чтобы получить его новое состояние. После проверки возможности прокрутки сигнал отправляется во внешний интерфейс с использованием Chrome DevTools Protocol , гарантируя, что пользовательский интерфейс точно отражает изменения в прокручиваемом контенте.
Отображение значка прокрутки
Чтобы добавить новый значок в интерфейс DevTools, мы создали метод-обработчик в ElementsTreeOutline , который получил nodeId элемента, который изменил свое состояние прокрутки с помощью события. В этом обработчике мы извлекаем объект ElementsTreeElement используя nodeId , и указываем ему обновить значок прокрутки.
Обновление значка прокрутки включает в себя проверку возможности прокрутки элемента и наличие у него значка прокрутки. Исходя из этих условий, предпринимаются следующие действия:
- Если элемент доступен для прокрутки и еще не имеет значка прокрутки, он добавляется.
- Если элемент не прокручивается, но имеет значок прокрутки, существующий значок удаляется.
Специальная логика для обработки прокручиваемого документа верхнего уровня.
Когда документ верхнего уровня доступен для прокрутки, у нас есть особый случай, поскольку мы не отображаем элемент #document для основного документа — только для iframe. В результате мы не можем отображать значок непосредственно на элементах #document .
Вместо этого мы решили отображать значок прокрутки на элементе </html> , в том числе в Quirks mode , где document.scrollingElement() возвращает <body> или null . Это решение предотвращает путаницу между прокручиваемыми документами и прокручиваемыми элементами тела, особенно на страницах, где тело можно прокручивать независимо.
Мы обнаружили, что это самый понятный способ показать разработчикам, какие элементы можно прокручивать.
Изменения протокола Chrome DevTools (CDP)
Для интеграции нового значка прокрутки потребовались изменения в Chrome DevTools Protocol (CDP) . CDP служит протоколом связи между DevTools и Chrome.
Нам пришлось изменить протокол, чтобы охватить два случая:
- Можно ли прокручивать этот узел, когда он загружен в DevTools?
- Обновил ли этот узел свое состояние прокрутки?
Можно ли прокручивать этот узел, когда он загружен в DevTools?
Мы добавили новое свойство с именем isScrollable к типу данных DOM.Node , которое отправляется каждый раз, когда новый узел загружается в интерфейс DevTools.
Мы решили заполнять это свойство только в том случае, если оно истинно, чтобы избежать загрузки ненужных данных. Поэтому, когда свойство не отправляется, мы предполагаем, что элемент не прокручивается.
Обновил ли этот узел свое состояние прокрутки?
Чтобы определить, обновил ли узел свое состояние прокрутки, мы ввели в CDP новое событие scrollableFlagUpdated , которое срабатывает всякий раз, когда элемент получает или теряет область прокрутки. Мероприятие имеет следующую структуру:
# Fired when a node's scrollability state changes.
experimental event scrollableFlagUpdated
parameters
# The id of the node.
DOM.NodeId nodeId
# If the node is scrollable.
boolean isScrollable
Совет для профессионалов: изучите новые изменения CDP в своем браузере.
Если вам интересно, как Chrome взаимодействует с DevTools, есть простой способ изучить это.
Панель «Монитор протокола» позволяет просматривать в реальном времени события, которыми обмениваются Chrome и DevTools, включая недавно добавленное событие для значка прокрутки. Например, когда вы изменяете стиль элемента, влияющий на его прокручиваемость, вы можете сразу увидеть связанные события CDP по мере их возникновения.
Более подробное руководство см. в Protocol monitor: View and send CDP requests .
Помимо прокрутки: представляем значок переполнения
Более того, мы работаем над новым значком переполнения, чтобы точно определить причину этой прокрутки. Этот значок появится рядом с элементами, которые выходят за пределы контейнера, что поможет вам быстро диагностировать проблемы с макетом.
Вот как это будет работать:
- Интерактивная отладка . Щелкните значок прокрутки, чтобы вызвать команду протокола DevTools, которая идентифицирует переполненные дочерние элементы.
- Визуализация переполнения . Мы нанесем на карту границы элементов внутри прокручиваемого контейнера, чтобы обнаружить любое переполнение.
- Выделение виновника . Значок переполнения будет отмечать эти переполненные элементы, и щелчок по нему выделит их непосредственно в DOM.
Это даст разработчикам новый мощный инструмент для понимания и устранения проблем с макетом, вызванных переполнением контента. Мы считаем, что этот более глубокий уровень анализа значительно упростит ваш рабочий процесс отладки.