Das Entwicklertool Inspect Element in Firefox ermöglicht es Ihnen, den HTML-Code für alles zu bestimmen, was Sie auf Ihrer Webseite sehen. Das HTML und das zugehörige CSS-Stylesheet können vollständig bearbeitet werden, sobald diese Tools geöffnet sind. Experimentieren Sie mit den gewünschten Änderungen und aktualisieren Sie dann die Seite, um zum beabsichtigten Erscheinungsbild der Webseite zurückzukehren.
Schritte
Teil 1 von 2: Elemente prüfen
Schritt 1. Klicken Sie mit der rechten Maustaste auf ein beliebiges Webseitenelement
Sie können mit der rechten Maustaste auf Bilder, Text, Hintergründe oder jedes andere Element klicken. Wenn Sie keine Zwei-Tasten-Maus haben, klicken Sie mit der linken Maustaste, während Sie die Strg-Taste gedrückt halten.
Schritt 2. Klicken Sie im Dropdown-Menü auf Element prüfen
Am unteren Rand Ihres Fensters sollte eine Symbolleiste erscheinen. Unterhalb der Symbolleiste wird außerdem ein Bereich angezeigt, in dem der HTML-Code der Seite angezeigt wird.
Schritt 3. Identifizieren Sie die Symbolleisten und Bereiche
Wenn Sie auf Element prüfen klicken, werden unten im Fenster mehrere Bereiche geöffnet. Hier ist eine Aufschlüsselung ihrer Verwendungen und Namen:
- Die oberste Zeile ist die Toolbox-Symbolleiste. Dies hat mehrere Entwicklertools, aber wir interessieren uns für Inspector auf der linken Seite. Belassen Sie diese Option (blau hervorgehoben) für diese gesamte Anleitung.
- Unterhalb der Symbolleiste befindet sich eine einzelne Breadcrumbs-Zeile mit HTML-Elementen, die den vollständigen Pfad zum ausgewählten Element anzeigt.
- Der Bereich unter dieser Zeile zeigt den HTML-Baum oder die "Markup-Ansicht" der Seite. Der HTML-Code für das ausgewählte Element wird in diesem Bereich hervorgehoben und zentriert.
- Der rechte Bereich zeigt das CSS-Stylesheet für diese Seite an.
Schritt 4. Wählen Sie ein anderes Element aus
Sobald die Symbolleiste geöffnet ist, ist die Auswahl eines anderen Elements einfach. Hier sind drei Möglichkeiten, dies zu tun:
- Bewegen Sie den Mauszeiger über eine HTML-Zeile, um das entsprechende Element hervorzuheben (erfordert Firefox 34+). Klicken Sie auf den HTML-Code, um dieses Element auszuwählen.
- Klicken Sie ganz links in der Symbolleiste auf das Werkzeug Element auswählen: Das Symbol ist ein Cursor über einem Quadrat. Bewegen Sie den Cursor über die Seite, um Elemente hervorzuheben, und klicken Sie dann, um ein Element auszuwählen.
Schritt 5. Navigieren Sie durch den Code
Klicken Sie auf eine beliebige Stelle im HTML-Bereich. Verwenden Sie die Pfeiltasten nach links und rechts auf Ihrer Tastatur, um sich durch den Code zu bewegen (erfordert Firefox 39+). Dies ist nützlich für Elemente, die zu klein sind, um sie von Hand auszuwählen.
- Graues HTML bezieht sich auf Elemente, die nicht auf der Seite angezeigt werden. Dazu gehören Kommentare, bestimmte Knoten wie, und Elemente, die mit der CSS-Eigenschaft display ausgeblendet wurden.
- Klicken Sie auf den Pfeil links neben Containern, um den Inhalt zu erweitern oder auszublenden. Um alle Inhalte zu erweitern, halten Sie beim Klicken alt=""Image" oder Option gedrückt.</li" />
Schritt 6. Suchen Sie nach einem Element
Suchen Sie nach der Suchleiste (Lupensymbol) ganz rechts in der Zeile Breadcrumbs. Klicken Sie darauf, um es zu erweitern, und geben Sie dann den gesuchten HTML-Code ein. Während Sie tippen, wird ein Popup mit übereinstimmenden Elementen angezeigt. Klicken Sie auf eines, um dieses Element auszuwählen, und scrollen Sie im HTML-Bereich zu seinem Code.
Teil 2 von 2: HTML bearbeiten
Schritt 1. Aktualisieren Sie die Seite, um jederzeit von vorne zu beginnen
Wenn Sie noch nicht mit Webentwicklertools vertraut sind, sollten Sie wissen, dass diese keine dauerhaften Änderungen vornehmen. Ihre Änderungen sind nur auf Ihrem Bildschirm sichtbar und nur so lange, bis Sie die Seite schließen oder aktualisieren. Zögern Sie nicht zu experimentieren, auch wenn Sie sich nicht sicher sind, was passieren wird.
Schritt 2. Doppelklicken Sie auf den HTML-Code, um den Text zu bearbeiten
Doppelklicken Sie auf eine HTML-Zeile. Geben Sie den neuen Text ein und drücken Sie die Eingabetaste, um Ihre Änderungen zu speichern.
Schritt 3. Klicken und halten Sie einen Breadcrumb, um weitere Optionen anzuzeigen
Denken Sie daran, dass sich die Breadcrumb-Symbolleiste zwischen dem vollständigen HTML-Baum und der oberen Symbolleiste befindet. Klicken und halten Sie eines der Elemente in dieser Zeile, um ein umfangreiches Menü zu öffnen. Hier ist eine unvollständige Anleitung zu diesen Optionen:
- "Als HTML bearbeiten" macht den Knoten und seinen gesamten Inhalt im HTML-Baum bearbeitbar, anstatt jede Zeile einzeln bearbeiten zu müssen.
- "Copy Inner HTML" kopiert den gesamten Inhalt des Knotens, während "Copy Outer HTML" den Knoten ebenfalls kopiert (wie z
- „Einfügen →“führt zu mehreren Optionen, wo eingefügt werden soll, beispielsweise vor diesem Knoten oder nach dem ersten Kind des Knotens.
- :hover,:active und:focus ändern das Erscheinungsbild des Elements, wenn der Benutzer damit interagiert. Der genaue Effekt wird durch das CSS-Stylesheet (bearbeitbar im rechten Bereich) bestimmt.
Schritt 4. Ziehen und ablegen
Um Elemente im Code neu anzuordnen, klicken und halten Sie den HTML-Code, bis eine gestrichelte Linie angezeigt wird. Bewegen Sie es im Baum nach oben oder unten und lassen Sie es los, wenn sich die gestrichelte Linie an der gewünschten Stelle befindet.
Dies erfordert Firefox 39 oder höher
Schritt 5. Schließen Sie die Entwicklersymbolleiste
Um all diese ausgefallenen Fenster zu schließen, drücken Sie einfach das X in der äußersten rechten Ecke der Symbolleiste über dem CSS-Bereich.
Tipps
- Sie können die Symbolleiste auch mit diesen oberen Menüoptionen öffnen:
- Windows: Firefox → Webentwickler → Tools umschalten
- Mac oder Linux: Tools → Web Developer → Toggle Tools
- Firefox 40 hat die Option eingeführt, den CSS-Bereich auszublenden, um Ihnen beim Bearbeiten von HTML mehr Platz zu geben. Suchen Sie nach dem Pfeilsymbol ganz rechts in der Zeile Breadcrumbs, rechts neben der Suchleiste. Klicken Sie auf dieses Symbol, um den CSS-Bereich auszublenden, und klicken Sie erneut darauf, um ihn wieder zu erweitern.
- Der CSS-Bereich kann ebenfalls bearbeitet werden, dies würde jedoch den Rahmen dieses Handbuchs sprengen. In diesem Artikel werden CSS-Grundlagen vermittelt.
