Das Beheben von Problemen beim Scrollen ist mit dem neuen Scroll-Symbol in den DevTools noch einfacher geworden. In diesem Beitrag erfahren Sie, was scrollbare Elemente sind, warum sie manchmal schwer zu finden sind 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 sie Bildlaufleisten enthält oder nicht.
Warum ist es schwierig, das scrollbare Element zu finden?
Die Behebung von Problemen beim Scrollen ist kompliziert. 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? Ist dies nicht der Fall, wiederholen Sie den Vorgang.
Neu: Scroll-Badge
In Chrome 130 können Sie im Bereich Elemente das neue Symbol für scrollbare Elemente verwenden, um die scrollbaren Elemente zu finden.
Versuchen Sie beispielsweise, mithilfe des neuen Scroll-Symbols herauszufinden, welches Element im folgenden Beispiel die Bildlaufleisten verursacht.
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 Entwicklertools-Backend weitergeleitet, indem die Referenz des Knotens gesendet wird, der sein ScrollableArea geändert hat.
Das Back-End prüft den Knoten dann mit der Methode IsUserScrollable noch einmal, um seinen neuen Status zu erhalten. 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-Badge 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 Dokumenten der obersten Ebene
Wenn das Dokument auf oberster Ebene scrollbar ist, gibt es einen Sonderfall, da wir nicht das #document-Element für das Hauptdokument anzeigen, sondern nur für iFrames. Daher können wir das Logo nicht direkt auf #document-Elementen anzeigen.
Wir haben uns entschieden, das Scrollsymbol stattdessen im </html>-Element anzuzeigen, einschließlich derjenigen in Quirks mode, bei denen document.scrollingElement() die <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)
Zur Einbindung des neuen Scroll-Logos 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 im DevTools-Frontend geladen wird.
Wir haben uns entschieden, diese Eigenschaft nur dann auszufüllen, wenn sie auf "true" gesetzt ist, um das Laden unnötiger Daten zu vermeiden. Wenn die Eigenschaft 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 Entwicklertools kommuniziert, gibt es eine einfache Möglichkeit, sie kennenzulernen.
Im Bereich Protokoll-Monitor können Sie sich Echtzeitereignisse ansehen, 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 Überlauf-Symbol, um die Ursache für dieses Scrollen zu ermitteln. Dieses Kennzeichen wird neben Elementen angezeigt, die ihren Container überlaufen. So lassen sich Layoutprobleme schnell erkennen.
Und so funktioniert es:
- Interaktive Fehlerbehebung Klicken Sie auf das Scroll-Symbol, 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.