So verwenden Sie Inspect Element zum vorübergehenden Bearbeiten einer Webseite • BUOM

14. April 2021

Inspect Element ist ein leistungsstarkes Tool zum vorübergehenden Ändern von Elementen auf einer Website. Dies kann Ihnen helfen, mehr darüber zu erfahren der Code für den Stil oder die Funktion, die Sie reproduzieren möchten. Unabhängig davon, ob Sie Designer, Autor oder Vermarkter sind, werden Sie davon profitieren, wenn Sie lernen, wie Sie Inspect Element verwenden. In diesem Artikel erklären wir Inspect Element und wie man es in vier gängigen Webbrowsern verwendet.

Was ist Inspect Element und warum ist es wichtig?

Inspect Element ist ein Entwicklertool, das in den Webbrowsern Firefox, Google Chrome, Internet Explorer und Safari enthalten ist. Sie können damit die dem Inhalt zugrunde liegenden HTML- und CSS-Codes anzeigen, beispielsweise die genauen Farben oder Schriftarten bestimmter Elemente, und diese sogar vorübergehend bearbeiten, um eine Vorschau der Änderungen anzuzeigen. Bei der Überprüfung finden Sie möglicherweise JavaScript-Code, der Animationen erstellt, Quellcode und CSS-Code, der das Design der Website bildet. Sie können Inspect Element auch verwenden, um genaue Farben zu bestimmen oder zu sehen, wie lange das Laden einer Website dauert oder wie viel Bandbreite zum Laden verwendet wurde.

Mit Inspect Element können Sie alles auf der Seite ändern. Wenn Sie den Code ändern, werden die Änderungen gleichzeitig auf Ihrem Bildschirm angezeigt, bleiben jedoch nur für die Dauer Ihrer Sitzung wirksam, sodass Sie nicht riskieren, dass die Seite beschädigt wird.

Was können Sie mit Inspect Element machen?

Inspect Element ist das perfekte Tool, um vorübergehende Änderungen an einer Webseite vorzunehmen. Hier sind einige der spezifischen Vorteile der Verwendung je nach Position:

• Webdesigner: Webdesigner können damit eine Vorschau von Layout- und Designänderungen anzeigen, bevor sie diese auf einer Seite implementieren, oder sehen, wie eine Farbe auf einem mobilen Gerät aussehen wird.

• Schriftsteller. Autoren müssen manchmal einen Screenshot einer Webseite machen, die vertrauliche Informationen enthält. Sie können Inspect Element verwenden, um diesen vertraulichen Inhalt zu entfernen.

• Digitale Vermarkter. Digitale Vermarkter können Inspect Element verwenden, um versteckte Schlüsselwörter auf der Webseite eines Mitbewerbers zu entdecken. Sie können damit auch feststellen, ob ihre Website für den Google PageSpeed-Test zu langsam lädt.

• Supportmitarbeiter: Supportmitarbeiter können das Inspect-Element verwenden, um ein kurzes Beispiel einer Änderung zu zeigen und den Entwicklern zu demonstrieren, was sie beheben müssen.

So verwenden Sie Inspect Element in Chrome

Befolgen Sie diese Schritte, um das Inspect Element-Tool in Chrome zu verwenden:

1. Stellen Sie eine Verbindung zum Internet her

Öffnen Sie die Website, die Sie anzeigen möchten, im Chrome-Browser.

2. Zugriff auf das Verifizierungselement

Um auf das Inspect-Element zuzugreifen, können Sie eine der folgenden drei Optionen verwenden:

• Klicken Sie mit der rechten Maustaste auf eine beliebige Stelle auf der Seite und wählen Sie unten im angezeigten Menü „Inspizieren“ aus.

• Klicken Sie auf die drei vertikalen Punkte in der Seitenleiste und wählen Sie dann im Dropdown-Menü Weitere Tools -> Entwicklertools aus.

• Verwenden Sie die Tastenkombinationen: „F12“ auf einem PC, um Inspect Elements zu öffnen, oder „CMD+Option+I“ auf einem Mac.

Das Fenster „Element“ wird unten in Ihrem Browser angezeigt und zeigt die Registerkarte „Elemente“ an, bei der es sich um das gesuchte Tool handelt.

3. Wählen Sie eine Ansicht aus

Öffnen oder verschieben Sie das Feld „Element prüfen“, um mehr zu sehen und eine bessere Leistung zu erzielen. Klicken Sie auf die drei vertikalen Punkte auf der rechten Seite eines Felds, um es in einem eigenen Fenster zu öffnen (Ansicht lösen), oder verschieben Sie es nach rechts, um mehr Platz zum Arbeiten zu haben (rechte Ansicht). Sie können die Größe des Fensters auch ändern, indem Sie den Cursor um die Ecken ziehen.

4. Erkunden Sie die Registerkarten

Sobald Sie Inspect Element aufrufen, werden Sie verschiedene Registerkarten bemerken, mit denen Sie das Erscheinungsbild Ihrer Website anpassen können, darunter:

• Registerkarte „Elemente“: „Element prüfen“ ist das erste Tool, das geöffnet wird, wenn Sie die Entwicklertools im Browser starten. Sie können auf „Elemente“ klicken, um dorthin zurückzukehren, nachdem Sie eine andere Registerkarte durchsucht haben.

• Registerkarte „Erkunden“: Sie können das gesamte JavaScript, CSS oder HTML sehen, mit dem die Website erstellt wurde.

