Seiteninspektor

Der Seiteninspektor ist ein handliches Werkzeug zur Untersuchung von Stuktur und Gestaltung einer Seite.

Den Inspektor öffnen

Es gibt verschiedene Wege, den Inspektor zu öffnen:

• Wählen Sie die "Inspektor"-Option des "Web Entwickler"-Menüs (die beim Mac ein Untermenü von "Tools"/"Werkzeuge" ist),
• Drücken Sie Strg-Umschalt-C (Cmd-Option-C auf dem Mac OSX und in Linux).
• Klicken Sie mit der rechten Maustaste auf ein Element in einer Webseite und wählen Sie "Element untersuchen"

Der Inspektor erscheint in der Werkzeuge-Box am unteren Rand des Browser-Fensters.

Wenn Sie den Inspektor durch "Element untersuchen" aufgerufen haben, ist das gewählte Element bereits im Inspektor ausgewählt und er verhält sich, wie im Abschnitt "Ein Element auswählen" beschrieben.

Andernfalls wird das Element unter Ihrem Mauszeiger mit einem gestrichelten Rahmen und einer Notiz mit dem Namen des HTML-Elements angezeigt. Wenn Sie die Maus über die Webseite bewegen, ändert sich das hervorgehobene Element. Gleichzeitig wird seine HTML-Defintion im Kontext der Seite linken Bereich des Inspektors angezeigt. Ab Firefox 30 werden ebenfalls Rasterlinien für das Element und sein Box-Modell dargestellt.

Wenn Sie auf ein Element klicken, wird es ausgewählt und der Inspektor verhält sich, wie im Abschnitt "Ein Element auswählen" beschrieben.

Ein Element auswählen

Wenn ein Element ausgewählt ist, wird seine HTML-Definition im HTML-Abschntt im linken Teil und die Stil-Information im rechten CSS-Abschnitt des Inspektors angezeigt.Das Verhalten beim Auswählen von Elementen hat sich in Firefox 29 grundlegend geändert. Ab Firefox 30 zeigt der Inspektor das Box-Modell von Elementen in der Webseite.

Vor Firefox 29

Sobald Sie ein Element durch Klicken auf der Webseite auswählen, wird die Anzeige im Inspektor auf dieses Element fest gelegt, das heißt, Sie können die Maus über die Seite bewegen ohne dass der Inspektor zu einem anderen Element wechselt.

In der Notiz des Elements erscheint auf der linken und der rechten Seite eine Schaltfläche. Die Schaltfläche auf der linken Seite hebt die Festlegung auf das Element auf, so dass Sie neue Elemente auswählen können. Die Schaltfläche auf der rechten Seite öffnet ein Kontextmenü für das Element.

Firefox 29

In Firefox 29 wird der gestrichelte Rahmen um ein Element in der Seite sowie die Notiz nicht mehr angezeigt, wenn ein Element ausgewählt wird. Der Inspektor ist auch nicht mehr auf das ausgewählte Element festelegt: Wenn Sie die Maus im HTML-Teil des Inspektors bewegen, wird das entsprechende Element auf der Webseite hervorgehoben. Um ein anderes Element auf der Webseite auszuwählen, klicken Sie auf die Schaltfläche "Ein Element der Seite auswählen" in der Werkzeugleiste der Werkzeuge-Box:

Firefox 30 und neuer

In Firefox 30 und neueren Version ist das Verhalten identisch zu Firefox 29, zusätzlich zeigt der Inspektor das Box-Modell und Rastlinien für das ausgewählte Element auf der Webseite.

Das Element-Kontext-Menü

Sie können eine Reihe von üblichen Aufgaben mit Hilfe des Kontext-Menüs erledigen. Um das Kontext-Menü zu öffnen, klicken Sie mit der rechten Maustaste auf ein Element im <HTML-Bereich> des Inspektors.

Das Kontext-Menü bietet Ihnen folgende Möglichkeiten:

• Editieren der HTML-Struktur des Elements
• Kopieren des inneren oder äußeren HTML
• Kopieren des eindeutigen Selektors (id) des Elements
• Kopieren einer Grafik als Data-URI
• Löschen des Elements
• Setzen der CSS-Pseudo-Klassen :hover, :focus und :active

Grafik als Data-URI kopieren

In Firefox 29 und neuer enthält das Kontext-Menü einen Eintrag, der das ausgewählte Bild als Data-URI in die Zwischenablage kopiert.

HTML bearbeiten

Um das äußere HTML eines Elements zu bearbeiten, klicken Sie im Kontext-Menü auf "HTML bearbeiten". Es erscheint ein Textfeld im HTML-Bereich:

Sie können hier HTML beliebig bearbeiten: Ändern des Element-Elements, Ändern von Element-Eigenschaften oder Hinzufügen von neuen. Sobald sie außerhalb des Textfeldes klicken werden die Änderungen wirksam.

HTML-Bereich

Der HTML-Bereich zeigt das HTML der Webseite als Baum mit zusammenklappbaren Knoten. Das ausgewählte Element wird durch einen grauen Hintergrund hervorgehoben.

Sie können das HTML – Elemente, Attribute und Inhalt – in diesem Bereich direkt editieren: Klicken Sie doppelt auf das Element, nehmen Sie die gewünschten Änderungen vor und drücken Sie anschließend "Enter", um die Änderungen sofort anzuwenden.

Wenn Sie mit der rechten Maustaste auf ein Element klicken, erscheint das Element-Kontext-Menü.

HTML-Bereich Werkzeugleiste

Über dem HTML-Bereich befindet sich eine Werkzeugleiste, bestehend aus drei Teilen:

Ein Element der Seite auswählen: Wenn Sie diese Schaltfläche anklicken können Sie ein Element auf der Webseite auswählen.
HTML-Brotkrümelnavigation: Sie zeigt die komplette Hierarchie im aktuellen Zweig des ausgewählten Elements. Klicken und halten Sie auf ein Element in dieser Leiste, um ein Kontextmenü zu öffnen, in dem sie ein Geschwisterelement des ausgewählten Eintrags auswählen können. Klicken sie auf die Pfeile am Anfang und Ende der Leiste, um seitlich zu scrollen, falls sie größer als der zur Verfügung stehende Platz sein sollte.
HTML-Element-Suche: