Inhaltsverzeichnis [Dive Into Greasemonkey] Deutsche Version

3.3. Elemente mit dem DOM Inspector untersuchen

Der DOM Inspector erlaubt Ihnen das "geparste" Document Object Model (DOM) jeder Seite zu betrachten. Sie können Details jedes HTML-Elements, Attributs, und jedes Textknoten. Sie können alle CSS-Regeln aus jeder Stylesheet-Datei der Seite sehen. Sie können alle scriptbaren Eigenschaften eines Objektes erkunden. Er ist sehr mächtig.

Der DOM Inspector ist Teil der Firefox-Installation, aber kann unter bestimmten Umständen auf manchen Plattformen nicht standardmäßig insalliert werden. Wenn Sie den Menüpunkt DOM Inspector im Extras-Menü nicht sehen, müssen Sie Firefox reinstallieren, um den DOM Inspector zu erhalten. Dies wird Ihre Bookmarks, Einstellungen, Erweiterungen oder Benutzerscripte nicht verändern.

Anleitunge: Den DOM Inspector installieren

Führen Sie das Firefox-Installationsprogramm aus.
Nachdem Sie die Lizenzbedingungen akzeptiert haben, wählen Sie den Installationstyp Benutzerdefiniert aus.
Nachdem Sie das Installationsverzeichnis gewählt haben, wird Sie der Installationsassistent fragen, welche zusätzlichen Komponenten Sie installieren wollen. Wählen Sie Developer Tools aus.
Nachdem die Installation beendet ist, führen Sie Firefox aus. Sie sollten nun einen neuen Menüpunkt sehen, Extras → DOM Inspector.

Um einen Eidruck zu bekommen, wie mächtig dieses Tool ist, lassen Sie uns eine kleine Tour durch das DOM der DriveIntoGreasemonkey Homepage machen.

Anleitung: Die DriveIntoGreasemonkey-Homepage erkunden und bearbeiten

Besuchen Sie http://diveintogreasemonkey.org/.
Wählen Sie im MenüExtras → DOM Inspector um den DOM Inspector zu öffnen.
Im DOM Inspector Fenster, sollten Sie eine Liste von DOM Knoten im Linken Teil des Fensters sehen. Wenn das nicht der Fall ist, öffnen Sie das Dropdown-Menü in der links oberen Ecke und wählen Sie DOM Nodes.
Der DOM-Node-Baum startet immer mit dem "Document Element", bezeichnet als #document. Erweitern Sie das, um die HTML Elemente aufzudecken.
Erweitern Sie das HTML Element um drei weiter Knoten aufzudecken: HEAD, #text und BODY. Beachten Sie, dass BODY hat eine ID von diveintogreasemonkey-org. Passen Sie die Spalten an, wenn Sie dies nicht sehen.
Erweitern Sie BODY um 5 weiter Knoten aufzudecken: #text, DIV id="intro", #text, DIV id="main", and #text.
Erweitern Sie DIV id="intro" um 2 weiter Knoten aufzudecken: #text and DIV class="sectionInner".
Erweitern Sie DIV class="sectionInner" um 2 weiter Knoten aufzudecken: : #text and DIV class="sectionInner2".
Erweitern Sie DIV class="sectionInner2" um 5 weiter Knoten aufzudecken: #text, DIV class="s", #text, DIV class="s", and #text.
Erweitern Sie das Erste DIV class="s" um 5 weiter Knoten aufzudecken: #text, H1, #text, P, and #text.
Wählen Sie den H1 Knoten. Auf der Originalseite (Hinter dem DOM-Inspeckter), sollte das H1 Element kurz mit einem roten Rand aufläuchten. Im rechten Teil des Fensters, sollten Sie den Knotennamen (“H1”), Namespace URI (leer, denn HTML hat keinen Namespace -- dieser wird nur auf Seiten benutzt die application/xhtml+xml darstellen, oder Seiten, die XML darstellen, in manchen anderen Namespaces), dem Knoten Typ (1 ist ein Element), und dem Knotenwert (leer, denn Headers haben keinen Wert -- der Text ohneblank, since headers do not have a value -- the text im Header hat seine eigenen Knoten).
Im Dropdown-Menü oben im rechten Teil des Fensters, werden Sie einige Auswahlmöglichkeiten sehen:DOM Node, Box Model, XBL Bindings, CSS Style Rules, Computed Style und Javascript Object. Diese stellen verschiedene Informationen über den aktuell ausgewählten Knoen bereit. Manche von ihnen sind editierbar, und die Veränderungen werden sofort auf der Originalseite durchgeführt. Wählen Sie Javascript Object um alle "scriptbaren" Eigenschaften und Methoden des ausgwählten H1 Elements zu sehen.
Wählen Sie CSS Style Rules. Die rechte Fensterhälfte wird sich in zwei Teile aufteilen, der obere wird eine Liste aller Regeln anzeigen, die Einfluss auf das Element haben (Inclusive Default-Regeln, die im Browser selbst eingebaut sind), der untere Teil wird individuelle Eigenschaften anzeigen, die durch solche Regeln definiert werden.
Wählen Sie die zweite Regel aus dem Teil oben rechts, die Style-Regel die durch einen Stylesheet auf http://diveintogreasemonkey.org/css/dig.css definiert wird.
Klicken Sie doppelt auf die font-variant Eigenschaft aus dem rechts unteren Teil des Fensters und geben Sie den neuen Wert normal ein. Auf der Originalseite (hinter dem DOM Inspector), sollte der “Dive Into Greasemonkey” Logo Text sofort von "small-caps" zu normalen Zeichen wechseln.
Klicken Sie rechts (MAC-User Kontrollklick) irgendwo im unteren rechten Teil und wählen Sie Neue Eigenschaft. Es wird sich ein Eingabedialog mit dem Titel “Neue Style-Regel” öffnen. Geben Sie den Eigenschaftennamen background-color ein und klicken Sie auf OK, dann den Eigenschaften-Wert red und klicken Sie dann auf OK um die neue Eigenschaft zu aktivieren. Die neue Eigenschaft und ihr Wert sollten im rechts unteren Teil des Fensters zusammen mit den existierenden Eigenschaften aufgelistet werden, und der Logo-Text auf der Originalseite sollte sofort zu einem roten Hintergrund wechseln.

