Das Beheben von Problemen beim Scrollen ist mit dem neuen Scroll-Symbol in den DevTools noch einfacher geworden. In diesem Beitrag wird erklärt, was scrollbare Elemente sind, warum sie schwer zu finden sein können und wie Sie sie mit dieser neuen Funktion schnell finden. Außerdem geben wir einen Einblick hinter die Kulissen und zeigen, wie wir das Scroll-Badge entwickelt haben.
Was ist ein scrollbares Element?
Wenn Sie den Inhalt in einem Element scrollen können, handelt es sich um ein scrollbares Element (oder einen Scrollcontainer). Es spielt keine Rolle, ob es Scrollbalken hat oder nicht.
Warum ist es schwierig, das scrollbare Element zu finden?
Das Beheben von Scrollproblemen ist schwierig. Ohne ein Tool, das das scrollbare Element deutlich zeigt, verliert man leicht den Überblick, insbesondere auf komplexen Seiten ohne Bildlaufleisten.
Das manuelle Finden des Elements, das gescrollt wird, kann ein mühsamer Prozess aus Ausprobieren und Fehlern sein:
- Sie wählen ein Element aus und ändern seine Stile.
- Ist die Bildlaufleiste verschwunden? Andernfalls wiederholen Sie den Vorgang.
Neu: Scroll-Badge
In Chrome 130 können Sie das neue Scrollsymbol im Bereich Elemente verwenden, um die scrollbaren Elemente zu finden.
Versuchen Sie beispielsweise, mithilfe des neuen Scroll-Symbols herauszufinden, welches Element im folgenden Beispiel dazu führt, dass die Bildlaufleisten angezeigt werden.
Technische Implementierung des neuen Scroll-Symbols
Die Implementierung ist in zwei Teile unterteilt:
- Scrollbare Elemente identifizieren Verwenden Sie die Signale
Blink’s(Render-Engine von Chrome), um Elemente zu identifizieren, die scrollbar sind oder aufgrund einer Änderung auf der Seite scrollbar geworden sind. - Das Scrollsymbol wird angezeigt. Sobald wir die Signale erhalten haben, fügen wir im Bereich Elemente neben den scrollbaren Elementen ein neues Symbol ein, das dem vorhandenen Symbol für Raster ähnelt.
Scrollbare Elemente identifizieren
Zum Identifizieren scrollbarer Elemente haben wir die IsUserScrollable-Methode in Blink verwendet. Mit dieser Methode wird ermittelt, ob ein Knoten scrollbar ist. Dazu wird geprüft, ob er entlang der X- oder Y-Achse überläuft. Das bedeutet, dass der Inhalt die Containerabmessungen überschreitet und gescrollt werden kann. Diese Methode wird jedes Mal aufgerufen, wenn ein neues Element in DevTools geladen wird, um scrollbare Container zu identifizieren.
Um den Scrollbarkeitsstatus bereits geladener Elemente dynamisch zu aktualisieren, mussten wir uns intensiv mit der Codebasis der Blink-Rendering-Engine befassen, um zu verfolgen, wo der scrollbare Bereich für einen Knoten hinzugefügt oder entfernt wird.
Die Kernlogik für die Überlaufbehandlung wird von der Komponente PaintLayerScrollableArea verwaltet. Insbesondere ist die Methode UpdateScrollableAreaSet dafür verantwortlich, zu erkennen, ob ein Überlauf aufgetreten ist oder behoben wurde.
Diese Informationen werden an das DevTools-Backend weitergeleitet, indem die Referenz des Knotens gesendet wird, dessen ScrollableArea geändert wurde.
Das Backend prüft den Knoten dann noch einmal mit der Methode IsUserScrollable, um seinen neuen Status abzurufen. Nach der Überprüfung der Scrollbarkeit wird über Chrome DevTools Protocol ein Signal an das Front-End gesendet, damit die Benutzeroberfläche Änderungen an scrollbaren Inhalten korrekt widerspiegelt.
Scroll-Logo anzeigen
Um das neue Symbol in der DevTools-Frontend-Ansicht hinzuzufügen, haben wir in ElementsTreeOutline eine Handlermethode erstellt, die die Node-ID des Elements empfängt, das seinen Scrollbarkeitsstatus durch ein Ereignis geändert hat.
In diesem Handler rufen wir das ElementsTreeElement-Objekt mit dem nodeId ab und weisen es an, sein Scroll-Badge zu aktualisieren.
Wenn Sie das Scrollsymbol aktualisieren möchten, müssen Sie prüfen, ob das Element scrollbar ist und ob es bereits ein Scrollsymbol hat. Je nach diesen Bedingungen werden die folgenden Maßnahmen ergriffen:
- Wenn das Element scrollbar ist und noch kein Scrollsymbol hat, wird eines hinzugefügt.
- Wenn das Element nicht scrollbar ist, aber ein Scrollsymbol hat, wird das vorhandene Symbol entfernt.
Die spezielle Logik zum Umgang mit scrollbaren Top-Level-Dokumenten
Wenn das Dokument der obersten Ebene scrollbar ist, handelt es sich um einen Sonderfall, da das #document-Element nicht für das Hauptdokument, sondern nur für Iframes angezeigt wird. Daher können wir das Gütesiegel nicht direkt in #document-Elementen anzeigen.
Wir haben uns entschieden, das Scrollsymbol stattdessen im </html>-Element anzuzeigen, einschließlich derjenigen in Quirks mode, bei denen document.scrollingElement() <body> oder null zurückgibt. Dadurch wird verhindert, dass es zu Verwechslungen zwischen scrollbaren Dokumenten und scrollbaren Textkörperelementen kommt, insbesondere auf Seiten, auf denen der Textkörper unabhängig gescrollt werden kann.
Wir haben festgestellt, dass dies die beste Möglichkeit ist, Entwicklern zu zeigen, welche Elemente gescrollt werden können.
Änderungen am Chrome-Entwicklertools-Protokoll (CDP)
Für die Integration des neuen Scroll-Symbols waren Änderungen an Chrome DevTools Protocol (CDP) erforderlich. CDP dient als Kommunikationsprotokoll zwischen DevTools und Chrome.
Wir mussten das Protokoll ändern, um die beiden Fälle abzudecken:
- Ist dieser Knoten scrollbar, wenn er in den Entwicklertools geladen wird?
- Wurde der scrollbare Status dieses Knotens aktualisiert?
Ist dieser Knoten scrollbar, wenn er in den Entwicklertools geladen wird?
Wir haben dem Datentyp DOM.Node eine neue Eigenschaft namens isScrollable hinzugefügt, die jedes Mal gesendet wird, wenn ein neuer Knoten in der DevTools-Frontend geladen wird.
Wir haben uns entschieden, diese Property nur dann zu füllen, wenn sie wahr ist, um unnötiges Laden von Daten zu vermeiden. Wenn die Property nicht gesendet wird, gehen wir davon aus, dass das Element nicht scrollbar ist.
Wurde der scrollbare Status dieses Knotens aktualisiert?
Um zu erkennen, ob ein Knoten seinen scrollbaren Status aktualisiert hat, haben wir in CDP ein neues Ereignis scrollableFlagUpdated eingeführt, das ausgelöst wird, wenn ein Element einen scrollbaren Bereich erhält oder verliert. Das Ereignis hat die folgende 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
Profitipp: Neue CDP-Änderungen in Ihrem Browser prüfen
Wenn Sie wissen möchten, wie Chrome mit den DevTools kommuniziert, gibt es eine einfache Möglichkeit, das zu untersuchen.
Im Bereich Protokoll-Monitor können Sie Echtzeitereignisse sehen, die zwischen Chrome und DevTools ausgetauscht werden, einschließlich des neu hinzugefügten Ereignisses für das Scroll-Logo. Wenn Sie beispielsweise den Stil eines Elements ändern, der sich auf die Scrollbarkeit auswirkt, sehen Sie die zugehörigen CDP-Ereignisse sofort, wenn sie auftreten.
Eine ausführlichere Anleitung findest du unter Protocol monitor: View and send CDP requests.
Mehr als nur Scrollen: Das Dreipunkt-Menü
Außerdem arbeiten wir an einem neuen Symbol für den Überlauf, mit dem die Ursache für das Scrollen ermittelt werden kann. Dieses Symbol wird neben Elementen angezeigt, die ihren Container überfüllen. So können Sie Layoutprobleme schnell diagnostizieren.
So funktionierts:
- Interaktive Fehlerbehebung Klicken Sie auf das Scroll-Logo, um einen DevTools-Protokollbefehl auszulösen, mit dem überlaufende untergeordnete Elemente identifiziert werden.
- Überlauf visualisieren Wir ordnen die Elementgrenzen innerhalb des scrollbaren Containers zu, um einen Überlauf zu erkennen.
- Den Schuldigen hervorheben Das Symbol für Überlauf kennzeichnet diese Elemente. Wenn Sie darauf klicken, werden sie direkt im DOM hervorgehoben.
So erhalten Entwickler ein leistungsstarkes neues Tool, mit dem sie Layoutprobleme, die durch überlaufende Inhalte verursacht werden, besser nachvollziehen und beheben können. Wir sind davon überzeugt, dass diese detailliertere Analyse Ihren Debugging-Workflow erheblich optimieren wird.