201114Feb

Arboreal: Visualisierung der DOM-Struktur

Beim Stöbern in den Firebug-Extensions bin ich kürzlich über ein interessantes Projekt gestoßen, mit dem sich die DOM-Struktur einer Seite als Stammbaum grafisch darstellen lässt. Die von Alex Spengler entwickelte Erweiterung nennt sich Arboreal und befindet sich derzeit noch im experimentellen Status. Die Installation der Extension erfordert lediglich eine manuelle Zustimmung des Benutzers.

Arboreal

Wenn Arboreal installiert wurde, findet sich in Firebug im rechten Panel (HTML-Tab) der Punkt "Visualization". Die grafische Hierarchie einer Website wird in diesem Bereich dargestellt — die Elemente des Stammbaus können durch die linke Maustaste verschoben werden. Wird in der Ansicht ein DOM-Element ausgewählt, synchronisiert sich die Auswahl mit dem Seiteninspektor auf der linken Seite, der die gewohnte Ansicht repräsentiert.
Die Erweiterung bietet viele Einstellungsmöglichkeiten und so kann die Darstellung der DOM-Elemente durch etliche Optionen angepasst werden. Tooltips über den Objekten blenden zusätzliche Details wie etwa Attribute oder Text ein. Zudem kann die gesamte Struktur als GraphViz-Datei ausgegeben werden.
Man darf auf die finale Version der Erweiterung gespannt sein, da sie eine alternative Methode zur Auswahl von DOM-Objekten darstellt und zudem die Komplexität einer Website übersichtlich veranschaulicht.

Kommentare

Webmasterle schrieb am 16.02.2011 #1

Interessantes Add-On, was aber leider bei mir gar nicht funktioniert hat, Firefox 3.6.13, Firebug 1.6.2. Es erschien an entspr. Stelle entweder seltsam formatierter Quellcode oder eine leere Fläche statt der Baumstuktur. Aber gut, mal 1.0 abwarten…

Matthias schrieb am 17.02.2011 #2

Seltsam. Ich habe die Extension unter den gleichen Bedinungen (Firefox 3.6.13 und Firebug 1.6.2) installiert. Ich kann mir vorstellen, dass eventuell installierte Firebug-Extensions Probleme machen könnten. Schade, dass sich Arboreal noch im Alpha-Status befindet.