Navigieren Sie mit dem Tool 3D-Ansicht durch Webseiten-Layer, Z-Index und DOM
Verwenden Sie das Tool 3D-Ansicht , um PROBLEME mit DOM, Z-Index und zusammengesetzten Ebenen auf einer Webseite zu debuggen, indem Sie die Seite im 3D-Raum drehen. Die 3D-Visualisierung hilft Ihnen, die DOM-Strukturhierarchie, die Z-Index-Stapelkontextstrukturhierarchie und die auf der Seite erstellten zusammengesetzten Ebenen zu verstehen.
Auf der linken Seite verfügt das Tool für die 3D-Ansicht über drei Registerkarten:
- Auf der Registerkarte Zusammengesetzte Ebenen werden die zusammengesetzten Ebenen angezeigt, die vom Browser für Ihre Webseite erstellt werden. Jede Ebene enthält ein realistisches Rendering des Inhalts in der Ebene, um eine umfassende Erfahrung zu erzielen, während Sie die Seite im 3D-Raum verschieben.
- Auf der Registerkarte Z-Index wird eine 3D-Darstellung der Stapelkontextstruktur angezeigt. Verwenden Sie diese Registerkarte, um Z-Index-Stapelprobleme auf Ihrer Webseite zu debuggen.
- Auf der Registerkarte DOM wird eine 3D-Darstellung der DOM-Struktur angezeigt. Verwenden Sie diese Registerkarte, um das DOM als Ganzes mit allen Elementen zu erkunden, auf die leicht zugegriffen werden kann.
Auf der rechten Seite stellt der 3D-Zeichenbereich die Webseite dar, je nachdem, welche Registerkarte und Welche Optionen Sie auswählen.
Video: Debuggen des Webs in 3D
Öffnen des Tools für die 3D-Ansicht
Sie können das 3D-Ansichtstool entweder in der Aktivitätsleiste oder im Bereich Schnellansicht öffnen.
Öffnen Sie das Tool 3D-Ansicht in der Aktivitätsleiste, um den maximalen Canvas-Platz zu erhalten.
Um das Tool Elemente und die 3D-Ansicht gleichzeitig zu verwenden, öffnen Sie das Tool 3D-Ansicht im Bereich Schnellansicht . Dadurch können Sie die DOM-Strukturelemente anzeigen, die im 3D-Zeichenbereich dargestellt werden. Dies ist die Standardeinstellung. im Befehlsmenü wird 3D-Ansicht anzeigen im Bereich Schnellansicht als geöffnet angezeigt.
Öffnen sie das Tool 3D-Ansicht in der Aktivitätsleiste.
Öffnen Sie die Webseite, die Sie in 3D visualisieren möchten. Verwenden Sie beispielsweise die Demoseite für Tierheime .
Klicken Sie zum Öffnen von DevTools mit der rechten Maustaste auf die Webseite, und wählen Sie dann Untersuchen aus. Oder drücken Sie STRG+UMSCHALT+I (Windows, Linux) oder BEFEHL+WAHL+I (macOS). DevTools wird geöffnet.
Wählen Sie in DevTools auf der Aktivitätsleiste die Registerkarte 3D-Ansicht aus. Wenn diese Registerkarte nicht angezeigt wird, klicken Sie auf die Schaltfläche Weitere Tools (
). Die Registerkarte 3D-Ansicht wird in der Aktivitätsleiste geöffnet:
Öffnen des Tools "3D-Ansicht" im Bereich "Schnellansicht"
Öffnen Sie die Webseite, die Sie in 3D visualisieren möchten. Verwenden Sie beispielsweise die Demoseite für Tierheime .
Klicken Sie zum Öffnen von DevTools mit der rechten Maustaste auf die Webseite, und wählen Sie dann Untersuchen aus. Oder drücken Sie STRG+UMSCHALT+I (Windows, Linux) oder BEFEHL+WAHL+I (macOS). DevTools wird geöffnet.
Wenn der Bereich Schnellansicht nicht angezeigt wird, wählen Sie DevTools anpassen und steuern (...) und dann Bereich "Schnellansicht umschalten" aus. Wenn der Fokus auf DevTools liegt, drücken Sie ESC.
Wählen Sie auf der Symbolleiste Schnellansicht die Registerkarte 3D-Ansicht aus. Wenn diese Registerkarte nicht angezeigt wird, klicken Sie auf die Schaltfläche Weitere Tools (
). Die Registerkarte 3D-Ansicht wird im Bereich Schnellansicht geöffnet:
Zoomen, Schwenken und Drehen des 3D-Zeichenbereichs
Um die Webseite aus verschiedenen Winkeln anzuzeigen, können Sie den 3D-Zeichenbereich, der auf der rechten Seite des 3D-Ansichtstools angezeigt wird, zoomen, schwenken und drehen.
Vergrößern oder Verkleineren der Seite
Um die Webseite im 3D-Zeichenbereich zu vergrößern oder zu verkleinern, verwenden Sie das Mausrad oder den Schieberegler unten rechts.
Schwenkansicht (Schaltfläche)
Um die Seite nach links, rechts, nach oben oder unten zu verschieben, klicken Sie auf die Schaltfläche Schwenkansicht (
und ziehen Sie dann die Seite auf dem 3D-Zeichenbereich in die gewünschte Richtung mit der Maus.
Ansicht drehen (Schaltfläche)
Um die Seite mit der Maus zu drehen, klicken Sie auf die Schaltfläche Ansicht drehen (
), und ziehen Sie dann das Zeichenblatt auf dem 3D-Zeichenbereich im gewünschten Winkel mit der Maus.
Um die Seite mit der Tastatur zu drehen, klicken Sie auf den 3D-Zeichenbereich, um den Fokus darauf zu setzen, sodass ein schwarzer Rahmen angezeigt wird, und drücken Sie dann die Pfeiltasten.
- Um die Seite horizontal zu drehen, drücken Sie die NACH-LINKS - oder NACH-RECHTS-TASTE .
- Um die Seite vertikal zu drehen, drücken Sie die NACH-OBEN - oder NACH-UNTEN-TASTE .
Die Tasten drehen die Seite, unabhängig davon, ob die Schaltfläche Ansicht schwenken oder Ansicht drehen auf der Symbolleiste ausgewählt ist.
Weitere Informationen finden Sie in diesen anderen Abschnitten auf dieser Seite:
Registerkarte "Zusammengesetzte Ebenen"
In der Ansicht Zusammengesetzte Ebenen zeigt die 3D-Canvas die Liste der Ebenen an, die vom Browserrenderingmodul für die Webseite erstellt wurden.
Verwenden Sie die Ansicht Zusammengesetzte Ebenen, um zu analysieren, wie viele Ebenen von Ihrem CSS-Code erstellt werden, wie groß sie sind und wie oft sie sich ändern.
Wählen Sie auf der rechten Seite des 3D-Zeichenbereichs ein Element der Webseite aus. Auf der Registerkarte Zusammengesetzte Ebenen wird die Ebenenstruktur automatisch erweitert, und auf der Registerkarte Details unterhalb der Ebenenstruktur werden Informationen zur ausgewählten Ebene angezeigt:
Rechtecke für langsamen Bildlauf (Kontrollkästchen)
Das Kontrollkästchen Langsames Scrollen hebt Abschnitte der Seite hervor, die einen langsamen Bildlauf verursachen. Dieses Kontrollkästchen ist hilfreich, um Leistungsprobleme zu untersuchen. Bestimmte Webseiten verwenden JavaScript, um Bildlauf (oder Toucheingaben) auf bestimmte Seitenelemente auf eine Weise zu erkennen, die dazu führen kann, dass das Scrollen durch die Webseite langsamer ist als normalerweise.
Dieses Kontrollkästchen hebt (in rosa) die Felder der gerenderten Webseite hervor, die diese Leistungsprobleme verursachen können.
Dieses Kontrollkästchen ähnelt dem Kontrollkästchen Leistungsprobleme beim Scrollen im Renderingtool , das die langsamen Rects auf der Seite direkt hervorhebt (gelb). Weitere Informationen finden Sie unter Suchen von Problemen mit der Bildlaufleistung in Echtzeit in der Referenz zu Leistungsfeatures. Beide Kontrollkästchen basieren auf denselben Debuginformationen, aber diese beiden Tools stellen diese Informationen unterschiedlich dar.
Paints (Kontrollkästchen)
Rendert den Inhalt der Webseite (Farb- oder Bilddatei) auf die Elemente.
Ebenenerweiterungsstruktur
Erweitern Sie diese Struktur, um die Liste der zusammengesetzten Ebenen anzuzeigen. Klicken Sie auf eine Ebene, um ausführliche Informationen dazu im Detailinformationsbereich anzuzeigen.
Details (Infobereich)
Der Infobereich Details unterhalb des Bereichs Zusammengesetzte Ebenen enthält die folgenden Felder.
Size
Die Breite und dann die Höhe der ausgewählten zusammengesetzten Ebene sowie die Position der oberen linken Ebene der Ebene relativ zur oberen linken Ecke des Seiten-Viewports. Beispiel: "1034 x 28055 (bei 0, 0)".
Gründe für die Kompositing
Gründe, warum die Browserrendering-Engine die Ebene erstellt hat. Beispiel: "Sekundäre Ebene, um Inhalte zu enthalten, die gescrollt werden können."
Arbeitsspeicherschätzung
Der für die ausgewählte Ebene belegte Arbeitsspeicher. Beispiel: "116 MB".
Anzahl der Farben
Gibt an, wie oft die ausgewählte Ebene von der Rendering-Engine gezeichnet wurde.
Die Z-Index-Registerkarte
Auf der Registerkarte Z-Index werden nur die Elemente der Webseite angezeigt, die Kontexte stapeln oder entlang der Z-Achse positioniert sind:
Weitere Informationen finden Sie unter Stapelkontext und Verwenden von z-index bei MDN.
Elementtyp anzeigen (Abschnitt)
Der Abschnitt Elementetyp anzeigen auf der Registerkarte Z-Index steuert, welche Elemente der Seite im 3D-Zeichenbereich angezeigt werden.
Das Optionsfeld Alle anzeigen zeigt sowohl die Stapelkontextelemente als auch die Elemente an, die auf der Z-Achse positioniert sind. Diese Ansicht ist nützlich, um Probleme mit Elementen zu debuggen, die falsch auf der Z-Achse positioniert sind.
Das Optionsfeld Nur Stapelkontexte anzeigen zeigt nur die Seitenelemente an, bei denen es sich um Stapelkontexte handelt. Diese Ansicht ist nützlich, um schnell herauszufinden, welche Elemente Kontexte auf der Webseite stapeln.
Das Kontrollkästchen Z-Index-Bezeichnungen anzeigen zeigt die Z-Index-Bezeichnungen im 3D-Zeichenbereich an oder blendet sie aus. Dieses Kontrollkästchen ist standardmäßig aktiviert.
Farbtyp (Abschnitt)
Auf der Registerkarte Z-Index können Sie aus den folgenden Farbschemas wählen, um das DOM im 3D-Zeichenbereich zu visualisieren:
Optionsfeld "Violett" bis "Weiß ": Die 3D-Canvas zeigt Elemente von Lila bis Weiß an.
Optionsfeld Hintergrundfarbe verwenden: Die 3D-Canvas zeigt Elemente an, die mit der für jedes Element definierten Hintergrundfarbe gerendert werden.
Mit diesen Optionsfeldern können Sie durch die Optionen wechseln und den Farbtyp auswählen. Der Farbtyp sollte entweder für Ihr Projekt am besten geeignet oder der von Ihnen bevorzugte sein. Die Z-Index-Bezeichnungen fügen visuelle Informationen auf dem 3D-Zeichenbereich hinzu, sodass es je nach Benutzerfeedback weniger Farboptionen auf der Z-Index-Registerkarte als auf der Registerkarte DOM gibt.
Die Dom-Registerkarte
Die Registerkarte DOM bietet eine allgemeine Debugansicht der DOM-Struktur. Auf der Registerkarte DOM werden alle Elemente der Webseite im 3D-Zeichenbereich angezeigt:
Die X- und Y-Koordinaten eines Elements im 3D-Zeichenbereich entsprechen den Koordinaten des Elements auf der Webseite. Die Z-Koordinate eines Elements basiert darauf, wie tief das Element in der DOM-Struktur geschachtelt ist.
Schachtelungsebene für Seite (Schieberegler)
Der Schieberegler steuert, wie viele Ebenen der DOM-Struktur im 3D-Zeichenbereich angezeigt werden. Der neben dem Schieberegler angezeigte Wert gibt die maximale Tiefe der Elemente an, die im 3D-Zeichenbereich angezeigt werden. Wenn Sie den Schieberegler nach links ziehen, werden die äußersten Ebenen weggezogen, bis eine Schachtelungsebene auf 1festgelegt ist, die nur das hinterste Element im DOM anzeigt. Um einen Teil der Unübersichtlichkeit zu entfernen, ziehen Sie den Schieberegler, um einen genaueren Blick auf die Vorgänge in den unteren Ebenen zu erhalten.
Schaltfläche "Zurücksetzen"
Setzt die Schachtelungsebene für den Seitenschieberegler auf den Standardwert für die Seite zurück.
Farbtyp (Abschnitt)
Auf der Registerkarte DOM können Sie aus den folgenden Farbschemas auswählen, die das DOM im 3D-Zeichenbereich visualisieren:
Optionsfeld "Violett" bis "Weiß ": Die 3D-Canvas zeigt Elemente von Lila bis Weiß an.
Optionsfeld "Blau" bis "Gelb ": Die 3D-Canvas zeigt Elemente von Blau bis Gelb an.
Optionsfeld "Regenbogen ": Die 3D-Canvas zeigt Elemente in den Farben Lila, Blau, Grün, Gelb, Orange und Rot an.
Optionsfeld Bildschirmtextur verwenden : Rendert den Inhalt der Webseite (Farb- oder Bilddatei) auf die Elemente.
Optionsfeld Hintergrundfarbe verwenden: Die 3D-Canvas zeigt Elemente an, die mit der für jedes Element definierten Hintergrundfarbe gerendert werden.
Symbolleiste über dem 3D-Zeichenbereich
Momentaufnahme erneut aufnehmen (Schaltfläche)
Klicken Sie auf der Dom-Registerkarte oder Z-Index-Registerkarte auf die Schaltfläche Momentaufnahme erneut aufnehmen (
, um die 3D-Darstellung der DOM-Struktur oder der Stapelkontextstruktur so zu aktualisieren, dass sie mit dem aktuellen Viewport der Webseite übereinstimmt. Beispielsweise, nachdem Sie den Viewport schmaler festgelegt haben oder wenn Sie zu einer Geräteemulationsansicht wechseln, pro Emulate mobile devices (Device Emulation).
Wenn die Registerkarte Zusammengesetzte Ebenen ausgewählt ist, wird diese Schaltfläche weggelassen, da das erneute Erstellen der Momentaufnahme automatisch erfolgt, wenn Sie die Größe des Viewports ändern.
Ansicht zurücksetzen (Schaltfläche)
Klicken Sie auf die Schaltfläche Ansicht zurücksetzen (
um die Verschiebung und Drehung der Seite zurückzusetzen.
Schwenkansicht (Schaltfläche)
Um die Seite nach links, rechts, nach oben oder unten zu verschieben, klicken Sie auf die Schaltfläche Schwenkansicht ( und ziehen Sie dann die Seite auf dem 3D-Zeichenbereich in die gewünschte Richtung mit der Maus.
Ansicht drehen (Schaltfläche)
Um die Seite mit der Maus zu drehen, klicken Sie auf die Schaltfläche Ansicht drehen (), und ziehen Sie dann das Zeichenblatt auf dem 3D-Zeichenbereich im gewünschten Winkel mit der Maus.
Um die Seite mit der Tastatur zu drehen, klicken Sie auf den 3D-Zeichenbereich, um den Fokus darauf zu setzen, sodass ein schwarzer Rahmen angezeigt wird, und drücken Sie dann die Pfeiltasten.
- Um die Seite horizontal zu drehen, drücken Sie die NACH-LINKS - oder NACH-RECHTS-TASTE .
- Um die Seite vertikal zu drehen, drücken Sie die NACH-OBEN - oder NACH-UNTEN-TASTE .
Die Tasten drehen die Seite, unabhängig davon, ob die Schaltfläche Ansicht schwenken oder Ansicht drehen auf der Symbolleiste ausgewählt ist.
Ausgewähltes Element isolieren (Schaltfläche und Abschnitt)
Anstatt alle DOM-Elemente der Seite im 3D-Zeichenbereich anzuzeigen, können Sie sich darauf konzentrieren, nur einen Teil des DOM anzuzeigen.
Wählen Sie ein Element der Webseite im 3D-Zeichenbereich aus, und klicken Sie dann auf die Schaltfläche Ausgewähltes Element isolieren . Der 3D-Zeichenbereich zeigt das ausgewählte Element und die übergeordneten oder untergeordneten Elemente des Elements an, ohne die restlichen Seitenelemente anzuzeigen.
Verwenden Sie diese Schaltfläche, um das Element anzuzeigen, das Sie auf der 3D-Canvas ausgewählt haben, und reduzieren Sie gleichzeitig die Unübersichtlichkeit, die komplexe Webseiten im 3D-Zeichenbereich erzeugen können.
Übergeordnete Elemente einschließen (Kontrollkästchen)
Das Kontrollkästchen Übergeordnete Einschließen steuert, ob die übergeordneten Elemente eines ausgewählten Seitenelements im 3D-Zeichenbereich angezeigt werden. Das Kontrollkästchen Übergeordnete einschließen ist standardmäßig aktiviert. Wenn dieses Kontrollkästchen aktiviert ist, wählen Sie zum Anzeigen eines Elements und seiner übergeordneten Elemente im 3D-Zeichenbereich ein Element im 3D-Zeichenbereich oder im Tool Elemente aus, und klicken Sie dann auf die Schaltfläche Ausgewähltes Element isolieren .
Dieses Kontrollkästchen wird angezeigt, wenn die Registerkarte Z-Index oder DOM ausgewählt ist.
Untergeordnete Elemente einschließen (Kontrollkästchen)
Das Kontrollkästchen Untergeordnete Elemente einschließen wird nur angezeigt, wenn die Registerkarte DOM ausgewählt ist.
So zeigen Sie nur das ausgewählte DOM-Element sowie die übergeordneten und untergeordneten Elemente des Elements an:
- Aktivieren Sie die Kontrollkästchen Übergeordnete elemente einschließen und Untergeordnete Elemente einschließen , und klicken Sie dann auf die Schaltfläche Ausgewähltes Element isolieren . Dies ist die Standardeinstellung.
So zeigen Sie nur das ausgewählte DOM-Element zusammen mit den übergeordneten Elementen des Elements, aber nicht die untergeordneten Elemente des Elements an:
- Aktivieren Sie das Kontrollkästchen Übergeordnete einschließen , deaktivieren Sie das Kontrollkästchen Untergeordnete Elemente einschließen , und klicken Sie dann auf die Schaltfläche Ausgewähltes Element isolieren .
So zeigen Sie nur das ausgewählte DOM-Element zusammen mit den untergeordneten Elementen des Elements an, nicht aber die übergeordneten Elemente des Elements:
- Deaktivieren Sie das Kontrollkästchen Übergeordnete Einschließen , aktivieren Sie das Kontrollkästchen Untergeordnete Elemente einschließen , und klicken Sie dann auf die Schaltfläche Ausgewähltes Element isolieren .
So zeigen Sie nur das ausgewählte DOM-Element ohne dessen übergeordnete oder untergeordnete Elemente an:
- Deaktivieren Sie das Kontrollkästchen Übergeordnete Elemente einschließen und untergeordnete Elemente einschließen , und klicken Sie dann auf die Schaltfläche Ausgewähltes Element isolieren .
Bewegungssteuerungen unten rechts
Die Steuerelemente in der unteren rechten Ecke des 3D-Zeichenbereichs funktionieren gleich, unabhängig davon, welche Registerkarte Sie auswählen.
Zoomschieberegler: Hiermit wird die Seite vergrößert oder verkleinern, wie das Mausrad oder das Ziehen von zwei Fingern über das Touchpad.
Schaltfläche "Nach oben": Verschiebt die Seite relativ zum Koordinatensystem der Seite nach oben.
Schaltfläche "Nach unten": Verschiebt die Seite relativ zum Koordinatensystem der Seite nach unten.
Linke Schaltfläche: Verschiebt die Seite relativ zum Koordinatensystem der Seite nach rechts.
Schaltfläche "Rechts": Verschiebt die Seite relativ zum Koordinatensystem der Seite nach links.