Nowy znacznik 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ć. Zajrzyj też za kulisy, aby dowiedzieć się, jak opracowaliśmy plakietkę przewijania.
Czym jest element przewijany?
Jeśli możesz przewijać zawartość elementu, jest to element, który można przewijać (czyli kontener przewijania). Nie ma znaczenia, czy ma suwaki przewijania.
Dlaczego trudno jest znaleźć element, który można przewijać?
Rozwiązywanie 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 znalezienie przewijanego elementu może być uciążliwe, metodą 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żyć nowej plakietki przewijania w panelu Elementy, by znaleźć elementy, które można przewijać.
W poniższym przykładzie spróbuj na przykład znaleźć element, który powoduje wyświetlanie pasków przewijania, korzystając z nowej plakietki przewijania.
Techniczne wdrożenie nowego plakietki
Wdrożenie jest podzielone na 2 części:
- Identyfikowanie elementów, które można przewijać. Użyj sygnałów
Blink’s(silnika renderowania Chrome), aby zidentyfikować 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 nową plakietkę (podobną do dotychczasowych plakietek siatki) 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.
Aby zaktualizować plakietkę przewijania, musisz sprawdzić, czy element można przewijać 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 szczególne znaczenie, ponieważ element #document nie jest wyświetlany w przypadku dokumentu głównego, tylko w przypadku elementów 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 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 przewijać pole niezależnie.
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ł.
Zdecydowaliśmy się wypełnić tę właściwość tylko wtedy, gdy jest prawda, aby uniknąć wczytywania zbędnych danych. Dlatego, gdy nie jest ona wysyłana, zakładamy, że element nie jest przewijany.
Czy stan przewijania tego węzła został zaktualizowany?
Aby wykryć, czy węzeł zaktualizował stan przewijania, wprowadziliśmy w narzędziu CDP nowe zdarzenie scrollableFlagUpdated, które jest wywoływane za każdym razem, gdy element zyskuje lub traci obszar, który można przewijać. Zdarzenie ma taką 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ć.
W panelu Monitor protokołów możesz zobaczyć zdarzenia w czasie rzeczywistym wymieniane między Chrome i Narzędzia deweloperskie, w tym nowo dodane zdarzenie związane z plakietką Przewiń. 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.
Nie tylko przewijanie: przedstawiamy dodatkową plakietkę
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.
Oto 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ć.
- 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.