DOM Inspector

Der Hauptzweck des DOM Inspectors (DOMi) besteht darin, den Document Object Model (DOM)-Baum von HTML- und XML-basierten Dokumenten zu untersuchen und zu bearbeiten.

Der DOM Inspector ist ein Werkzeug für Web-Entwickler, um Elemente einer Webseite zu untersuchen und zu verändern, eigene oder fremde, lokal oder online. Er ist eine Art Debugger für HTML-Dokumente und ihre Formatierung durch StyleSheets. Er ist inzwischen sehr ausgereift, und hat sich zu einem mächtigen Tool entwickelt.

Ein DOM-Knoten kann aus der Baumstruktur oder durch Klicken auf den Browser-Chrome ausgewählt werden. Neben dem DOM-Baum-Viewer sind auch andere Viewer verfügbar, darunter Box Model, XBL Bindings, CSS Rules, Style Sheets, Computed Style, JavaScript Object sowie eine Reihe von Viewern für die Zugänglichkeit von Dokumenten und Anwendungen. Standardmäßig hebt der DOM Inspector einen neu ausgewählten Nicht-Attribut-Knoten mit einem rot blinkenden Rahmen hervor.

Das Tool wurde von Joe Hewitt entwickelt und war ursprünglich in der Mozilla Application Suite sowie in den Versionen von Mozilla Firefox vor Firefox 3 enthalten. Heutzutage ist es in Firefox und SeaMonkey enthalten.

Ähnliche Werkzeuge gibt es auch in anderen Browsern, z. B. im Dragonfly von Opera, im Web Inspector von Safari, in der Internet Explorer Developer Toolbar und in den Developer Tools von Google Chrome.

Einführung

Bist du bereit? Besuchst du diese Seite mit Mozilla 1.0 und nicht mit einem anderen Browser, in dem es keinen DOM Inspector gibt? Ist diese Seite in zwei verschiedenen Tabs geöffnet? Na dann los...

Start und Überblick

Den Inspector startet man am besten durch die Tastenkombination <Strg>+<Shift>+<i>, der Weg über das Menü Tools -> Web-Entwicklung -> Dom Inspector öffnet leider nicht das aktuelle Dokument, sondern man muß noch einmal die URL eingeben. Bei der Tastenkombination ist das aktuelle Dokument gleich geladen.

Der Inspector präsentiert sich in zwei Bereichen: links sehen wir den DOM Nodes Baum, der ähnlich funktioniert wie der Ordner-Baum im Windows Explorer. Auf der rechten Seite stehen Informationen zum ausgewählten Element. (Wem die Begriffe DOM, Node usw. nichts sagen, ignoriert sie einfach oder macht sich beim W3C darüber schlau.) Klickt man im linken Bereich auf einen der kleinen grau-blauen Pfeile, "twisties" genannt, klappt dieser Node auf und zeigt seine Child-Nodes, also alle Elemente, die in ihm enthalten sind. Statt einem Einfach-Klick auf die winzigen Pfeile kann man auch einen Doppelklick auf den Namen des Elements machen um dessen Kinder anzuzeigen.

Nach dem Starten zeigt der Inspector drei Nodes an (die "#text" Einträge ignorieren wir erst einmal): "HTML", was für die HTML-Seite steht und seine Kinder-Nodes "HEAD" und "BODY", die beiden Abschnitte, die in keinem HTML-Dokument fehlen. Da der HEAD-Bereich einer Webseite im Browser nicht angezeigt wird, untersuchen wir lieber den BODY. Klappen wir diesen Node auf und sehen uns die Struktur meiner Webseite an.

Die Struktur einer Webseite

Zum Glück habe ich meine Webseite einfach und tabellenlos aufgebaut, so daß sich ihre Struktur leicht erschließt. Traditionelle Websites, die viele und verschachtelte Tabellen zur Strukturierung es Inhalts einsetzen, sind viel schwieriger zu durchschauen. Aber der Inspector ist ja auch für moderne Seiten da, die Inhalt und Formatierung sauber voneinander trennen, bei den alten kann er nicht viel ausrichten. Mehr zu diesem Thema habe ich unter CSS geschrieben.

Sieht man mal von dem einfachen Anker-Node "A" ab, der nur dafür sorgt, daß der kleine nach-oben-Pfeil funktioniert, gliedert sich meine Seite in drei DIV-Abschnitte: "kopf", "mitte" und "fuss". Gucke dir die Seite, die du gerade liest, einmal an: Der Kopf und der Fuss sind die beiden gelblichen Bereiche, die Mitte besteht aus zwei DIV-Boxen namens "menu" und "haupt". Einfach, nicht wahr?

Wenn du das Tab-Register, für das der Inspector seine Arbeit verrichtet, aktiviert hast, siehst du, daß immer, wenn du auf einen Node klickst (und nicht auf den kleinen Pfeil daneben), das jeweilige Element für eine kurze Zeit rot umrandet blinkt. Probiere es für alle Nodes meiner Webseite aus. Sicher wist du feststellen, das der Inspector noch so einige Macken hat: Im Kopf und im Fuß blinkt er ziemlich richtig, im großen Mittelbereich hat er Schwierigkeiten mit der Lokalisierung, weil dieser größer ist als das Bildschirmfenster. Tja, es ist eben erst die Version 1.0...

Design durch StyleSheets

Sehen wir uns den Kopf einmal näher an (da blinkt es ja auch richtig): Er enthält zwei weitere Nodes, "kopflinks" und "kopfrechts", die jeweils wieder ein Kind haben, einen Anker-Link. Gehen wir zum DIV "kopfrechts".

Bisher haben wir ihn nur als Node gesehen, doch der Inspector weiß noch mehr über ihn. Ist dieser Eintrag im linken Inspector-Bereich ausgewählt, können wir im rechten Bereich die Ansicht verändern: Klicke dazu dort auf den kleinen Pfeil neben dem Icon, das bis jetzt die Beschriftung "Object - DOM Node" trägt. Interessant in diesem Fall sind die Einträge "Box Model" und "CSS Style Rules". Achtung: Klicke beim Box Model lieber nicht auf den Knopf "Capture", mein Browser hat dabei die Neigung abzustürzen.

Bleiben wir lieber beim CSS: der Inspector öffnet einen weiteren Fensterbereich, und wenn du rechts oben eine Rule anklickst, werden rechts unten alle CSS-Angaben gezeigt, die ich im StyleSheet für dieses Element festgelegt habe. Wohlgemerkt, es ist eine externe CSS-Datei, die ich eingebunden habe, aber das ist für einen guten Inspector kein Hindernis, er findet alles. Probiere das ruhig für verschiedene Nodes meiner Webseite aus.

Manipulation einer Webseite

Haben wir erforscht, was unser Inspector alles auffinden und anzeigen kann, gehen wir jetzt dazu über, meine Webseite zu verändern. Das geschieht über das Kontextmenü der rechten Maustaste. Hier einige Vorschläge:

• Rechtsklicke im linken Inspector-Fenster auf das DIV "kopfrechts" und wähle "Delete". Der gesamte Node mit allen enthaltenen Elementen wird im Inspector und aus der Webseite entfernt.
• Aktiviere das DIV "kopflinks", wähle rechts die Ansicht CSS Style Rules, markiere die Rule "#kopflinks" und unten ihren style "float". Wähle im Kontextmenü "Edit" und ändere den value von left nach right. Und schon steht mein Domainname rechts in der Webseite.
• Verändere auf dieselbe Weise auch den Abstand von Rand, also padding-right von 20px auf einen höheren Wert.
• Füge eine neue Eigenschaft hinzu, also "New Property" im Kontextmenü. Dabei werden nacheinander zwei ganz ähnlich aussehende Fenster geöffnet: im ersten gibt man den Namen der neuen Eigenschaft (property) an und im zweiten deren Wert (value). Wähle als Eigenschaft "border" und als Wert "2px dotted green" - dieses ist ein CSS-Shortcut für drei verschiedene border-Eigenschaften. Der Inspector löst sie geschickt auf und zeigt alle als Einzelwerte an. Auf der Webseite ergibt es einen grünen gepunkteten Rahmen um meinen Domainnamen.
• Verändere die Farbe des gesamten DIVs "kopf" auf seagreen.
• Weitere Änderungen und Verschönerungen meiner Webseite werden dir jetzt sicher selber einfallen.

Diese Änderungen werden natürlich nur im Browser vorgenommen, die HTML-Datei selber wird nicht angerührt. Das wäre ja auch noch schöner, wenn jeder jede Seite im Web wirklich verändern könnte! Eine Aktualisierung des Browserfensters bzw. Tab-Registers stellt den ursprünglichen Zustand wieder her. Aber anschließend sollte man den Inspector beenden und bei Bedarf wieder neu starten, sonst kommt er ins Stolpern.

Anzeige der StyleSheets einer Webseite

Der Inspector kann nicht nur die Styles einzelner Elemente anzeigen, sondern auch alle eingebundenen Stylesheets eines Webdokuments vollständig darstellen. Wähle dazu im linken Bereich im Auswahlmenü "Document Stylesheets". Allerdings werden sie genau so angezeigt, wie der Browser sie sieht und nicht mit der Formatierung, die der Ersteller in der CSS-Datei vorgenommen hat. Und auch alle Shortcuts sind aufgelöst.

Autor: Thomas Stich; die Seite befindet sich in Überarbeitung