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:

Grafik als Data-URI kopieren

Diese Funktion ist neu in Firefox 29.

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:

In Firefox 29 und neuer wurde die Schaltfläche "Ein Element der Seite auswählen" in die Werkzeuge-Box verschoben.

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: