Nowa plakietka przewijania w DevTools ułatwia debugowanie problemów związanych z przewijaniem. Z tego wpisu dowiesz się, czym są elementy przewijane, dlaczego mogą być trudne do znalezienia i jak nowa funkcja pomoże Ci je szybko zlokalizować. Pokażemy Ci też, jak powstała plakietka przewijania.
Czym jest element przewijany?
Jeśli możesz przewijać zawartość elementu, jest to element, który można przewijać (lub kontener do przewijania). Nie ma znaczenia, czy ma suwaki przewijania.
Dlaczego trudno jest znaleźć element, który można przewijać?
Debugowanie problemów z przewijaniem jest trudne. Bez narzędzia, które wyraźnie pokazuje element do przewijania, łatwo się pogubić, zwłaszcza na złożonych stronach, na których nie ma pasków przewijania.
Ręczne znajdowanie elementu, który się przewija, może być żmudnym procesem prób i błędów:
- Wybierasz element i modyfikujesz jego style.
- Czy pasek przewijania zniknął? W przeciwnym razie powtórz proces.
Przedstawiamy plakietkę na pasku przewijania
W Chrome 130 możesz używać nowego plakietki przewijania w panelu Elementy, aby znajdować elementy, które można przewijać.
Na przykład za pomocą nowej plakietki przewijania spróbuj znaleźć element, który powoduje wyświetlanie pasków przewijania w poniższym przykładzie.
Techniczne wdrożenie nowego plakietki
Wdrożenie jest podzielone na 2 części:
- Identyfikowanie elementów, które można przewijać. Używaj sygnałów
Blink’s(silnika renderowania Chrome), aby identyfikować elementy, które można przewijać lub które stały się przewijalne z powodu zmiany na stronie. - Wyświetlanie plakietki na pasku przewijania Po otrzymaniu sygnałów umieszczamy nowe logo (podobne do dotychczasowych siatek) obok elementów, które można przewijać w panelu Elementy.
Identyfikowanie elementów przewijanych
Aby zidentyfikować elementy, które można przewijać, wykorzystaliśmy metodę IsUserScrollable w Blink. Ta metoda określa, czy węzeł jest przewijany, sprawdzając, czy wykracza poza oś X lub Y, co oznacza, że zawartość wykracza poza wymiary kontenera i można ją przewijać. Metodę tę wywołujemy za każdym razem, gdy w Narzędziach deweloperskich wczytuje się nowy element, aby zidentyfikować przewijalne kontenery.
Aby dynamicznie aktualizować stan przewijania elementów, które zostały już załadowane, musieliśmy dokładnie zbadać kod źródłowy silnika renderowania Blink, aby śledzić, gdzie dodawane lub usuwane jest obszar przewijania węzła.
Logiką podstawową, która obsługuje przepełnienie, zarządza komponent PaintLayerScrollableArea. W szczególności metoda UpdateScrollableAreaSet odpowiada za wykrywanie, kiedy wystąpiło przepełnienie lub zostało ono rozwiązane.
Te informacje są przekazywane do backendu DevTools przez wysłanie odwołania do węzła, który zmienił ScrollableArea.
Następnie backend ponownie sprawdza węzeł za pomocą metody IsUserScrollable, aby uzyskać jego nowy stan. Po sprawdzeniu możliwości przewijania sygnał jest wysyłany do front-endu za pomocą Chrome DevTools Protocol, co zapewnia, że interfejs użytkownika dokładnie odzwierciedla zmiany w przewijanym tekście.
Wyświetlanie plakietki podczas przewijania
Aby dodać nową plakietkę w interfejsie Narzędzi deweloperskich, utworzyliśmy metodę obsługi w ElementsTreeOutline, która otrzymała identyfikator węzła elementu, którego stan przewijania zmienił się w wyniku zdarzenia.
W tym obiekcie pobieramy obiekt ElementsTreeElement za pomocą funkcji nodeId i dajemy mu instrukcje dotyczące aktualizowania plakietki przewijania.
Aktualizacja plakietki przewijania polega na sprawdzeniu, czy element jest przewijany i czy ma już plakietkę przewijania. W zależności od tych warunków podejmowane są następujące działania:
- Jeśli element jest przewijany i nie ma jeszcze plakietki przewijania, zostanie ona dodana.
- Jeśli element nie jest przewijany, ale ma plakietkę przewijania, istniejąca plakietka zostanie usunięta.
Specjalna logika do obsługi przewijanego dokumentu najwyższego poziomu
Gdy dokument najwyższego poziomu można przewijać, mamy do czynienia ze szczególnym przypadkiem, ponieważ nie wyświetlamy elementu #document w przypadku dokumentu głównego, tylko w przypadku ramek iframe. W związku z tym nie możemy wyświetlać plakietki bezpośrednio na elementach #document
Postanowiliśmy wyświetlać plakietkę przewijania na elemencie </html>, w tym w elementach Quirks mode, w których funkcja document.scrollingElement() zwraca wartość <body> lub null. Ta decyzja zapobiega myleniu dokumentów z przewijanymi elementami w polu, zwłaszcza na stronach, na których można niezależnie przewijać pole.
Uznaliśmy, że jest to najprostszy sposób na pokazanie deweloperom, które elementy można przewijać.
Zmiany w protokole Chrome DevTools (CDP)
Aby zintegrować nową plakietkę przewijania, konieczne były zmiany w Chrome DevTools Protocol (CDP). CDP służy jako protokół komunikacji między narzędziami deweloperskimi a Chrome.
Musieliśmy zmienić protokół, aby uwzględnić 2 przypadki:
- Czy ten węzeł można przewijać, gdy jest wczytany w Narzędziach deweloperskich?
- Czy stan przewijania tego węzła został zaktualizowany?
Czy ten węzeł można przewijać, gdy jest wczytany w Narzędziach deweloperskich?
Do typu danych DOM.Node dodaliśmy nową właściwość o nazwie isScrollable, która jest wysyłana za każdym razem, gdy w interfejsie DevTools ładuje się nowy węzeł.
Aby uniknąć wczytywania niepotrzebnych danych, zdecydowaliśmy się wypełniać tę właściwość tylko wtedy, gdy jest ona prawdziwa. Dlatego, gdy nie jest ona wysyłana, zakładamy, że element nie jest przewijany.
Czy stan przewijania tego węzła został zaktualizowany?
Aby wykrywać, czy stan przewijania węzła uległ zmianie, wprowadziliśmy w CDP nowe zdarzenie scrollableFlagUpdated, które jest aktywowane, gdy element zyskuje lub traci obszar przewijania. Ma ono następującą strukturę:
# 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
Wskazówka: sprawdź nowe zmiany w CDP w przeglądarce
Jeśli chcesz dowiedzieć się, jak Chrome komunikuje się z Narzędziami deweloperskimi, możesz to łatwo sprawdzić.
Panel Monitorowanie protokołu umożliwia wyświetlanie w czasie rzeczywistym zdarzeń wymienianych między Chrome i DevTools, w tym nowo dodanego zdarzenia dotyczącego plakietki przewijania. Jeśli na przykład zmodyfikujesz styl elementu, który wpływa na jego przewijalność, możesz od razu zobaczyć powiązane zdarzenia CDP w miarę ich występowania.
Bardziej szczegółowy przewodnik znajdziesz w artykule Protocol monitor: View and send CDP requests.
Beyond Scrolling: przedstawiamy plakietkę przepełnienia
Co więcej, pracujemy nad nowym znacznikiem przepełnienia, który pozwoli określić przyczynę przewijania. Ta plakietka będzie się pojawiać obok elementów, które wystają poza kontener, co ułatwia szybkie diagnozowanie problemów z układem.
Jak to działa:
- Interaktywny debugowanie. Kliknij plakietkę przewijania, aby wywołać polecenie DevTools Protocol, które wskazuje elementy podrzędne, które się wylewają.
- Wizualizacja przepełnienia. Odpowiednio do tego zmapujemy granice elementu w kontenerze, którego zawartość można przewijać, aby wykryć ewentualne przepełnienia.
- Wyróżnianie winowajcy Plakietka przepełnienia oznacza te elementy, a kliknięcie powoduje ich wyróżnienie bezpośrednio w DOM.
Dzięki temu deweloperzy będą mieli nowe, potężne narzędzie do analizowania i rozwiązywania problemów z układem spowodowanych przez przepełnione treści. Wierzymy, że ten bardziej szczegółowy poziom analizy znacznie usprawni proces debugowania.