Navigieren Sie mit dem Tool 3D-Ansicht durch Webseiten-Layer, Z-Index und DOM
Verwenden Sie das 3D-Ansichtstool zum Debuggen Ihrer Web-App, indem Sie Ihre Seite im 3D-Raum drehen, um eine Perspektive auf Ihre Webseite zu erhalten, dargestellt als Ebenen. Die 3D-Visualisierung hilft Ihnen, die DOM-Hierarchie für Ihre Webseite im Hinblick auf Z-Index-Ebenen zu verstehen.
Auf der linken Seite verfügt das 3D-Ansichtstool über drei Registerkarten:
- Die Registerkarte "Zusammengesetzte Ebenen " zeigt ein realistisches Rendering der Webseite, einschließlich Bildern, für eine umfassende Erfahrung, während Sie die Seite im 3D-Raum verschieben.
- Die Registerkarte "Z-Index ". Erkunden Sie die Elemente der Webseite, wobei der Z-Index-Layerkontext hervorgehoben wird. Verwenden Sie diese Registerkarte oder Ansicht, um die Webseite basierend auf dem Z-Index-Stapelkontext zu debuggen.
- Die DOM-Registerkarte . Erkunden Sie das DOM als Ganzes, mit allen Elementen, die leicht zugänglich sind. Erkunden Sie alle Elemente der Webseite, übersetzt in eine 3D-Perspektive.
Auf der rechten Seite stellt der 3D-Zeichenbereich die Webseite entsprechend der ausgewählten Registerkarte und optionen dar.
Zoomen, Schwenken und Drehen des 3D-Zeichenbereichs
Vergrößern oder Verkleinern der Seite
Wenn Sie die Webseite im 3D-Zeichenbereich vergrößern oder verkleinern möchten, verwenden Sie das Mausrad oder den Schieberegler in der unteren rechten Ecke.
Schwenkansicht (Schaltfläche)
Um die Seite nach links, rechts, oben oder unten zu verschieben, klicken Sie auf die Schaltfläche " Schwenkansicht " (
"Schwenkansicht"). Ziehen Sie dann die Seite auf dem 3D-Zeichenbereich mit der Maus in die gewünschte Richtung.
Ansicht drehen (Schaltfläche)
Wenn Sie die Seite mit der Maus drehen möchten, klicken Sie auf die Schaltfläche " Ansicht drehen " (
"Ansicht drehen"). Ziehen Sie dann die Seite im 3D-Zeichenbereich im gewünschten Winkel mit der Maus.
Um die Seite mithilfe 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 UND-TASTE
left arrowright arrow. - Um die Seite vertikal zu drehen, drücken Sie die UND-TASTE
up arrowdown arrow.
Die Tasten drehen die Seite, unabhängig davon, ob die Schaltfläche " Ansicht verschieben " oder " Drehen " auf der Symbolleiste ausgewählt ist.
Weitere Informationen finden Sie in den folgenden anderen Abschnitten auf dieser Seite:
Registerkarte "Zusammengesetzte Ebenen"
In der Ansicht "Zusammengesetzte Ebenen" zeigt der 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 im 3D-Zeichenbereich auf der rechten Seite ein Element der Webseite aus. Auf der Registerkarte " Zusammengesetzte Ebenen " wird die Ebenenstruktur automatisch erweitert, und auf der Registerkarte " Details " unter der Ebenenstruktur werden Informationen zur ausgewählten Ebene angezeigt.
Langsame Bildlauf-Rekts (Kontrollkästchen)
Das Kontrollkästchen " Langsam scroll rects" 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 Toucheingabe) für bestimmte Seitenelemente so zu erkennen, dass der Bildlauf durch die Webseite langsamer als normalerweise möglich ist.
Dieses Kontrollkästchen hebt (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 Rekts auf der Seite direkt (in Gelb) hervor hebt. 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.
Farben (Kontrollkästchen)
Rendert den Inhalt der Webseite (Farb- oder Bilddatei) auf den Elementen.
Ebenenerweiterungsstruktur
Erweitern Sie diese Struktur, um die Liste der zusammengesetzten Ebenen anzuzeigen. Klicken Sie auf eine Ebene, um detaillierte Informationen dazu im Detailinformationsbereich zu überprüfen.
Detailinformationsbereich
Size
Die Breite und dann die Höhe der ausgewählten zusammengesetzten Ebene zusammen mit der Position der oberen linken Ebene relativ zur oberen linken Seite des Seiten-Viewports. Beispiel: "1034 x 28055 (bei 0, 0)".
Gründe für das Zusammensetzen
Gründe, warum das Browserrenderingmodul die Ebene erstellt hat. Beispiel: "Sekundäre Ebene, um Inhalte zu hausieren, die gescrollt werden können."
Speicherschätzung
Der für die ausgewählte Ebene verbrauchte Speicher. Beispiel: "116 MB".
Paint Anzahl
Wie oft die ausgewählte Ebene vom Renderingmodul gezeichnet wurde.
Die Registerkarte "Z-Index"
Die Registerkarte "Z-Index " enthält einige der gleichen Features wie die DOM-Registerkarte , fügt jedoch Z-Index-Beschriftungen im 3D-Zeichenbereich hinzu.
Hintergrundinformationen finden Sie unter MDN > CSS-Referenz > Z-Index.
Elementtyp anzeigen (Abschnitt)
Der Abschnitt "Elemente anzeigen" auf der Registerkarte "Z-Index " steuert, welche Elemente der Seite im 3D-Zeichenbereich angezeigt werden.
Das Optionsfeld " Alle anzeigen " zeigt alle Elemente der Seite an. Diese Ansicht ist die schnellste Möglichkeit, alle Seitenelemente anzuzeigen, nachdem die anderen 3D-Anzeigeeinstellungen geändert wurden.
Das Optionsfeld " Nur Stapelkontexte anzeigen " zeigt nur die Seitenelemente an, die für die Z-Index-Stapelung relevant sind. Diese Ansicht entfernt Elemente, die nicht an einem Stapelkontext teilnehmen, und vereinfacht das DOM, um eine einfachere Navigation im 3D-Zeichenbereich zu erzielen.
Das Kontrollkästchen Z-Index-Beschriftungen anzeigen blendet die Z-Index-Beschriftungen im 3D-Zeichenbereich ein oder aus. Dieses Kontrollkästchen ist standardmäßig aktiviert.
Farbtyp (Abschnitt)
Auf der Registerkarte "Z-Index " können Sie aus den folgenden Farbschemas auswählen, um das DOM im 3D-Zeichenbereich zu visualisieren:
Optionsfeld "Lila bis Weiß" – Der 3D-Zeichenbereich zeigt Elemente von Lila bis Weiß an.
Optionsfeld "Hintergrundfarbe " – Der 3D-Zeichenbereich zeigt Elemente an, die mit der Für jedes Element definierten Hintergrundfarbe gerendert werden.
Mit diesen Optionsfeldern können Sie die Optionen durchlaufen 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-Beschriftungen fügen visuelle Informationen im 3D-Zeichenbereich hinzu. Daher gibt es pro Benutzerfeedback auf der Registerkarte "Z-Index " weniger Farboptionen als auf der DOM-Registerkarte .
Die DOM-Registerkarte
Die DOM-Registerkarte bietet eine allgemeine Debugansicht, anstatt sich auf Z-Index zu konzentrieren. Das DOM ist enger und sauberer gestapelt als auf der Registerkarte "Z-Index ", da im 3D-Zeichenbereich keine Z-Index-Kontextbeschriftungen vorhanden sind.
Schachtelungsebene für Seite (Schieberegler)
Die Zahl neben dem Schieberegler gibt die Anzahl der Ebenen für das Dokument an. Wenn Sie den Schieberegler nach links ziehen, werden die äußersten Ebenen entfernt, bis eine Schachtelungsebene festgelegt 1ist, die nur das am weitesten hinten stehende Element im DOM anzeigt. Verwenden Sie den Schieberegler, um die Unübersichtlichkeit zu reduzieren. Dadurch können Sie sich genauer ansehen, was in den unteren Ebenen los ist.
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 "Lila bis Weiß" – Der 3D-Zeichenbereich zeigt Elemente von Lila bis Weiß an.
Blaues bis gelbes Optionsfeld – Der 3D-Zeichenbereich zeigt Elemente von blau bis gelb an.
Regenbogen-Optionsfeld – Die 3D-Canvas zeigt Elemente wie Lila, Blau, Grün, Gelb, Orange und Rot an.
Verwenden des Optionsfelds "Bildschirmtextur " – Rendert den Inhalt der Webseite (Farb- oder Bilddatei) auf den Elementen.
Optionsfeld "Hintergrundfarbe " – Der 3D-Zeichenbereich zeigt Elemente an, die mit der Für jedes Element definierten Hintergrundfarbe gerendert werden.
Symbolleiste über dem 3D-Zeichenbereich
Momentaufnahme wiederholen (Schaltfläche)
Klicken Sie auf die Schaltfläche "Momentaufnahme wiederholen " (
Laden Sie das DOM erneut, damit es dem neuesten Webseiten-Viewport entspricht. Wenn Sie beispielsweise den Viewport schmaler machen oder zu einer Geräteemulationsansicht wechseln, können Sie pro Emulieren mobiler Geräte (Geräteemulation) wechseln.
Wenn die Registerkarte " Zusammengesetzte Ebenen " ausgewählt ist, wird diese Schaltfläche ausgelassen, da das Erneute Anzeigen 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 " (
"Ansicht zurücksetzen").), um die Verschiebung und Drehung der Seite zurückzusetzen.
Schwenkansicht (Schaltfläche)
Um die Seite nach links, rechts, oben oder unten zu verschieben, klicken Sie auf die Schaltfläche " Schwenkansicht " ( "Schwenkansicht"). Ziehen Sie dann die Seite auf dem 3D-Zeichenbereich mit der Maus in die gewünschte Richtung.
Ansicht drehen (Schaltfläche)
Wenn Sie die Seite mit der Maus drehen möchten, klicken Sie auf die Schaltfläche " Ansicht drehen " ( "Ansicht drehen"). Ziehen Sie dann die Seite im 3D-Zeichenbereich im gewünschten Winkel mit der Maus.
Um die Seite mithilfe 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 UND-TASTE
left arrowright arrow. - Um die Seite vertikal zu drehen, drücken Sie die UND-TASTE
up arrowdown arrow.
Die Tasten drehen die Seite, unabhängig davon, ob die Schaltfläche " Ansicht verschieben " oder " Drehen " auf der Symbolleiste ausgewählt ist.
Isoliert ausgewähltes Element (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 im 3D-Zeichenbereich ausgewählt haben, während gleichzeitig die Übersichtlichkeit reduziert wird, die komplexe Webseiten im 3D-Zeichenbereich erstellen können.
Eltern einschließen (Kontrollkästchen)
Das Kontrollkästchen "Übergeordnete Elemente einschließen " steuert, ob die übergeordneten Elemente eines ausgewählten Seitenelements im 3D-Zeichenbereich angezeigt werden. Das Kontrollkästchen " Übergeordnetes Objekt einschließen " ist standardmäßig aktiviert. Wenn dieses Kontrollkästchen aktiviert ist, wählen Sie zum Anzeigen eines Elements und eines seiner übergeordneten Elemente im 3D-Zeichenbereich ein Element im 3D-Zeichenbereich oder im Elementtool 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 DOM-Registerkarte ausgewählt ist.
So zeigen Sie nur das ausgewählte DOM-Element zusammen mit den übergeordneten und untergeordneten Elementen 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 von Ihnen 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 Elemente 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, aber nicht die übergeordneten Elemente des Elements an:
- Deaktivieren Sie das Kontrollkästchen " Übergeordnete Elemente 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 von Ihnen 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 unten rechts im 3D-Zeichenbereich funktionieren unabhängig von der ausgewählten Registerkarte gleich.
Zoomschieberegler – Dadurch wird die Seite ein- oder verkleinert, genauso 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 "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.