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-Baumhierarchie, die Z-Index-Stapelkontextbaumhierarchie und die auf der Seite erstellten zusammengesetzten Ebenen zu verstehen.

Detaillierter Inhalt:

Einführung

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-Baumhierarchie, die Z-Index-Stapelkontextbaumhierarchie und die auf der Seite erstellten zusammengesetzten Ebenen zu verstehen.

Das Tool

Auf der linken Seite verfügt das Tool "3D-Ansicht " über 3 Registerkarten:

  • Die Registerkarte Zusammengesetzte Ebenen zeigt die zusammengesetzten Ebenen, die vom Browser für Ihre Webseite erstellt werden. Jede Ebene enthält ein realistisches Rendering des Inhalts in der Ebene, um ein umfassendes Erlebnis beim Verschieben der Seite im 3D-Raum zu bieten.

  • Die Registerkarte "Z-Index" zeigt eine 3D-Darstellung der Stapelkontextstruktur. Verwenden Sie diese Registerkarte, um Z-Index-Stackingprobleme auf Ihrer Webseite zu debuggen.

  • Die Registerkarte DOM zeigt eine 3D-Darstellung der DOM-Struktur. Verwenden Sie diese Registerkarte, um das DOM als Ganzes zu erkunden, wobei alle Elemente leicht zugänglich sind.

Auf der rechten Seite stellt der 3D-Canvas die Webseite dar, je nachdem, welche Registerkarte und Optionen Sie auswählen.

Video: Debuggen des Webs in 3D

Miniaturbild für das Video

Öffnen des Tools "3D-Ansicht"

Sie können das Tool für die 3D-Ansicht entweder in der Aktivitätsleiste oder im Bereich "Schnellansicht " öffnen.

  • Um den maximalen Platz auf dem Zeichenbereich zu erhalten, öffnen Sie das Tool "3D-Ansicht" in der Aktivitätsleiste.

  • Wenn Sie das Tool "Elemente" und das Tool " 3D-Ansicht" gleichzeitig verwenden möchten, öffnen Sie das Tool "3D-Ansicht" im Bereich "Schnellansicht ". Auf diese Weise können Sie die im 3D-Zeichenbereich dargestellten DOM-Baumelemente anzeigen. Dies ist die Standardeinstellung; Im Befehlsmenü wird " 3D-Ansicht anzeigen " als im Schnellansichtsfenster geöffnet angezeigt.

