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

Im Bereich Ebenen können Sie die Zusammensetzung Ihrer Website und die Darstellung von Inhalten im Browser nachvollziehen. 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.
• DOM-Änderungs-Haltepunkte festlegen
• Informationen zum Paint Profiler aufrufen
• Identifizieren Sie Elemente mit langsamem Scrollen.

Bereich „Ebenen“ öffnen

So öffnen Sie den Bereich Ebenen:

1. Öffnen Sie die Entwicklertools.
2. Öffnen Sie das Befehlsmenü durch Drücken von:
   • macOS: Befehlstaste + Umschalttaste + P
   • Windows, Linux, ChromeOS: Strg + Umschalttaste + P
3. Geben Sie Layers ein, wählen Sie Ebenenbereich anzeigen aus und drücken Sie die Eingabetaste.

Alternativ können Sie auch rechts oben more_vert Weitere Optionen > Weitere Tools > Bereich „Ebenen“ auswählen.

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 ansehen.

Dokumentebenen ansehen

Ganz links im Bereich Ebenen werden alle gerenderten Ebenen des Dokuments in einer maximierbaren Baumstruktur aufgelistet. 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
• Anzahl der Farben
• 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 „Transformation zurücksetzen“ zoom_in_map oder drücken Sie 0, um das Diagramm an seine ursprüngliche Position zurückzusetzen.
• Zoomen Sie heran, indem Sie Shift + + 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 Bereich Elemente sehen möchten, klicken Sie im Diagramm oder in der Ebenenstruktur 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-Bruchpunkte 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 Knoten entfernen 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 Malerei 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 in der Ebenenstruktur eine Ebene 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 Berührungsereignisse für Elemente auf eine Weise zu erkennen, die sich negativ auf die Scrollgeschwindigkeit auswirken kann. Klicken Sie auf das check_box Kontrollkästchen Langsame Scroll-Rects, um Layers zu identifizieren, die Event-Listener enthalten, die sich auf das Scrollen auswirken.

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