Stichpunkt Firefox: DOM Inspector Tutorial

< Firefox 3.0, Juni 2008 >

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 immer noch nicht ganz ausgereift, hat überall seine Macken, ist aber ein mächtiges Tool und hilfreich für jeden, der die Elemente einer Webseite analysieren möchte, wenn sie sich nicht so wie erwartet verhalten.

Der Inspector ist nicht für den normalen Surfer gedacht. Er wurde bisher kaum dokumentiert, es ist keine Hilfe erhältlich und er wurde auch nur halbherzig ins Deutsche übersetzt. Ian Oeschger, einer der Mozilla Entwickler, hat nur eine sehr knappe Introduction to the DOM Inspector geschrieben und die DOM Inspector FAQ auf Mozilla.org gibt auch nicht viel zur Benutzung her. Hier ist Versuch und Irrtum angesagt.

Im Folgenden beschreibe ich an einigen Beispielen, wie man den DOM Inspector benutzen kann. Wir werden diese Webseite, die du gerade betrachtest, etwas genauer untersuchen und an einigen Stellen manipulieren. Ich hoffe dir dadurch dieses Werkzeug etwas näher zu bringen.

Bist du bereit? Beherrscht du die Grundlagen von HTML und CSS? Besuchst du diese Seite mit Firefox oder Seamonkey? Ist der DOM Inspector installiert? Na dann los...

Start und Überblick

Der aktuelle Firefox 3 bringt den Inspector nicht mehr bei der Standard-Installation mit, so wie es frühere Versionen taten. Jetzt muss man ihn als DOM Inspector Firefox Add-on extra installieren. Dass er jetzt die Versionsnummer 2.0 trägt, ist ihm außer dieser Eigenschaft aber nicht anzumerken, denn er hat sich kaum verändert. Allerdings ist zu hoffen, dass er mit der Auslagerung nicht ganz aufs Abstellgleis geschoben wird.

Den Inspector startet man über das Menü Extras -> Dom Inspector oder durch die Tastenkombination <Strg>+<Shift>+<i>. Das aktuelle Dokument wird in beiden Fällen gleich geladen.

Der Inspector präsentiert sich in zwei Bereichen: links sehen wir den DOM Nodes Baum des Dokuments, ähnlich 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 eines der kleinen grau-blauen +-Symbole, "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 Sybmole kann man auch einen Doppelklick auf den Namen des Elements machen um dessen Kinder anzuzeigen.

Nach dem Starten zeigt der Inspector als obersten Node das "#document" an, das nur einen weiteren Node enthält, "HTML". Dieses ist der Abschnitt einer Webseite, der zwischen den Tags <html> und </html> im Quelltext des Dokuments steht. Öffnet man diesen Node durch einen Klick auf den "twistie", sieht man dann dessen Kind-Elemente, also den <head> und <body> der Webseite. Wir untersuchen im Folgenden den sichtbaren Inhalt dieser Seite, die du jetzt gerade liest, so wie sie im Browser angezeigt wird, also all das, was ich im BODY des HTML-Dokuments angegeben habe.

DOM Inspector

Um den Text dieser Seite zu lesen und sie gleichzeitig im DOM Inspector zu untersuchen, ist es sinnvoll, sich die Webseite auch im Inspector anzeigen zu lassen. Wenn du Ansicht -> Browser aktivierst und anschließend den Menüpunkt Inspizieren rechts neben der Adresse klickst, öffnet sich unten ein dritter Bereich mit der HTML-Ansicht der aktuellen Seite.

Noch ein Wort zu den vielen leeren "#text"-Einträgen im DOM-Baum des Inspectors. Damit sind die Zeilenumbrüche zwischen den HTML-Elementen gemeint. Die Diskussion, ob es sinnvoll ist sie hier aufzuführen, ist so alt wie der Inpector selber. Wer will, kann sie in diesem langen Thread in Bugzilla nachlesen. Da diese Leer-Einträge für unsere Versuche nur störend sind, blenden wir sie durch Deaktivieren der Option "Leere Textknoten anzeigen" im Menüpunkt Ansicht aus. Dann müsste der DOM Inspector in etwa wie oben abgebildet aussehen.

Die Struktur einer Webseite

Zum Glück habe ich meine Webseite einfach und tabellenlos aufgebaut, so dass sich ihre Struktur leicht erschließt. Traditionelle Websites, die viele und verschachtelte Tabellen zur Strukturierung des 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. Mehr zu diesem Thema habe ich im Stichpunkt CSS geschrieben.

Sieht man mal von den vier #comments ab, also meinen (unsichtbaren) Kommentaren im Quelltext, 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 oben und unten, die Mitte besteht noch einmal aus zwei DIV-Containern namens "haupt" und "menu". Einfach, nicht wahr?

Wenn du im DOM Inspector auf einen Node klickst, blinkt das jeweilige Element in der Webansicht für eine kurze Zeit rot umrandet auf. Probiere es für alle Nodes meiner Webseite aus. Sicher wirst du feststellen, dass der Inspector noch so einige Macken hat: Manchmal hat er Schwierigkeiten mit der genauen Lokalisierung, ab und an verschwindet der rote Rand nicht wieder (dann scrolle den Bereich einmal kurz aus dem Fenster raus und zurück). Tja, er ist eben noch nicht ganz perfekt, aber für eine einfache Orientierung reicht es.

Design durch StyleSheets

Sehen wir uns den Kopf dieser Webseite im DOM Inspector einmal näher an: Er enthält zwei weitere Nodes, die DIVs "kopflinks" und "kopfrechts", der erstere enthält selber noch ein weiteres Element, einen Link zur Startseite dieser Website. Betrachten wir nun das DIV "kopfrechts" genauer.

Dropdown-Menü Ansicht Bisher haben diesen Bereich nur als Node, also als HTML-Element gesehen, doch der Inspector weiß noch mehr darüber. Ist dieser Eintrag im linken Fenster ausgewählt, können wir im rechten Fenster die Ansicht verändern: Klicke dazu dort auf den kleinen Pfeil neben dem Icon, das bis jetzt die Beschriftung "Objekt - DOM Node" trägt. Interessant sind besonders die Ansichten "Box Model", "CSS Style Rules" und "Computed Style".

Betrachten wir zunächst die Ansicht Box Model. Für alle Block Level Elements, also Elemente, die einen eigenen Platz einnehmen (div, p, h1, etc.) findet man hier die genaue Position, bezogen auf das übergeordnete Element, und die Abstände zu anderen oder enthaltenen Elementen. Das dient nur zur kompakten Information und ist sehr sinnvoll bei einer Fehlersuche, verändern kann man die Werte in dieser Ansicht nicht. Das geht nur in der CSS-Ansicht.

Wählen wir nun die CSS Style Rules aus: der Inspector öffnet rechts einen neuen Fensterbereich und wenn du oben ein Element anklickst, werden unten die CSS-Angaben gezeigt, die hierfür festgelegt wurden. Ausserdem gibt es noch einige Einträge zu Firefox-internen Regeln; sie enden hier mit "-source", haben die Eigenschaft physical und sind für uns ohne Bedeutung. Gucke dir auch die CSS-Festlegungen für weitere Elemente meiner Webseite an.

Diese Ansicht des DOM Inspectors eignet sich besonders dafür, die Eigenschaften eines Elements zu ermitteln, die explizit gesetzt wurden. Will man jedoch die Werte für alle Styleangaben sehen, also auch die von übergeordneten Nodes geerbten, wählt man aus dem Dropdown-Menü die Ansicht Computed Style und erhält alle CSS-Regeln, die für das aktuelle Element gelten. Wenn sich auf einer meiner Webseiten ein Bereich einmal nicht so benimmt, wie ich es eigentlich erwarte, hilft mir hier der Inspector, die konkret verwendeten Werte zu ermitteln. Das Verändern dieser Eigenschaften, ein Hinzufügen von Definitionen oder das Durchspielen von Alternativen funktioniert jedoch nur in der Ansicht CSS Style Rules, und darum geht es im nächsten Schritt.

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 in der Ansicht CSS Style Rules durch einen Doppelklick auf eine Eigenschaft oder über das Kontextmenü der rechten Maustaste. Hier einige Vorschläge:

Rechtsklicke im linken Inspector-Fenster auf das DIV "kopfrechts" und wähle im Kontextmenü "Löschen". Der gesamte Node mit allen darin enthaltenen Elementen wird im DOM Inspector und aus der Webvorschau entfernt.
Aktiviere das DIV "kopflinks", wähle rechts die Ansicht CSS Style Rules, markiere die Regel "#kopflinks" und doppelklicke unten ihre Eigenschaft "float". Ändere im Eingabefebster den Wert von left in right. Und schon steht mein Domainname oben rechts in der Webseite.
Verändere auf dieselbe Weise auch den Abstand vom oberen Rand, setze also padding-top von 15px auf z.B. 5px. Anschließend ändere die Textgröße font-size auf 20px.
Füge eine neue Eigenschaft hinzu durch das Anklicken der gleichnamigen Option im Kontextmenü der rechten Maustaste. Dabei werden nacheinander zwei ganz ähnlich aussehende Fenster geöffnet: im ersten gibt man den Eigenschaftsnamen an und im zweiten deren Wert. Wähle als Eigenschaft "border" und als Wert "2px dotted red" - 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 gepunkteten roten Rahmen um meinen Domainnamen.
Verändere die Hintergrund-Farbe des gesamten DIVs "kopf" auf seagreen und seine Höhe auf 100px. Ein Versuch, hier auch die Textfarbe zu ändern, wird allerdings scheitern. Warum? Na klar, mein Domainname in "kopflinks" ist ein Link und kein Text. Darum gehe zum Ankernode "A" im DIV "kopflinks" und ändere hier in der Regel "#kopf a" die Eigenschaft color auf yellow.
Weitere Änderungen und Verschönerungen meiner Webseite werden dir jetzt sicher selber einfallen. Viel Spaß dabei, und wenn was gutes herauskommt, maile es mir für meinen Style Switcher.

Diese Änderungen werden natürlich nur in der HTML-Ansicht des Inspectors (oder, wenn sie nicht aktiviert wurde, in deinem 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.

Ein bestimmtes Objekt einer Webseite untersuchen

Möchtest du ein ganz bestimmtes Element einer Webseite mit dem Inspector genauer analysieren, hilft der nebenstehend abgebildete Knopf: Klicke ihn im Dom Inspector an, wechsele dann zur Webansicht und klicke auf das Objekt. Sofort springt die Anzeige im Inspector zum gewählten Node und du kannst ihn mit allen seinen Abhängigkeiten untersuchen.

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ü Dokument Stylesheets. Allerdings werden diese genau so angezeigt, wie der Browser sie auswertet und nicht mit der Formatierung und der Schreibweise, die der Ersteller in der CSS-Datei vorgenommen hat. Auch alle Shortcuts sind aufgelöst.

Auch in dieser Ansicht kann man alle Werte editieren und verändern. Damit lässt sich recht einfach ein optimler Wert für eine bestimmte Eigenschaft eines Objekts ermitteln und seine Abhängigkeit zu umgebenden Elementen feststellen. Das ist genau das, was Webdesigner zu schätzen wissen - wenn sie den DOM Inspector zur Kenntnis nehmen.