Wie man das Inspect-Element in Chrome, Safari und Firefox verwendet

In gewisser Weise ist es die Aufgabe von Web-Entwicklern und Designern, die Benutzer davon zu überzeugen, dass eine Website eine einzigartige Einheit ist, mehr als nur eine Reihe von HTML-Elementen, die so formatiert wurden, dass sie schön aussehen. Mit den richtigen Werkzeugen können jedoch auch Nicht-Entwickler den Vorhang einer Website lüften, um zu sehen, was wirklich hinter den Kulissen passiert.

Sie kennen vielleicht den klassischen „Seitenquelltext anzeigen“-Trick, der das rohe HTML einer Seite im Browserfenster anzeigt. Aber es gibt einen besseren Weg, um Ihre Detektivarbeit zu erledigen: Mit der Funktion „Elemente inspizieren“ können wir das Frontend einer Website ansehen und sogar verändern, was beim Erstellen einer Website oder beim Lernen, wie Websites funktionieren, sehr nützlich sein kann.

In diesem Beitrag erkläre ich, was es bedeutet, Seitenelemente zu „inspizieren“, und wie man dies in drei gängigen Webbrowsern tut.

Inspect ist die Geheimwaffe eines Web-Profis. Entwickler, Designer und Marketingexperten nutzen es häufig, um einen Blick in jede beliebige Website zu werfen (auch in die eigene), um eine Vorschau auf Inhalts- und Stiländerungen zu erhalten, Fehler zu beheben oder um zu erfahren, wie eine bestimmte Website aufgebaut ist. Wenn Sie zum Beispiel eine faszinierende Oberfläche auf einer konkurrierenden Website finden, können Sie mit dem Inspect-Element das HTML und CSS sehen, aus dem sie besteht.

Sie können sich die Inspect-Funktion Ihres Browsers auch als eine Art „Sandkasten“ vorstellen: Spielen Sie mit einer Webseite herum, so viel Sie wollen – ändern Sie Inhalte, Farben, Schriftarten, Layouts usw. Wenn Sie fertig sind, aktualisieren Sie die Seite einfach, um alles wieder in den Normalzustand zu versetzen. Inspect ändert nicht die Webseite selbst – nur wie sie in Ihrem eigenen Browser erscheint – also experimentieren Sie ruhig!

Inspect ist auch ein unglaublich wertvolles Werkzeug für diejenigen, die Webentwicklung lernen. Anstatt den reinen Quellcode zu betrachten, können Sie mit inspect element mit der Seite interagieren und sehen, wie jede Code-Zeile einem Element oder Stil zugeordnet ist. Indem Sie besser verstehen, was eine typische Webseite ausmacht, können Sie im Falle eines Fehlers oder wenn Sie eine Änderung vornehmen möchten, effektiv mit den Entwicklern kommunizieren.

Inspect mag ein „Entwickler-Tool“ sein, aber Sie müssen keinen Code schreiben oder zusätzliche Software installieren, um es zu verwenden. Sie können alles, was ich beschrieben habe, direkt in Ihrem Browser tun – lassen Sie uns lernen, wie.

Wie man Elemente inspiziert

Jeder moderne Webbrowser hat ein natives Werkzeug zum Inspizieren von Elementen. Hier erkläre ich, wie man das Inspektionswerkzeug in den drei Desktop-Webbrowsern verwendet: Google Chrome, Apples Safari und Mozilla Firefox.

Wie man Elemente in Chrome inspiziert

Um den Inspektor in Google Chrome zu verwenden, navigieren Sie zunächst zu einer beliebigen Webseite (in diesen Beispielen werde ich HubSpot.com verwenden). Dort angekommen, haben Sie mehrere Möglichkeiten, das Tool zu öffnen:

• Klicken Sie mit der rechten Maustaste auf einen beliebigen Teil der Seite und wählen Sie „Inspect“. Wenn Sie mit der rechten Maustaste auf ein bestimmtes Seitenelement klicken, wird dieses Element in der Inspektoransicht geöffnet.
• In der oberen Menüleiste wählen Sie Ansicht > Entwickler > Entwicklertools.
• Öffnen Sie Anpassen und Steuern von Google Chrome, indem Sie auf das Drei-Punkte-Symbol in der oberen rechten Ecke des Browserfensters klicken. Wählen Sie dort „Weitere Tools“ > Entwicklertools.
• Nutzen Sie die Tastenkombination Strg-Umschalt-C unter Windows oder Befehl-Option-C unter macOS.

Das Chrome-Entwicklertools-Panel öffnet sich am unteren Rand des Browserfensters. Wenn Sie die Position des Panels ändern möchten, klicken Sie auf das Drei-Punkte-Symbol in der oberen rechten Ecke des Panels (neben dem X-Symbol) und wählen dann Ihre bevorzugte Dock-Position. Ich wähle „Dock to right“ – das macht es einfacher, die gerenderte Seite und ihre Quelle zu sehen:

Am oberen Rand des Inspektionsfensters sehen Sie Registerkarten für Elemente, Konsole, Quellen usw. Dies sind alles Werkzeuge, mit denen wir den Inhalt und die Leistung einer Seite beurteilen können. Alles, was wir für die Inspektion benötigen, befindet sich jedoch unter der Registerkarte Elemente.

Der nächste Bereich darunter ist der HTML-Quelltext der aktuellen Seite. Nehmen Sie sich etwas Zeit, um diesen Bereich zu erkunden, und beachten Sie, wie der Mauszeiger über das Stück Code das entsprechende Element auf der Seite hervorhebt. Blau zeigt den Inhalt eines Elements an, Grün entspricht Padding, und Bereiche in Orange sind Ränder.

Wir können auch das Gegenteil tun – ein Stück Code vom Seitenelement lokalisieren. Dazu klicken Sie auf das Elementauswahl-Symbol in der oberen linken Ecke des Panels:

Nächste klicken Sie auf ein Seitenelement. Sie werden den Quellcode im Inspektionsfenster sehen.

Neben der Anzeige können wir Inspektion verwenden, um den Seiteninhalt zu ändern. Beginnen wir damit, etwas Text auszutauschen. Suchen Sie zunächst einen Textinhalt im Quelltext. Klicken Sie dann mit der rechten Maustaste auf das Element und wählen Sie Text bearbeiten – dies öffnet eine Inline-Texteingabe, in die Sie schreiben können, was Sie wollen. Wenn Sie die Texteingabe abwählen, sehen Sie, wie die Änderungen wirksam werden:

Oder wie wäre es mit gar keinem Text? Wählen Sie einfach das Element im Quellcode aus und löschen Sie es. Das H1 ist dann von der Seite verschwunden.

Keine Sorge – es wird wieder erscheinen, wenn Sie die Seite aktualisieren. Sie können auch jedes Element ausblenden, ohne es zu löschen, indem Sie mit der rechten Maustaste auf das Element im Quellcode klicken und Element ausblenden wählen.

Sie können sogar neue Seitenelemente hinzufügen – klicken Sie mit der rechten Maustaste auf ein Element im Quellcode und wählen Sie Als HTML bearbeiten. Sie sehen dann ein Textfeld, in das Sie HTML einfügen können. Beispiel:

Wenn wir uns im Chrome-Inspect-Panel nach unten bewegen, sehen wir die Registerkarte „Styles“. Dieser zeigt uns, welches CSS-Styling auf das ausgewählte Element angewendet wurde. Klicken Sie auf Codezeilen, um sie umzuschreiben, oder aktivieren/deaktivieren Sie bestimmte Deklarationen, indem Sie die Kästchen daneben aktivieren/deaktivieren. Lassen Sie uns dies für unser <h1>-Element mit der Eigenschaft font-weight tun:

Zuletzt wollen wir noch eine weitere Eigenschaft von Chromes „inspect“-Funktion behandeln: die mobile Ansicht. Beim Erstellen einer Website müssen Designer berücksichtigen, wie die Seiten auf Desktop-, Mobil- und Tablet-Bildschirmen gleichermaßen aussehen. Glücklicherweise können Sie mit Chrome eine Vorschau derselben Webseite in mehreren Bildschirmauflösungen anzeigen. Beginnen Sie, indem Sie auf das Symbol „Gerät umschalten“ in der oberen linken Ecke des Fensters klicken:

Von hier aus können Sie die Bildschirmauflösung manuell einstellen oder eine Gerätevoreinstellung aus dem Menü wählen und dann sehen, wie das Seitenlayout darauf reagiert. Sie können den Bildschirm auch drehen und sogar eine Vorschau der Leistung bei den Geschwindigkeiten „Mid-Tier Mobile“ und „Low-Tier Mobile“ anzeigen.

Wie man Elemente in Safari inspiziert

Um das Safari Inspektionswerkzeug, Web Inspector, zu verwenden, müssen wir zuerst die Safari Entwicklerwerkzeuge aktivieren. Wählen Sie dazu die Safari > Voreinstellungen. Im Einstellungsfenster unter „Erweitert“ markieren Sie das Kästchen neben „Develop-Menü in der Menüleiste anzeigen“. Sie werden sehen, dass dem Menü oben eine Option „Entwickeln“ hinzugefügt wurde.

Als Nächstes rufen Sie die gewünschte Webseite auf. Es gibt drei Möglichkeiten, den Web Inspector zu öffnen:

• Klicken Sie mit der rechten Maustaste auf einen beliebigen Teil der Seite und wählen Sie Element inspizieren. Wenn Sie mit der rechten Maustaste auf ein bestimmtes Seitenelement klicken, wird dieses Element in der Inspektoransicht geöffnet.
• Wählen Sie Entwickeln > Web-Inspektor anzeigen aus der oberen Menüleiste.
• Verwenden Sie das Tastaturkürzel Befehl-Option-I.

Safaris Inspektor wird standardmäßig am unteren Rand des Fensters geöffnet. Um diese Konfiguration zu ändern, klicken Sie auf das Symbol zum Andocken der Anzeige an der rechten Seite oder zum Ausklappen in einem separaten Fenster – beide befinden sich neben dem X-Symbol in der oberen linken Ecke der Anzeige.

Safaris Inspektorpanel besteht aus zwei Spalten. Die erste Spalte zeigt den HTML-Quelltext, die zweite Spalte zeigt das CSS der Seite. Verwenden Sie Ihren Cursor, um den HTML-Quelltext zu erkunden und zu sehen, welche Codezeilen den einzelnen Seitenbereichen entsprechen (blau hebt den Inhalt hervor, grün hebt die Füllung hervor und orange hebt die Ränder hervor):

Wir können die Seite auch direkt inspizieren. Klicken Sie auf das Symbol für die Elementauswahl oben im Bedienfeld:

Wenn Sie jetzt auf ein Seitenelement klicken, zeigt der Web-Inspektor den entsprechenden Quellcode an.

Wie der Inspektor von Chrome können wir auch in Safari Seitenelemente ändern, hinzufügen und entfernen. Um die Seite zu bearbeiten, klicken Sie mit der rechten Maustaste auf ein HTML-Element im Inspektionsbereich und wählen dann eine Option aus dem Menü „Bearbeiten“. Der Web Inspector fordert Sie auf, neuen Text einzugeben und zeigt dann Ihre Änderungen in Echtzeit an:

Oder fügen Sie der Seite ein neues Element hinzu, indem Sie mit der rechten Maustaste auf eine Codezeile klicken und eine Option aus dem Menü „Hinzufügen“ wählen. In diesem Beispiel habe ich ein neues <h1> Kindelement zu einem bestehenden <div> hinzugefügt:

Wenn Sie ein Seitenelement löschen möchten, markieren Sie einfach etwas Code und löschen Sie ihn. Oder klicken Sie mit der rechten Maustaste und wählen Sie „Sichtbarkeit umschalten“, um ein Element auszublenden, ohne es zu löschen.

Rechts befindet sich die Spalte „Stile“, in der Sie CSS-Deklarationen für jedes beliebige Element ändern oder aktivieren/deaktivieren können, etwa so:

Beim Testen von Inhalts- und Stiländerungen möchten Sie die Auswirkungen sowohl auf mobilen Bildschirmen als auch auf Desktops sehen. Der Responsive-Design-Modus von Safari ermöglicht Ihnen die Vorschau einer Website auf allen gängigen Geräten.

Um ihn zu verwenden, wählen Sie Entwickeln > Responsive-Design-Modus eingeben. In diesem Modus können Sie die gleichen Inspektionswerkzeuge für Seiten verwenden, die für Apple-Geräte formatiert sind, oder die Abmessungen selbst festlegen:

Wie Sie Elemente in Firefox inspizieren

Um den Firefox-Inspektor zu öffnen, können Sie:

• Klicken Sie mit der rechten Maustaste auf einen beliebigen Teil der Seite und wählen Sie Element inspizieren. Ein Rechtsklick auf ein bestimmtes Seitenelement öffnet dieses Element in der Inspektoransicht.
• Wählen Sie Tools > Web Developer > Inspector aus der oberen Menüleiste.
• Verwenden Sie die Tastenkombination Strg-Umschalt-C in Windows oder Befehl-Option-C in macOS.

Der Firefox-Inspektor erscheint standardmäßig am unteren Rand des Fensters. Um seine Position zu ändern, wählen Sie das Drei-Punkte-Symbol in der oberen rechten Ecke des Inspektors und dann eine alternative Anzeigeoption.

Das Inspektor-Panel von Firefox ist in seinen Funktionen vergleichbar mit denen von Chrome und Safari. Der HTML-Quellcode zeigt das entsprechende Seitenelement mit Farbcodes an – Inhalt ist blau, Padding ist lila und Ränder sind gelb:

Zudem können Sie Code finden, indem Sie Elemente auf der Seite auswählen – um in den Auswahlmodus zu gelangen, klicken Sie auf das Cursor-Symbol in der oberen linken Ecke:

Klicken Sie auf ein beliebiges Seitenelement, um seinen Quelltext im Inspektionsfenster anzuzeigen.

Um ein Seitenelement zu ändern oder zu löschen, markieren Sie seinen Code im Inspektor. Doppelklicken Sie dann entweder, um den Text zu ändern, oder klicken Sie mit der rechten Maustaste und wählen Sie Als HTML bearbeiten oder Neuen Knoten erstellen, um Code hinzuzufügen. Oder löschen Sie einfach den Code und sehen Sie sich die daraus resultierenden Änderungen auf der Seite an.

Um das Styling eines Elements umzuschalten, verwenden Sie den Bereich Filter Styles unten im Inspect Panel. Deaktivieren Sie das Kästchen neben einer CSS-Deklaration, um sie zu deaktivieren (oder schreiben Sie selbst neuen Code hinein):

Schließlich verfügen die Firefox-Tools auch über eine mobile Vorschauoption. Um sie zu nutzen, klicken Sie auf das Symbol für den Responsive Design Mode in der rechten oberen Ecke des Fensters:

Im Responsive Design Mode können Sie aus mehreren voreingestellten Bildschirmauflösungen wählen oder Ihre eigene festlegen, und Sie können auch die Verbindungsgeschwindigkeit und das Pixelverhältnis des Geräts umschalten:

Mit Inspect einen genaueren Blick werfen

Wenn Sie erst einmal die Grundlagen des Inspect-Tools Ihres Browsers erlernt haben, werden Sie vielleicht feststellen, wie viele Informationen über Ihre Lieblings-Websites öffentlich zugänglich sind. Mit ein paar Klicks können Sie erkunden, wie genau Webseiten aufgebaut sind, welche Stile sie verwenden, wie sie für Suchmaschinen optimiert sind, wie sie auf mobilen Bildschirmen formatiert sind und vieles mehr.

Für einige ist Inspect nur eine lustige Neugierde. Für andere ist es ein wichtiges Hilfsmittel, um zu lernen, wie andere konkurrierende Websites funktionieren. Wer auch immer Sie sind, es ist eine großartige Fähigkeit und kann Einblicke liefern, die über das Betrachten der Webseite selbst hinausgehen.