Mit einem Klick auf die 3D-Untersuchung Schaltfläche gelangst du in in den 3D-Untersuchungsmodus. In diesem Modus werden die HTML Elemente als dreidimensionale Blöcke dargestellt. Die Verschachtelung der Inhalte wird so auf eine eindrückliche Art und Weise virtualisiert, was einem das Studieren des Aufbaus der Seite erleichtert.
Durch Klicken uns Ziehen mit der Maus, kann man die Ansicht in alle Richtungen drehen und so die DOM Struktur von verschiedenen Winkeln aus betrachten. Auch Elemente ausserhalb des Bildschirmrands und solche, die versteckt sind, werden in dieser Ansicht sichtbar. Mit einem Klick auf ein Element, sieht man den entsprächenden Code im HTML panel bzw. dem Style panel. Umgekehrt kann man auch ein Element im Code auswählen, damit es im 3D-Untersuchungsmodus hervorgehoben wird.
Falls der 3D-Untersuchung Schaltfläche nicht angezeigt wird, ist es möglich, dass du deinen Grafik-Treiber aktualisieren musst. Siehe Liste blockierter Grafik-Treiber für weitere Informationen.
Steuerung der 3D-Ansicht
Die Ansicht im 3D-Untersuchungsmodus kann mit der Maus und der Tastatur gesteuert werden.
| Funktion | Tastatur | Maus |
| Vergrössern/Verkleinern | + / - | Scroll wheel up/down |
| Nach links/rechts drehen | a / d | Maus nach links/rechtsziehen |
| Nach oben/unten kippen | w / s | Maus nach oben/unten ziehen |
| Ansicht nach links/rechts verschieben | ← / → | - |
| Ansicht nach oben/unten verschieben | ↑ / ↓ | - |
| Vergrösserung/Verkleinerung zurücksetzten | 0 | - |
| Ausgewähles Element fokusieren | f | - |
| Ansicht (Grösse und Sichtswinkel) zurücksetzten | r | - |
| Ausgewähltes Element ausblenden | x | - |
Anwendungsbeispiele
Die 3D-Untersuchung ist in vielen Hinsichten hilfreich:
- Zur Evaluierung von Fehlern bei der Verschachtelung. Oft schleichen sich Fehler bei der Verschachtelung von Inhalten ein. In der 3D-Ansicht können diese Fehler viel schneller gefunden werden.
- Falls Inhalte gar nicht oder nicht vollständig angezeigt werden, kann die 3D-Ansicht helfen, die Fehlerquelle zu finden. Auch Elemente, welche sich ausserhalb des Bildschirmrands befinden, werden dadurch sichtbar.
- Du kannst die Struktur deiner Seite genau analysieren und so dein Layout optimieren.
- Und zu guter letzt: Es sieht einfach cool aus!