Öffnen des Tools "3D-Ansicht" in der Aktivitätsleiste

  1. Öffnen Sie die Webseite, die Sie in 3D visualisieren möchten. Verwenden Sie zum Beispiel die Demoseite des Tierheims .

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

  3. 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 (Symbol "). Die Registerkarte 3D-Ansicht wird in der Aktivitätsleiste geöffnet:

    Das 3D-Ansichtstool, das im Hauptbereich angezeigt wird, mit seiner Registerkarte in der Aktivitätsleiste

Öffnen des Tools "3D-Ansicht" im Bereich "Schnellansicht"

  1. Öffnen Sie die Webseite, die Sie in 3D visualisieren möchten. Verwenden Sie zum Beispiel die Demoseite des Tierheims .

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

  3. Wenn der Schnellansichtsbereich nicht angezeigt wird, wählen Sie DevTools anpassen und steuern (...) und dann Schnellansichtsbereich umschalten. Wenn sich der Fokus jedoch auf DevTools befindet, drücken Sie ESC.

  4. 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 (Symbol "). Die Registerkarte "3D-Ansicht" wird im Bereich "Schnellansicht " geöffnet:

    Das 3D-Ansichtstool, angezeigt im Bereich

Aktivieren von WebGPU für die Entwicklung auf Computern ohne Hardware-GPU

Das Tool "3D-Ansicht" stützt sich auf die WebGPU-API, um auf die Hochleistungs-Hardware-GPU zuzugreifen. Auf Computern ohne Hardware-GPU können Sie die folgenden Flags nur in einer Entwicklungsumgebung aktivieren.

Diese Flags sind keine routinemäßigen Voraussetzungen zum Öffnen des 3D-Ansichtstools . Wenn das Tool auf Ihrem Computer funktioniert, behalten Sie die Standardeinstellungen der Flags bei.

Vorsicht: Seien Sie vorsichtig, wenn Sie diese Flags aktivieren. Das enable-unsafe-webgpu Flag ermöglicht die bestmögliche WebGPU-Unterstützung für nicht unterstützte Konfigurationen und könnte Sicherheitsprobleme für Websites aufzeigen. Verwenden Sie dieses Kennzeichen nur für Ihre eigene Entwicklung. Das ignore-gpu-blocklist Flag überschreibt die integrierte Softwarerenderingliste des Browsers und ermöglicht so die GPU-Beschleunigung bei nicht unterstützten Systemkonfigurationen. Diese Flags wirken sich auf den Browser aus, nicht nur auf das Tool für die 3D-Ansicht .

So probieren Sie diese Problemumgehung aus:

  1. Speichern Sie in Microsoft Edge jegliche Arbeit in Ihren geöffneten Registerkarten.

  2. Wechseln Sie zu edge://flags.

  3. Suchen Sie nach ignore-gpu-blocklist, und legen Sie das Kennzeichen auf Aktiviert fest. Sie können auch direkt zu edge://flags/#ignore-gpu-blocklist.

  4. Suchen Sie nach enable-unsafe-webgpu, und legen Sie das Kennzeichen auf Aktiviert fest. Sie können auch direkt zu edge://flags/#enable-unsafe-webgpu.

    Unten rechts wird eine Schaltfläche "Neu starten " angezeigt.

  5. Klicken Sie auf die Schaltfläche Neustart .

    Microsoft Edge wird neu gestartet.

  6. Wechseln Sie zu der Webseite, die Sie visualisieren möchten.

  7. Klicken Sie mit der rechten Maustaste auf die Webseite, und wählen Sie dann "Überprüfen" aus.

    DevTools wird geöffnet.

  8. Öffnen Sie das Tool "3D-Ansicht ".

  9. Debuggen der Webseite.

  10. Wenn Sie mit dem Debuggen fertig sind, edge://flagslegen Sie das ignore-gpu-blocklist Flag und das Flag enable-unsafe-webgpu auf Standard (oder Deaktiviert) fest, und klicken Sie dann unten rechts auf die Schaltfläche Neustart .

Vergrößern, 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.

Seite vergrößern oder verkleinern

Verwenden Sie zum Vergrößern oder Verkleinern der Webseite im 3D-Zeichenbereich das Mausrad oder den Schieberegler unten rechts.

Ansicht schwenken (Schaltfläche)

Um die Seite nach links, rechts, oben oder unten zu verschieben, klicken Sie auf die Schaltfläche "Ansicht schwenken " (das Symbol "), und ziehen Sie dann die Seite auf dem 3D-Zeichenbereich mit der Maus in die gewünschte Richtung.

Ansicht drehen (Schaltfläche)

Um die Seite mit der Maus zu drehen, klicken Sie auf die Schaltfläche Ansicht drehen (das Symbol ") und ziehen Sie dann die Seite auf dem 3D-Zeichenbereich mit der Maus in den gewünschten Winkel.

Um die Seite mithilfe der Tastatur zu drehen, klicken Sie in den 3D-Zeichenbereich, um den Fokus darauf zu setzen, sodass ein schwarzer Rahmen angezeigt wird, und drücken Sie dann die Pfeiltasten.

  • Wenn Sie die Seite horizontal drehen möchten, 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 .

Mit den Tasten wird die Seite gedreht, unabhängig davon, ob die Schaltfläche "Ansicht schwenken " oder "Ansicht drehen " in der Symbolleiste ausgewählt ist.

Weitere Informationen finden Sie in den folgenden Abschnitten auf dieser Seite:

Die Registerkarte Zusammengesetzte Ebenen

In der Ansicht Zusammengesetzte Ebenen wird im 3D-Canvas die Liste der Ebenen angezeigt, die vom Browser-Renderingmodul 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. In der Registerkarte Zusammengesetzte Ebenen wird der Ebenenbaum automatisch erweitert, und die Registerkarte Details unterhalb des Ebenenbaums zeigt Informationen zur ausgewählten Ebene an:

Die Registerkarte Zusammengesetzte Ebenen

Slow scroll rects (Kontrollkästchen)

Mit dem Kontrollkästchen "Slow scroll rects" (Korrekturen für langsamen Bildlauf) werden Abschnitte der Seite hervorgehoben, die einen langsamen Bildlauf verursachen. Dieses Kontrollkästchen ist hilfreich, um Leistungsprobleme zu untersuchen. Bestimmte Webseiten verwenden JavaScript, um das Scrollen (oder Berühren) auf bestimmten Seitenelementen auf eine Weise zu erkennen, die das Scrollen durch die Webseite langsamer machen kann, als es normalerweise sein könnte.

Dieses Kontrollkästchen hebt die Felder der gerenderten Webseite, die diese Leistungsprobleme verursachen können, rosa hervor.

Dieses Kontrollkästchen ähnelt dem Kontrollkästchen Probleme mit der Bildlaufleistung im Renderingtool , das die langsamen Rects auf der Seite direkt (gelb) hervorhebt. Weitere Informationen finden Sie unter Finden von Leistungsproblemen beim Scrollen 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 die Elemente.

Ebenen-Erweiterungsbaum

Erweitern Sie diese Struktur, um die Liste der zusammengesetzten Ebenen anzuzeigen. Klicken Sie auf einen Layer, um detaillierte Informationen dazu im Detailinfobereich anzuzeigen.

Details (Infobereich)

Der Detailinfobereich unterhalb des Bereichs Zusammengesetzte Ebenen enthält die folgenden Felder.

Size

Die Breite und dann die Höhe der ausgewählten zusammengesetzten Ebene zusammen mit der Position der oberen linken Seite der Ebene relativ zur oberen linken Ecke des Seitenansichtsfensters. Beispiel: "1034 x 28055 (bei 0, 0)".

Gründe für die Komposition

Gründe, warum das Browser-Renderingmodul die Ebene erstellt hat. Zum Beispiel: "Sekundäre Ebene, um Inhalte unterzubringen, die gescrollt werden können."

Schätzung des Arbeitsspeichers

Der für die ausgewählte Ebene verbrauchte Arbeitsspeicher. Beispiel: "116 MB".

Anzahl der Farben

Wie oft die ausgewählte Ebene vom Rendering-Modul gemalt wurde.

Die Registerkarte "Z-Index"

Auf der Registerkarte "Z-Index" werden nur die Elemente der Webseite angezeigt, die Stapelkontexte sind oder die entlang der Z-Achse positioniert sind:

Die Registerkarte

Weitere Informationen finden Sie unter Stapelkontext und Verwenden von z-index bei MDN.

Elementtyp (Abschnitt) anzeigen

Der Abschnitt "Elemente 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, die auf der Z-Achse positioniert sind. Diese Ansicht ist nützlich, um Probleme mit Elementen zu beheben, die falsch auf der Z-Achse positioniert sind.

  • Das Optionsfeld Nur Stapelkontexte anzeigen zeigt nur die Seitenelemente an, die Stapelkontexte sind. Diese Ansicht ist nützlich, um schnell herauszufinden, welche Elemente Kontexte auf der Webseite stapeln.

Mit dem Kontrollkästchen " Z-Index-Beschriftungen anzeigen " werden die Z-Index-Beschriftungen im 3D-Zeichenbereich ein- oder ausgeblendet. 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 zu Weiß ": Im 3D-Zeichenbereich werden Elemente von Lila bis Weiß angezeigt.

  • Optionsfeld Hintergrundfarbe verwenden: Der 3D-Canvas zeigt Elemente an, die mit der Hintergrundfarbe gerendert werden, die für jedes Element definiert ist.

Mit diesen Optionsfeldern können Sie die Optionen umschalten 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, sodass es gemäß Benutzerfeedback auf der Registerkarte "Z-Index " weniger Farboptionen gibt als auf der DOM-Registerkarte .

Die Registerkarte "DOM"

Die Registerkarte DOM bietet eine allgemeine Debugansicht der DOM-Struktur. Auf der Registerkarte DOM werden alle Elemente der Webseite im 3D-Zeichenbereich angezeigt:

Die Registerkarte

Die X- und Y-Koordinaten eines Elements im 3D-Canvas stimmen mit den Koordinaten des Elements auf der Webseite überein. Die Z-Koordinate eines Elements basiert darauf, wie tief das Element in der DOM-Struktur verschachtelt ist.

Schachtelungsebene für die 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 weggelassen, bis nur eine Schachtelungsebene zurückbleibt, die auf zurückbleibt 1, bei der nur das Element ganz hinten im DOM angezeigt wird. Um die Unübersichtlichkeit zu reduzieren, ziehen Sie den Schieberegler, um einen genaueren Blick auf das Geschehen 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: Visualisieren Sie das DOM im 3D-Canvas:

  • Optionsfeld "Lila zu Weiß ": Im 3D-Zeichenbereich werden Elemente von Lila bis Weiß angezeigt.

  • Optionsfeld "Blau bis Gelb": Im 3D-Zeichenbereich werden Elemente von Blau bis Gelb angezeigt.

  • Regenbogen-Optionsfeld – Im 3D-Zeichenbereich werden Elemente in Lila, Blau, Grün, Gelb, Orange und Rot angezeigt.

  • Optionsfeld "Bildschirmtextur" verwenden : Rendert den Inhalt der Webseite (Farbe oder Bilddatei) auf die Elemente.

  • Optionsfeld Hintergrundfarbe verwenden: Der 3D-Canvas zeigt Elemente an, die mit der Hintergrundfarbe gerendert werden, die für jedes Element definiert ist.

Symbolleiste über dem 3D-Zeichenbereich

Momentaufnahme erneut aufnehmen (Schaltfläche)

Klicken Sie auf der Registerkarte DOM oder auf der Registerkarte Z-Index auf die Schaltfläche "Momentaufnahme erneut aufnehmen" (das Symbol um die 3D-Darstellung der DOM-Struktur oder der Stapelkontextstruktur an den neuesten Webseitenansichtsport anzupassen. Beispielsweise nachdem Sie den Viewport verkleinert haben oder wenn Sie zu einer Geräteemulationsansicht wechseln, per Emulieren mobiler Geräte (Geräteemulation).

Wenn die Registerkarte Zusammengesetzte Ebenen ausgewählt ist, wird diese Schaltfläche weggelassen, da die erneute Aufnahme der Momentaufnahme automatisch erfolgt, wenn Sie die Größe des Ansichtsfensters ändern.

Ansicht zurücksetzen (Schaltfläche)

Klicken Sie auf die Schaltfläche Ansicht zurücksetzen (das Symbol "), um das Verschieben und Drehen der Seite zurückzusetzen.

Ansicht schwenken (Schaltfläche)

Um die Seite nach links, rechts, oben oder unten zu verschieben, klicken Sie auf die Schaltfläche "Ansicht schwenken " (das Symbol "), und ziehen Sie dann die Seite auf dem 3D-Zeichenbereich mit der Maus in die gewünschte Richtung.

Ansicht drehen (Schaltfläche)

Um die Seite mit der Maus zu drehen, klicken Sie auf die Schaltfläche Ansicht drehen (das Symbol ") und ziehen Sie dann die Seite auf dem 3D-Zeichenbereich mit der Maus in den gewünschten Winkel.

Um die Seite mithilfe der Tastatur zu drehen, klicken Sie in den 3D-Zeichenbereich, um den Fokus darauf zu setzen, sodass ein schwarzer Rahmen angezeigt wird, und drücken Sie dann die Pfeiltasten.

  • Wenn Sie die Seite horizontal drehen möchten, 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 .

Mit den Tasten wird die Seite gedreht, unabhängig davon, ob die Schaltfläche "Ansicht schwenken " oder "Ansicht drehen " in 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 auf die Anzeige eines Teils des DOM konzentrieren.

Wählen Sie ein Element der Webseite im 3D-Zeichenbereich aus, und klicken Sie dann auf die Schaltfläche " Ausgewähltes Element isolieren ". Im 3D-Canvas werden das ausgewählte Element und die über- oder untergeordneten Elemente des Elements angezeigt, ohne die restlichen Seitenelemente anzuzeigen.

Verwenden Sie diese Schaltfläche, um das ausgewählte Element im 3D-Zeichenbereich anzuzeigen und gleichzeitig die Unübersichtlichkeit zu reduzieren, die komplexe Webseiten im 3D-Zeichenbereich schaffen können.

Übergeordnete Elemente einbeziehen (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 "Übergeordnete Elemente einschließen " ist standardmäßig aktiviert. Wenn dieses Kontrollkästchen aktiviert ist, wählen Sie ein Element im 3D-Zeichenbereich oder im Tool "Elemente " aus, und klicken Sie dann auf die Schaltfläche "Ausgewähltes Element isolieren ", um ein Element und eines seiner übergeordneten Elemente auf dem 3D-Zeichenbereich anzuzeigen.

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 zusammen mit den über- 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 ausgewählte DOM-Element zusammen mit den übergeordneten Elementen des Elements an, nicht jedoch die untergeordneten Elemente des Elements:

  • 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 an, nicht jedoch die übergeordneten Elemente des Elements:

  • 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 ausgewählte DOM-Element ohne seine übergeordneten oder untergeordneten 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 .

Bewegungssteuerelemente unten rechts

Steuerelemente unten rechts

Die Steuerelemente unten rechts im 3D-Zeichenbereich funktionieren unabhängig davon, welche Registerkarte Sie auswählen, gleich.

  • Zoom-Schieberegler: Hiermit wird die Seite vergrößert oder verkleinert, wie beim Mausrad, oder mit zwei Fingern über das Touchpad gezogen.

  • Schaltfläche "Aufwärts": Verschiebt die Seite relativ zum Koordinatensystem der Seite nach oben.

  • Schaltfläche "Nach unten": Verschiebt die Seite relativ zum Koordinatensystem der Seite nach unten.

  • Schaltfläche Links: Verschiebt die Seite relativ zum Koordinatensystem der Seite nach rechts.

  • Schaltfläche Rechts – Verschiebt die Seite relativ zum Koordinatensystem der Seite nach links.

Weitere Informationen

  • Zuletzt aktualisiert um