• Registerkarte „Suchen“. Mithilfe der Registerkarte „Suchen“ können Sie in jeder Datei auf einer Webseite nach bestimmten HTML-Elementen oder Inhalten suchen. Um darauf zuzugreifen, klicken Sie auf die drei vertikalen Punkte und wählen Sie dann „Alle Dateien durchsuchen“, um es zu öffnen.

• Registerkarte „Emulation“. Auf der Registerkarte „Emulation“ können Sie eine Vorschau einer Webseite anzeigen und sehen, wie sie auf einem mobilen Gerät aussehen wird. Sie können zwischen verschiedenen Gerätetypen wählen und sogar die Bildschirmauflösung und das Seitenverhältnis anpassen. Um auf diese Registerkarte zuzugreifen, öffnen Sie „Element prüfen“ und klicken Sie auf das Telefonsymbol.

5. Ändern Sie das CSS

Sie können das CSS ändern und die Abmessungen, Rahmen, Schriftarten oder Farben ändern, indem Sie sie im CSS-Bedienfeld bearbeiten.

6. Elemente ändern

So können Sie Elemente ändern:

• Fügen Sie ein Element hinzu. Klicken Sie mit der rechten Maustaste auf eine beliebige Stelle im Bedienfeld und wählen Sie Attribut hinzufügen aus.

• Element ausblenden. Klicken Sie auf das Element, das Sie ausblenden möchten, und wählen Sie „Element ausblenden“.

• Element entfernen. Klicken Sie auf das Element, das Sie entfernen möchten. Wählen Sie „Überprüfen“ und dann „Artikel entfernen“.

7. Nehmen Sie Änderungen an HTML vor

Gehen Sie zur Registerkarte Elemente. Sie sollten den HTML-Code der Webseite sehen. Sie können folgende Änderungen vornehmen:

Text auf einer Webseite ändern

Klicken Sie in der oberen Ecke des Entwicklerfensters mit dem Maussymbol über dem Quadrat. Klicken Sie dann auf der Seite auf den Text, den Sie ändern möchten. Sie können jetzt in der Entwicklersymbolleiste eine blau hervorgehobene Textzeile sehen. Doppelklicken Sie auf den blau hervorgehobenen Text und er kann bearbeitet werden. Sie können in dieses Textfeld eingeben, was Sie möchten, und die Eingabetaste drücken. Der ausgewählte Text hat sich auf der Webseite geändert. Wenn Sie die Seite aktualisieren, wird Ihre Änderung verschwinden.

Schriftart ändern

Wenn Sie bereits einmal auf das Maussymbol über dem Quadrat geklickt haben, um die vorherige Änderung durchzuführen, können Sie nun auf die Verknüpfung zugreifen. Klicken Sie auf der Webseite auf die Wörter, die Sie ändern möchten, und wählen Sie dann „Überprüfen“ aus dem Kontextmenü. Der ausgewählte Satz wird dann in der Entwicklersymbolleiste hervorgehoben. Rechts neben diesem Angebot sehen Sie ein Unterpanel.

Jede weitere Registerkarte – Stil, Berechnung, Ereignis-Listener – kann das Erscheinungsbild des Satzes auf der Seite ändern. Mit Stilen können Sie die Ausrichtung in der Textausrichtungsfunktion ändern. Doppelklicken Sie auf das Wort, das die Ausrichtung beschreibt, und geben Sie das gewünschte Wort ein. Wenn es beispielsweise zentriert ist, könnten Sie „linksbündig“ schreiben.

Farbe ändern

Klicken Sie im Element prüfen auf das Maussymbol, um die Registerkarte „Stil“ zu öffnen und eine Farblinie auszuwählen. Dem #-Symbol folgt eine Folge aus Buchstaben und Zahlen. Doppelklicken Sie darauf, geben Sie einen weiteren Code ein und drücken Sie dann die Eingabetaste.

Orange ist beispielsweise #ff4a00 und Blau ist #4199ad.

Schaltfläche „Bearbeiten“.

Wählen Sie auf der Webseite die Schaltfläche aus, die Sie ändern möchten. Klicken Sie dann auf der Registerkarte „Elemente“ mit der rechten Maustaste auf diesen Code. Das Menü wird ausgeblendet. Sie können die verschiedenen Zustände der Schaltfläche sehen:

• :active: So sieht die Schaltfläche aus, wenn ein Besucher darauf klickt.

• :focus: wenn der Besucher es auswählt

• :visited: wenn ein Besucher darauf geklickt hat oder

• :Hover-Status: wenn der Besucher mit der Maus über die Schaltfläche fährt.

Wenn Sie beispielsweise „:focus:“ auswählen und dann den Hintergrundfarbwert ändern, können Sie sehen, wie sich die Farbe der Schaltfläche ändert, wenn Sie darauf klicken.

Bild ändern

Um ein Bild auf einer Webseite zu ändern, können Sie zunächst den Link zum gewünschten Bild kopieren. Öffnen Sie dann Inspect Element und wählen Sie das Originalbild aus, das Sie ändern möchten. Doppelklicken Sie im Bedienfeld „Stile“ auf den Link „Hintergrund-URL“ und fügen Sie den neuen Bildlink ein.

Der Vorgang ist der gleiche wie bei GIF oder Video. Sie müssen nur einen Link hinzufügen.