Wenn Sie nicht viel davon haöten, ihre Zeit damit zu verbringen, sich durch den DOM-Inspector zu klicken, würde ich ihnen empfehlen, die "Inspect Element"-Erweiterung zu installieren, die es ihnen erlaubt, direkt zu einem spezifischen Element im DOM-Inspector zu wechseln.

Sie müssen den DOM Inspector installieren, bevor Sie die "Inspect Elemnt"-Erweiterung installieren, sonst wird Firefox beim starten abstürzen. Wenn dies bereits der Fall ist, öffnen Sie ein Eingabeaufforderungsfenster, wechseln in das Verzeichnis indem Sie Firefox installiert haben und geben firefox -safe-mode ein. Firefox wird nun starten, ohne die Erweiterungen zu starten. Dann wählen sie Extras → Erweiterungen und deinstallieren "Inspect Element".

Anleitung: Direct mit "Inspect Element" inspizieren

Besuchen Sie die Inspect Element Download-Seite und klicken Sie auf Install Now.
Starten Sie Firefox neu.
Besuchen Sie http://diveintogreasemonkey.org/ erneut.
Klicken sie mit Rechts (MAC-User Kontrollklick) auf den Logo-Text Dive Into Greasemonkey.
Im Kontextmenü wählen Sie Inspect element aus. Der DOM Inspector sollte sich öffnen, mit dem H1 Element bereits ausgewählt, und Sie können sofort damit anfangen, zu inspizieren und/oder die Eigenschaften zu verändern.

Der DOM Inspector wird Ihnen nicht “folgen”, wenn Sie weitersurfen. Wenn Sie den DOM Inspector öffnen und dann im Orignialfenster irgendwo anders hinnavigieren, wird der DOM Inspector ziemlich verwirrt werden. Es ist das beste, zuerst das Ziel zu besuchen, dann all das zu untersuchen, was Sie untersuchen möchten, und dann den DOM Inspector zu schließen, bevor Sie etwas anderes machen.

Weiterfürendes

Anleitung für den DOM Inspector
Inspect Element Erweiterung
Inspector Widget Erweiterung , eine Alternative zur "Inspect Element"-Erweiterung, die eine Toolbar-Button anstelle eines Kontext-Menü-Eintrags hinzufügt.

← Mit GM_log "loggen"

Ausdrücke mit der Java-Script-Shell auswerten →