Firefox 11 kann Webseiten in 3D visualisieren

Mozilla spendiert Firefox in Version 11 ein neues und absolut innovatives Entwicklerwerkzeug, welches die Visualisierung der Struktur von Webseiten in 3D ermöglicht. Für Webentwickler ist das ein sehr interessantes Feature, da es eine vollkommen neue Sichtweise auf das Document Object Model (kurz: DOM) bietet, die es so bislang noch in keinem anderen Browser gibt. Und für alle anderen ist es zumindest eine lustige Spielerei. 😉

Entwickelt wurde dieses Feature unter dem Namen Tilt und für alle, welche nicht auf Firefox 11 warten wollen, gibt es das auch als Erweiterung. Die in Firefox integrierte Lösung baut praktisch auf dieser auf, harmoniert zusätzlich aber wunderbar mit den bereits vorhandenen Entwicklerwerkzeugen und kommt optisch deutlich weniger überladen daher.

Tilt bildet den Seitenbaum einer Webseite mit Hilfe von WebGL in 3D statt wie aus vergleichbaren Tools bekannt als 2D-Diagramm ab. Dabei werden alle Elemente als Box dargestellt, deren Farbe vom Typ des Elements (div, h1, p, table, …) abhängt. Die Höhe der Boxen hängt vom übergeordneten Element ab, die Basis und damit quasi den „Boden“ bildet das body-Element. Dabei kann die Webseite wahlweise über Maus oder Tastatur beliebig gedreht und gezoomt werden, so dass praktisch alle Stellen sichtbar werden. Durch die enge Verzahnung mit den anderen Werkzeugen erhält man schnell den dazugehörigen HTML-Quellcode samt CSS-Attribute.

Diese Art der Darstellung erleichtert den Überblick über die Seitenstruktur ungemein und könnte sich in Zukunft zu einem unverzichtbaren Tool für Webentwickler entwickeln. Fehler in der Seitenstruktur sowie Elemente außerhalb der Seitenstruktur können sich so viel schneller finden lassen.

Gestartet kann die 3D-Visualisierung entweder über das Menü Webentwickler > Untersuchen oder über die Tastenkombination Strg + Shift + I werden.

Wie gut sich Tilt in die anderen Entwicklerwerkzeuge einfügt, demonstriert das folgende Video, welches am besten im Vollbildmodus anzuschauen ist: