Steuerfeld „Ebenen“: Sehen Sie sich die Ebenen Ihrer Website an.

Dale St. Marthe

Im Bereich Ebenen sehen Sie die Zusammensetzung Ihrer Website und wie der Browser Inhalte rendert. Analysieren Sie ein 3D-Diagramm Ihrer Website, um Probleme beim Rendern zu erkennen, Scrollfehler zu beheben und Animationen zu optimieren.

Übersicht

Im Bereich Ebenen können Sie Folgendes tun:

• Dokumentebenen ansehen
• Prüfen Sie die Dokumentebenen.
• Legen Sie DOM-Änderungs-Haltepunkte fest.
• Informationen zum Paint Profiler aufrufen
• Identifizieren Sie Elemente, die sich nur langsam scrollen lassen.

Bereich „Ebenen“ öffnen

So öffnen Sie den Bereich Ebenen:

1. Öffnen Sie die Entwicklertools.
2. Drücken Sie eine der folgenden Tasten, um das Befehlsmenü zu öffnen:
   • macOS: Befehlstaste + Umschalttaste + P
   • Windows, Linux, ChromeOS: Strg + Umschalttaste + P
3. Geben Sie Layers ein, wählen Sie Layers-Bereich anzeigen aus und drücken Sie die Eingabetaste.

Alternativ können Sie rechts oben auf das more_vert Weitere Optionen > Weitere Tools > Ebenenbereich klicken.

Im Bereich Leistung können Sie außerdem auf dem Tab Ebenen die Ebenen jedes Frames einer Aufnahme ansehen. Weitere Informationen finden Sie unter Informationen zu Ebenen aufrufen.

Dokumentebenen ansehen

Im äußersten linken Bereich des Bereichs Ebenen werden alle gerenderten Ebenen des Dokuments in einem ausblendbaren Baum aufgeführt. Dieser Baum wird aktualisiert, während Sie sich auf der Seite bewegen. Ebenen werden entweder durch ihren CSS-Selektor oder durch eine Zahl gefolgt von den Abmessungen der Ebene in Pixeln identifiziert.

Bewegen Sie den Mauszeiger auf eine Ebene, um sie auf der Webseite und im Diagramm hervorzuheben. Auf der Seite wird eine Kurzinfo mit den folgenden Informationen angezeigt:

• Die Auswahlmöglichkeiten der Ebene.
• Die Abmessungen der Ebene in Pixeln.
• Ein Symbol für CSS-Grid oder Flex, sofern zutreffend.

Dokumentebenen prüfen

Klicken Sie auf eine Ebene, um im Bereich Details weitere Informationen aufzurufen.

Je nach Ebene werden die folgenden Informationen angezeigt:

• Größe
• Compositing-Gründe
• Geschätzter Arbeitsspeicher
• Paint-Anzahl
• Regionen mit langsamem Scrollen
• Fixierte Positionsbeschränkung

Das Diagramm zeigt, wie die Ebenen für diese Seite gestapelt und angeordnet sind, einschließlich Elemente, die sich außerhalb des Darstellungsbereichs befinden.

So verschieben Sie das Diagramm:

• Verschieben Sie das Diagramm mit den WASD-Tasten. Drücken Sie die Taste W, um nach oben zu schwenken, A, um nach links zu schwenken, S, um nach unten zu schwenken, und D, um nach rechts zu schwenken.
• Klicken Sie auf „Schwenkmodus“ drag_pan oder drücken Sie die X-Taste und ziehen Sie, um sich entlang der X- und Y-Achsen zu bewegen.
• Klicken Sie auf „Drehmodus 360“ oder drücken Sie die Taste V und ziehen Sie, um entlang der Z‑Achse zu drehen.
• Klicken Sie auf „Transformieren zurücksetzen“ zoom_in_map oder drücken Sie die Taste 0, um das Diagramm auf die ursprüngliche Position zurückzusetzen.
• Sie können heranzoomen, indem Sie die Umschalttaste + + oder das Mausrad nach oben drücken.
• Sie können herauszoomen, indem Sie die Umschalttaste + - oder das Mausrad nach unten drücken.

Wenn Sie das entsprechende DOM-Element einer Ebene im Elementbereich sehen möchten, klicken Sie im Diagramm oder im Ebenenstrukturbaum mit der rechten Maustaste auf eine Ebene und dann auf Im Elementbereich anzeigen.

Außerdem werden im Bereich Ebenen bestimmte Ebenen ausgeblendet, die keine Inhalte hosten oder zeichnen. Wenn Sie diese Ebenen anzeigen möchten, klicken Sie mit der rechten Maustaste auf den Ebenenbaum und wählen Sie Interne Ebenen anzeigen aus.

DOM-Änderungs-Haltepunkte festlegen

Im Bereich Layers können Sie DOM-Änderungs-Haltepunkte festlegen.

So legen Sie einen DOM-Änderungs-Bruchpunkt fest:

1. Klicken Sie mit der rechten Maustaste auf eine Ebene in der Ebenenstruktur.
2. Bewegen Sie den Mauszeiger auf Unterbrechung aktivieren und wählen Sie dann Änderungen am untergeordneten Knoten, Änderungen am Attribut oder Entfernen von Knoten aus.

Eine Liste der DOM-Änderungs-Haltepunkte finden Sie hier:

• Elemente > Tab DOM-Umschaltpunkte
• Maximieren Sie den minimierten Bereich Quellen > DOM-Haltepunkte.

Weitere Informationen zu den verschiedenen Arten von DOM-Änderungs-Breakpoints finden Sie unter Arten von DOM-Änderungs-Breakpoints.

Paint Profiler-Informationen aufrufen

Im Bereich Ebenen können Sie detaillierte Informationen zur Füllung einer Ebene aufrufen und den Inhalt der Webseite im 3D-Diagramm rendern.

So aktivieren Sie den Paint Profiler:

1. Klicken Sie in der Aktionsleiste auf das Kästchen check_box Paints.
2. Wählen Sie eine Ebene aus dem Ebenen-Ordner aus.
3. Klicken Sie unten im Bereich Details auf Paint Profiler. Diese Option ist nicht für alle Ebenen verfügbar.

Der Tab Profiler wird mit Farbaufzeichnungen und einem Histogramm geöffnet, das die Verteilung der Farbkosten darstellt.

Wenn Sie Paints aktivieren, wird auch der Großteil des Inhalts der Webseite im Diagramm gerendert.

Elemente mit langsamem Scrollen identifizieren

Einige Websites verwenden JavaScript, um Scroll- oder Touch-Ereignisse auf Elementen zu erkennen, was sich negativ auf die Scrollgeschwindigkeit auswirken kann. Wenn Sie Ebenen mit Ereignis-Listenern für das Scrollen identifizieren möchten, die die Leistung beeinträchtigen können, klicken Sie auf das Kästchen check_box Slow scroll rects (Rechtecke mit langsamem Scrollen).

Ebenen, die zu langsamem Scrollen führen können, sind rosa hervorgehoben.