"Inspect Element" ist ein Entwicklertool im Firefox-Browser, mit dem Sie HTML-Code auf jeder Webseite verfolgen können. Die HTML- und CSS-Stylesheets einer Webseite können mit "Inspect Element" bearbeitet werden. Sie können versuchen, eine Seite nach Belieben zu bearbeiten und sie wieder in ihren ursprünglichen Zustand zurückversetzen, indem Sie einfach die bearbeitete Webseite neu laden.
Schritt
Teil 1 von 2: Elemente prüfen
Schritt 1. Firefox aktualisieren (optional)
Es ist möglich, dass Sie nicht auf die in diesem Artikel beschriebenen Funktionen zugreifen können, wenn Sie eine ältere Version von Firefox verwenden. Das Update wird automatisch installiert, wenn Sie überprüfen, welche Firefox-Version Sie verwenden.
Firefox 9 und frühere Versionen verfügen überhaupt nicht über das Tool "Element prüfen"
Schritt 2. Klicken Sie mit der rechten Maustaste auf ein beliebiges Webseitenelement
Sie können mit der rechten Maustaste auf jedes Bild, Text, Hintergrund oder Element klicken. Wenn Ihre Maus nur eine Taste hat, führt eine Kombination aus Linksklick und Strg-Taste zu einem Rechtsklick.
Schritt 3. Klicken Sie im Dropdown-Menü auf "Element prüfen"
Am unteren Rand des Fensters wird eine Symbolleiste angezeigt. Ein Panel unter der Symbolleiste wird ebenfalls angezeigt und zeigt den HTML-Code auf der aktiven Seite an.
Schritt 4. Lernen Sie die vorhandenen Symbolleisten und Panels kennen
Wenn Sie "Element prüfen" verwenden, werden mehrere Bedienfelder unterhalb des Browserfensters geöffnet. Im Folgenden werden die Namen und Funktionen der Symbolleisten und Panels in "Element prüfen" beschrieben:
- In der obersten Reihe befindet sich die Toolbox-Symbolleiste. Hier finden Sie mehrere Werkzeuge, aber wir konzentrieren uns auf die Schaltfläche „Informationen“auf der linken Seite. Stellen Sie sicher, dass diese Schaltfläche in dieser Anleitung aktiv ist (erkennbar an der Farbe der Schaltfläche, die bei Aktivierung blau wird).
- Darunter befindet sich eine Zeile mit Breadcrumbs von HTML-Elementen, die die Position des aktuell ausgewählten Elements anzeigen.
- Der Bereich unter den Navigationsaufforderungen zeigt den HTML-Baum oder die "Markup-Ansicht" der Webseite. Der HTML-Code des ausgewählten Elements wird in diesem Bereich markiert und zentriert.
- Der rechte Bereich zeigt das CSS-Stylesheet der aktuellen Webseite an.
Schritt 5. Wählen Sie ein anderes Element aus
Wenn die Symbolleiste geöffnet ist, können Sie ganz einfach andere Elemente auswählen. Dazu gibt es drei Möglichkeiten:
- Bewegen Sie den Mauszeiger über eine HTML-Zeile, um das ausgewählte Element zu markieren (diese Funktion erfordert Firefox 34+). Klicken Sie auf den HTML-Code, um dieses Element auszuwählen.
- Klicken Sie auf das Werkzeug "Element auswählen" in der linken Ecke der Symbolleiste: Es hat ein Cursor-förmiges Symbol über einem Kästchen. Bewegen Sie den Cursor auf der Webseite, um ein Element zu markieren, und klicken Sie darauf, um es auszuwählen.
Schritt 6. Verfolgen Sie den HTML-Code
Klicken Sie auf eine beliebige Stelle im HTML-Bereich. Verwenden Sie die linke und rechte Richtungstaste auf der Tastatur, um von Code zu Code zu wechseln (diese Funktion erfordert Firefox 39+). Diese Methode ist nützlich, um Elemente auszuwählen, die zu klein sind, um mit dem Cursor ausgewählt zu werden.
- Ausgegrautes HTML kennzeichnet Elemente, die nicht auf der Seite angezeigt werden. Die darin enthaltenen Elemente sind Kommentare wie Knoten und andere Elemente, die von der CSS-Eigenschaft display ausgeblendet werden.
- Klicken Sie auf den Pfeil links neben dem Feld, um den Inhalt anzuzeigen oder auszublenden. Um den gesamten Inhalt anzuzeigen, halten Sie alt=""Image" oder option gedrückt, während Sie auf den Pfeil klicken.</li" />
Schritt 7. Suchen Sie das Element
Suchen Sie nach dem Suchfeld (schleifenförmiges Symbol) in der äußersten rechten Ecke der Breadcrumbs-Zeile. Klicken Sie auf, um das Suchfeld zu erweitern, und geben Sie den HTML-Code ein, nach dem Sie suchen möchten. Während Sie tippen, wird ein Pop-up mit passenden Suchergebnissen angezeigt. Klicken Sie in den Suchergebnissen auf ein Element und scrollen Sie im HTML-Bereich zum gesuchten Code.
Teil 2 von 2: HTML bearbeiten
Schritt 1. Laden Sie die Seite neu, um von vorne zu beginnen
Wenn Sie noch nicht mit Website-Entwicklungstools vertraut sind, beachten Sie, dass Sie keine dauerhaften Änderungen an den von Ihnen bearbeiteten Seiten vornehmen. Ihre Änderungen erscheinen nur auf Ihrem Bildschirm, bis Sie die Seite neu laden oder schließen. Fühlen Sie sich frei zu experimentieren, auch wenn Sie nicht wissen, was passieren wird.
Schritt 2. Doppelklicken Sie auf den zu bearbeitenden HTML-Code
Doppelklicken Sie auf Inline-HTML. Geben Sie den neuen Text ein und drücken Sie die Eingabetaste, um die Änderungen zu speichern.
Schritt 3. Klicken und halten Sie das Werkzeug im Breadcrumb, um weitere Optionen anzuzeigen
Beachten Sie, dass sich die Breadcrumb-Symbolleiste zwischen dem HTML-Baum und der darüber liegenden Symbolleiste befindet. Klicken und halten Sie ein Werkzeug in dieser Zeile, um weitere Menüs zu öffnen. Nachfolgend finden Sie einen Hinweis auf die verfügbaren Optionen (nicht erschöpfend):
- Mit "Als HTML bearbeiten" können Sie alle HTML-Inhalte aus dem HTML-Baum direkt bearbeiten, anstatt jede Zeile zu bearbeiten.
- "Copy Inner HTML" kopiert den gesamten Inhalt innerhalb des Nodes, während "Copy Outer HTML" den Inhalt und die Nodes (wie oder
- "Einfügen →" bringt mehrere Optionen zum Einfügen der Kopie, zB vor dem Knoten oder nach dem ersten Kind des Knotens.
- :hover,:active und:focus ändern das Erscheinungsbild des Elements, wenn der Benutzer interagiert. Geänderte Effekte werden über das CSS-Stylesheet definiert (Bearbeitbar über das Bedienfeld auf der rechten Seite).
Schritt 4. Ziehen und ablegen
Um Elemente im Code neu anzuordnen, klicken und halten Sie den HTML-Code, bis eine gepunktete Linie angezeigt wird. Bewegen Sie die Linie im Baum nach oben und unten und lassen Sie die Maustaste los, wenn die Linie an der gewünschten Stelle ist.
Diese Funktion erfordert Firefox 39 und höher
Schritt 5. Schließen Sie die Entwicklersymbolleiste
Um das gesamte Fenster „Element prüfen“zu schließen, klicken Sie auf die Schaltfläche X in der oberen rechten Ecke der Symbolleiste über dem CSS-Bedienfeld.
Tipps
- Sie können die Symbolleiste auch über die Menüoptionen oben im Fenster öffnen:
- Windows: Firefox → Webentwickler → Tools umschalten
- Mac oder Linux: Tools → Web Developer → Toggle Tools
- Firefox 40 bietet die Möglichkeit, das CSS-Bedienfeld auszublenden, damit Sie mehr Platz zum Bearbeiten von HTML haben. Suchen Sie nach dem Pfeilsymbol in der äußersten rechten Ecke der Breadcrumbs-Zeile und rechts neben dem Suchfeld. Klicken Sie auf dieses Symbol, um das CSS-Bedienfeld auszublenden, und klicken Sie erneut, um es anzuzeigen.
- Sie können auch CSS-Panels bearbeiten, diese werden jedoch in diesem Artikel nicht aufgeführt. Eine Anleitung zum Bearbeiten von CSS-Code finden Sie im Internet.
