„Element untersuchen“ in Chrome, Safari und Firefox

Wenn Sie gerade erst in die Welt des Programmierens eintauchen, fällt es Ihnen vielleicht noch schwer genau zu sagen, was eine Webseite besonders gut macht – denn es ist in der Regel eine große Menge an Code notwendig, der am Ende für ein gelungenes Design sorgt.

Deshalb macht es Sinn, sich näher mit der Funktion „Untersuchen“ in Ihrem Browser auseinanderzusetzen, und einen Blick hinter die Kulissen zu werfen. So verstehen Sie besser, wie Webseiten programmiert werden, und sammeln gleichzeitig konkrete Ideen, welche Elemente Sie für Ihre zukünftigen Projekte übernehmen oder ähnlich programmieren wollen.

Die Funktion Element untersuchen gibt Ihnen dabei die Möglichkeit, das Frontend einer Website zu betrachten und sogar zu bearbeiten. Mit diesem einfachen Trick lernen Sie mehr darüber, wie Websites funktionieren, und können sogar Ihre eigene Website erstellen.

In diesem Blogartikel erfahren Sie, was es bedeutet, Seitenelemente zu „untersuchen“ und wie genau dies in den drei beliebtesten Webbrowsern funktioniert. Haben Sie gerade nur wenig Zeit? Dann springen Sie gerne direkt zu dem Thema, das für Sie am wichtigsten ist.

Die Funktion „Untersuchen“ erlaubt Web-Profis dabei eine Art Blick hinter die Kulissen. Entwicklerinnen, Designer und Marketingexperten nutzen dieses Tool häufig, um einen genaueren Blick auf eine Website zu werfen, um eine Vorschau auf Inhalts- und Stiländerungen zu erhalten, Fehler zu beheben oder einfach um zu erfahren, wie eine bestimmte Website aufgebaut ist.

Wenn Sie zum Beispiel auf einer Website der Konkurrenz eine interessante Benutzeroberfläche entdecken, können Sie mit der Funktion „Element untersuchen“ den HTML- und CSS-Code sehen, auf dem die Website basiert.

Die „Untersuchen“-Funktion Ihres Browsers ist also quasi eine Art „Sandbox“. Sie können mit einer Webseite so viel herumexperimentieren, wie Sie möchten – bearbeiten Sie dafür zum Beispiel die Inhalte, Farben, Schriftarten oder Layouts. Wenn Sie fertig sind, aktualisieren Sie einfach die Seite, um alles wieder in den Normalzustand zurückzuversetzen.

Mit der Funktion „Untersuchen“ ändern Sie dabei nicht die Website selbst, sondern nur die Darstellung in Ihrem Browser. Sie können also ganz unbesorgt experimentieren.

Die Funktion „Untersuchen“ ist auch ein unglaublich wertvolles Tool für alle diejenigen, die Webentwicklung lernen. Anstatt den reinen Quellcode anzuzeigen, können Sie dank der Funktion „Element untersuchen“ mit der Seite interagieren und sehen, wie jede Codezeile einem bestimmten Element oder einem bestimmten Stil zugeordnet ist.

Wenn Sie genauer verstehen, was eine typische Webseite ausmacht, können Sie im Falle eines Fehlers oder wenn Sie eine Änderung vornehmen möchten, effektiver mit den Entwicklern und Entwicklerinnen kommunizieren.

Auch wenn es sich bei der Funktion „Untersuchen“ um ein Entwicklertool handelt, müssen Sie keinen Code schreiben oder zusätzliche Software installieren, um das Tool zu nutzen. Alles, was in diesem Artikel beschrieben wird, können Sie direkt in Ihrem Browser machen. Schauen wir uns einmal an, wie das genau funktioniert.

Alle modernen Webbrowser verfügen über ein eigenes Tool zum Untersuchen von Elementen. Der Zugriff ist grundsätzlich in jedem Browser möglich, aber bei einigen Browsern wie Chrome oder Safari gibt es kleinere Unterschiede.

Im Folgenden erfahren Sie, wie Sie die Funktion „Untersuchen“ in den folgenden drei Desktop-Webbrowsern verwenden können: Google Chrome, Safari von Apple und Mozilla Firefox.

Leitfaden: CSS und HTML für Anfänger

Füllen Sie das Formular aus, um die kostenlosen Leitfaden zu erhalten.

• Was ist HTML?
• Was ist CSS?
• CSS- & HTML-Codes, die Sie kennen sollten
• Was sind beliebte Fehlerquellen?

Jetzt kostenlos herunterladen

Elemente in Chrome untersuchen

Chrome verfügt über ein extrem praktisches Entwicklertool, mit dem Sie einzelne Elemente untersuchen können. So können Sie sich den einer Webseite zugrundeliegenden Code ansehen und direkt in Ihrem eigenen Browser bearbeiten.

Wie bereits erwähnt, beachten Sie dabei bitte, dass die Änderungen nur für Sie sichtbar sind, nicht für andere Personen im Internet.

Und so können Sie loslegen.

1. Öffnen Sie Chrome und besuchen Sie die Webseite, die Sie untersuchen möchten

Um den „Element Inspector“ in Google Chrome zu verwenden, besuchen Sie zunächst eine beliebige Webseite. In diesen Beispielen werden wir uns hubspot.com ansehen.

2. Öffnen Sie das Fenster für die Funktion „Untersuchen“

Sobald Sie auf der gewünschten Seite angekommen sind, haben Sie mehrere Möglichkeiten, die Funktion „Untersuchen“ in Chrome zu öffnen.

• Option 1: Sie können mit der rechten Maustaste auf einen beliebigen Teil der Seite klicken und dann „Untersuchen“ auswählen. Wenn Sie mit der rechten Maustaste auf ein bestimmtes Seitenelement klicken, wird dieses Element anschließend in der Ansicht „Untersuchen“ geöffnet.
• Option 2: In der oberen Menüleiste können Sie Anzeigen > Entwickler > Ressourcen für Entwickler auswählen.
• Option 3: Sie können in der oberen rechten Ecke des Browserfensters auf das Symbol mit den drei Punkten klicken. Von dort aus können Sie dann Weitere Tools > Ressourcen für Entwickler auswählen. Anschließend klicken Sie im Pop-up-Fenster auf den Tab „Untersuchen“.
• Option 4: Sie können die Tastenkombination Strg-Umschalt-C unter Windows oder Befehl-Wahl-C unter macOS verwenden.

3. Ändern Sie die Position des Inspect-Panels

Um den Code besser zu sehen, können Sie die Position des Informationsfensters ändern.

Die Chrome-Entwicklertools werden am unteren Rand des Browserfensters geöffnet, manchmal aber auch in einem separaten Fenster.

Wenn Sie die Position des Bedienfelds ändern möchten, klicken Sie einfach in der oberen rechten Ecke des Bedienfelds auf das Symbol mit den drei Punkten (neben dem Symbol X) und wählen Sie dann Ihre bevorzugte Platzierung aus.

Pro-Tipp: Wählen Sie Rechts fixieren, um die gerenderte Seite und ihren Quellcode besonders einfach anzuzeigen:

Oben im Inspect-Panel sehen Sie unter anderem Tabs wie Elemente, Konsole oder Quellcode. Dies sind alles Werkzeuge, mit denen Sie den Inhalt und die Performance einer Webseite bewerten können. Alle relevanten Funktionen zum Untersuchen finden Sie auf dem Tab Elemente.

4. Sehen Sie sich den HTML-Quellcode der Webseite an

Der größte Bereich des Fensters zeigt den HTML-Quellcode der aktuellen Seite an. Es macht Sinn, diesen Bereich detaillierter zu erkunden. Wenn Sie mit dem Mauszeiger über den Code fahren, wird das entsprechende Element auf der Webseite hervorgehoben.

Blau kennzeichnet dabei den Inhalt eines Elements, Grün entspricht der Füllung und orangefarbene Bereiche stellen Ränder dar.

Pro-Tipp: Wenn Sie sich noch nicht so gut auskennen und mehr über die verschiedenen Elemente erfahren möchten, die Sie untersuchen, sehen Sie sich gerne diesen HTML-Leitfaden für Anfänger und Anhängerinnen an.

5. Wählen Sie ein Element aus, das Sie genauer untersuchen möchten

Anstatt zu versuchen, den Code zu überfliegen, um ein bestimmtes Element zu finden, können Sie auch genau das Gegenteil tun. Sie können den Code also finden, indem Sie den Mauszeiger über das gesuchte Seitenelement bewegen. Dazu klicken Sie einfach in der oberen linken Ecke des Bedienfelds auf das Symbol Element auswählen.

Als Nächstes klicken Sie auf ein Seitenelement. Dann wird der Quellcode im Inspect-Panel angezeigt.

6. Bearbeiten Sie den Text des Elements (falls Sie das möchten)

Neben der Anzeige können Sie über die Funktion „Untersuchen“ auch den Inhalt der Webseite bearbeiten. Beginnen wir mit dem Austauschen von Text.

Zunächst wählen Sie einige Textinhalte im Quellcode aus. Dann klicken Sie mit der rechten Maustaste auf das Element und wählen Text bearbeiten aus. Dies öffnet dann eine Inline-Texteingabe, in die Sie schreiben können, was Sie möchten. Wenn Sie die Auswahl der Texteingabe aufheben, werden die Änderungen übernommen:

Oder wie wäre es mit gar keinem Text? Dafür markieren Sie einfach das Element im Quellcode und löschen es. Die Überschrift H1 verschwindet dann entsprechend von der Seite.

Aber keine Sorge – die Überschrift erscheint natürlich sofort wieder, sobald Sie die Seite aktualisieren.

7. Bearbeiten Sie Elemente auf der Seite oder blenden Sie diese aus

Sie können auch jedes Element ausblenden – natürlich ohne es zu löschen – indem Sie mit der rechten Maustaste auf das Element im Quellcode klicken und dann Element ausblenden auswählen.

Sie können sogar neue Seitenelemente hinzufügen, indem Sie mit der rechten Maustaste auf ein Element im Quellcode klicken und anschließend Als HTML bearbeiten auswählen. Dann sehen Sie ein Textfeld, in das Sie HTML einfügen können. Zum Beispiel:

8. Bearbeiten Sie den CSS-Code der Seite

Weiter unten im Inspect-Panel von Chrome sehen Sie den Tab Stile. Hier sehen Sie, welcher CSS-Stil auf das ausgewählte Element angewendet wurde.

Sie können Codezeilen anklicken, um sie neu zu schreiben, oder Sie können bestimmte Deklarationen aktivieren oder deaktivieren, indem Sie einen Haken in die Kästchen daneben setzen oder den Haken entfernen.

Sie können dies zum Beispiel mit der Eigenschaft font-weight eines Elements <h1> tun:

9. Zeigen Sie die mobile Version der Seite an

Zum Schluss noch ein weiterer Vorteil der Funktion „Untersuchen“ von Chrome: die mobile Ansicht. Beim Erstellen von Websites müssen die Designer und Designerinnen unter anderem auch berücksichtigen, wie die Seiten auf Desktop-, Mobil- und Tablet-Bildschirmen abgebildet werden.

Praktischerweise können Sie sich mit Chrome dieselbe Webseite in mehreren Bildschirmauflösungen anzeigen lassen. Klicken Sie dafür zunächst in der oberen linken Ecke des Fensters auf das Symbol Gerätsymbolleiste ein- und ausblenden:

Von hier aus können Sie die Bildschirmauflösung manuell einstellen oder auch eine Gerätevoreinstellung aus dem Menü wählen und anschließend sehen, wie das Layout der Seite darauf reagiert.

Sie können den Bildschirm auch drehen und sogar eine Vorschau der Performance bei den Geschwindigkeiten „Mid-Tier Mobile“ und „Low-Tier Mobile“ anzeigen.

Besonders überzeugend: Wenn Sie auf Ihrer Webseite Animationen einsetzen, können Sie den Tab Animationen verwenden, um diese zu überprüfen.

Sie können auf den Tab „Animationen“ zugreifen, indem Sie auf die drei Punkte > Weitere Tools > Animationen klicken.

Alternativ können Sie auch die Tastenkombination Strg-Umschalt-P in Windows oder Befehl-Wahl-P in macOS verwenden und anschließend „Animationen anzeigen“ in die Suchleiste eingeben.

Hier können Sie dann die Animation anhalten, die Geschwindigkeit anpassen, die Dauer ändern und vieles mehr, damit sich Ihre Animationen genau wie gewünscht verhalten.

Leitfaden: CSS und HTML für Anfänger

Füllen Sie das Formular aus, um die kostenlosen Leitfaden zu erhalten.

• Was ist HTML?
• Was ist CSS?
• CSS- & HTML-Codes, die Sie kennen sollten
• Was sind beliebte Fehlerquellen?

Jetzt kostenlos herunterladen

Schauen wir uns nun an, wie Sie eine Seite auf dem Mac überprüfen können, einschließlich bewährter Tipps und Tricks. In den Beispielen werden wir uns Safari näher ansehen, aber Sie können die Webseiten genauso auch unter macOS mit Chrome oder Firefox überprüfen.

Elemente in Safari untersuchen

Genau wie Google Chrome enthält auch Safari ein Tool, mit dem Sie Webseiten untersuchen können. So verwenden Sie das Tool:

1. Aktivieren Sie die Entwicklertools in Safari

Um das Tool zum Untersuchen von Webseiten in Safari, den Web Inspector, zu verwenden, müssen Sie zunächst die Entwicklertools von Safari aktivieren. Und so geht's:

• Im oberen Menü wählen Sie Safari > Einstellungen.
• Dann tippen Sie auf Erweitert.
• Aktivieren Sie nun das Kästchen neben Menü „Entwickler“ in der Menüleiste anzeigen.
• Anschließend sehen Sie dann die Option „Entwickler“, die zu dem Menü oben hinzugefügt wurde.

2. Besuchen Sie dann die gewünschte Webseite

Als Nächstes gehen Sie zu der Webseite, die Sie sich genauer ansehen möchten. Für dieses Beispiel werden wir wieder hubspot.com nehmen.

3. Öffnen Sie den Web Inspector

Es gibt drei Möglichkeiten, den Web Inspector in Safari zu öffnen:

• Option 1: Klicken Sie mit Ihrer rechten Maustaste auf einen beliebigen Teil der Seite und wählen Sie dann Element untersuchen aus. Wenn Sie mit der rechten Maustaste auf ein bestimmtes Seitenelement klicken, wird dieses Element anschließend in der Ansicht „Untersuchen“ geöffnet.
• Option 2: Wählen Sie Entwickler > Web Inspector anzeigen in der oberen Menüleiste aus.
• Option 3: Verwenden Sie die Tastenkombination Befehl-Wahl-I.

Pro-Tipp: Es gibt viele Tastenkombinationen, die Sie zur Navigation im Inspect-Panel verwenden können. Machen Sie sich mit so vielen Tastenkombinationen wie möglich vertraut, um Ihren Workflow zu beschleunigen.

4. Ändern Sie die Position des Inspect-Panels

Der Bereich „Informationen“ von Safari wird standardmäßig am unteren Rand des Fensters geöffnet. Um diese Konfiguration zu ändern, klicken Sie auf das Symbol, um den Bereich auf der rechten Seite anzudocken oder in einem neuen Fenster zu öffnen.

Beide Funktionen befinden sich neben dem Symbol X in der oberen linken Ecke des Displays.

5. Sehen Sie sich den HTML- und CSS-Code der Seite an

Das Inspector-Panel von Safari hat zwei Spalten. Die erste Spalte zeigt dabei den HTML-Quellcode, die zweite das CSS der Webseite.

Mit dem Cursor können Sie den HTML-Quellcode erkunden und sehen, welche Codezeilen den einzelnen Seitenbereichen entsprechen. Blau hebt dabei den Inhalt, grün die Füllung und orange die Ränder hervor.

6. Wählen Sie ein Element aus, das Sie genauer untersuchen möchten

Sie können die Seite auch direkt untersuchen. Sie müssen dafür nur oben im Bedienfeld auf das Symbol für die Elementauswahl klicken:

Wenn Sie nun auf ein Seitenelement klicken, zeigt der Web Inspector den entsprechenden Quellcode an.

7. Bearbeiten Sie Seitenelemente, fügen Sie sie hinzu oder löschen Sie sie

Genau wie mit dem Inspektor-Tool von Chrome können Sie auch in Safari Seitenelemente ändern, hinzufügen oder entfernen.

Um die Seite zu bearbeiten, klicken Sie mit der rechten Maustaste auf ein HTML-Element im Inspect-Panel. Sie können dann die passende Option aus dem Menü „Bearbeiten“ auswählen.

Web Inspector fordert Sie anschließend auf, einen neuen Text einzugeben, und zeigt Ihre Änderungen in Echtzeit an:

Oder Sie können ein neues Element zu der Seite hinzufügen, indem Sie mit der rechten Maustaste auf eine Codezeile klicken und eine Option aus dem Menü Hinzufügen auswählen.

In diesem Beispiel wurde ein neues untergeordnetes <h1>-Element zu einem bereits vorhandenen <div> hinzugefügt:

Wenn Sie ein Seitenelement löschen möchten, wählen Sie einfach die entsprechenden Codezeilen aus und löschen Sie diese. Oder Sie klicken mit der rechten Maustaste und wählen Sichtbarkeit ein- oder ausblenden aus, um ein Element auszublenden, ohne es zu löschen.

8. Aktivieren oder deaktivieren Sie den CSS-Code der Seite

Auf der rechten Seite befindet sich die Spalte Stile, in der Sie die CSS-Deklarationen für jedes beliebige Element ändern oder aktivieren bzw. deaktivieren können, zum Beispiel so:

Beim Testen von Inhalts- und Stiländerungen möchten Sie vielleicht sowohl die Auswirkungen auf mobilen Bildschirmen als auch auf Desktops sehen. Das werden wir uns als Nächstes anschauen.

Pro-Tipp: Wenn Sie sich von anderen Webseiten inspirieren lassen, nutzen Sie dafür am besten den Tab Stile in den Entwicklertools Ihres Browsers, um das CSS so anzupassen, wie Sie es sich für Ihre eigene Seite vorstellen. Versuchen Sie es einfach mal direkt.

Auf diese Weise können Sie die Designelemente verfeinern und an Ihre speziellen Wünsche anpassen, bevor Sie mit dem Programmieren in Ihrem eigenen Arbeitsbereich fortfahren.

9. Zeigen Sie die mobile Version der Seite an

Mit dem responsiven Designmodus von Safari können Sie eine Vorschau einer Website auf allen gängigen Geräten anzeigen.

Um die Seite in einem mobilen Ansichtsfenster anzuzeigen, wählen Sie Entwickler > In Modus „Responsives Design“ wechseln. In diesem Modus können Sie dieselben Inspect-Tools auf für Apple-Geräte formatierten Seiten verwenden oder die Abmessungen selbst festlegen:

Besonders praktisch: Mit dem Tab „Responsives Design“ von Safari können Sie nicht nur die Responsivität Ihrer Webseite auf verschiedenen Geräten testen, sondern auch das Verhalten in verschiedenen Browsern. Die Safari-Entwicklertools dienen als zentrale Anlaufstelle für das Testen der responsiven Gestaltung und bieten eine enorme Zeitersparnis.

Leitfaden: CSS und HTML für Anfänger

Füllen Sie das Formular aus, um die kostenlosen Leitfaden zu erhalten.

• Was ist HTML?
• Was ist CSS?
• CSS- & HTML-Codes, die Sie kennen sollten
• Was sind beliebte Fehlerquellen?

Jetzt kostenlos herunterladen

Elemente in Firefox untersuchen

Firefox stellt eine weitere praktische Option dar, um eine Webseite unter macOS, Windows oder Linux zu überprüfen. So können Sie loslegen.

1. Öffnen Sie das Tool „Element untersuchen“ von Firefox

Um das Inspektor-Tool in Firefox zu öffnen, haben Sie mehrere Möglichkeiten:

• Option 1: Klicken Sie mit der rechten Maustaste auf einen beliebigen Teil der Seite und wählen Sie dann „Element untersuchen“ aus. Wenn Sie mit der rechten Maustaste auf ein bestimmtes Seitenelement klicken, wird dieses Element anschließend in der Ansicht „Untersuchen“ geöffnet.
• Option 2: Wählen Sie in der oberen Menüleiste Weitere Werkzeuge > Browser-Werkzeuge > Werkzeuge für Web-Entwickler aus.
• Option 3: Verwenden Sie in Windows die Tastenkombination Strg-Umschalt-I oder F12 oder geben Sie in macOS Befehl-Wahl-I ein.

2. Besuchen Sie dann die gewünschte Webseite

Als Nächstes gehen Sie zu der Webseite, die Sie sich genauer ansehen möchten. Wir werden uns wieder beispielhaft hubspot.com ansehen.

3. Ändern Sie die Position des Inspector-Panels

Der Firefox-Inspector wird standardmäßig am unteren Rand des Fensters angezeigt. Um seine Position zu ändern, klicken Sie in der oberen rechten Ecke des Inspektors das Symbol mit den drei Punkten an und wählen Sie dann eine andere Anzeigeoption aus.

4. Sehen Sie sich den HTML-Code der Seite an

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

5. Wählen Sie ein Element aus, das Sie genauer untersuchen möchten

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

Sie können dann auf ein beliebiges Seitenelement klicken, um den Quellcode im Inspect-Panel anzusehen.

6. Ändern oder löschen Sie Seitenelemente

Um ein Seitenelement zu ändern oder sogar zu löschen, wählen Sie den entsprechenden Code im Inspektor aus.

Dann können Sie entweder doppelklicken, um den Text zu ändern, mit der rechten Maustaste klicken und Als HTML bearbeiten wählen oder auf die Schaltfläche Plus neben der Menüleiste „In HTML suchen“ klicken, um Code hinzuzufügen.

Alternativ können Sie den Code einfach löschen und die daraus resultierenden Änderungen direkt auf der Seite sehen.

7. Wechseln Sie die CSS-Stile der Seite

Um den CSS-Stil eines Elements zu ändern, verwenden Sie den Bereich Stile filtern am unteren Rand des Inspect-Panels. Dort können Sie das Häkchen neben einer CSS-Deklaration entfernen, um diese zu deaktivieren (oder alternativ auch selbst neuen Code eingeben):

8. Zeigen Sie die mobile Version der Seite an

Außerdem verfügen die Firefox-Tools auch über eine mobile Vorschauoption. Um die Vorschau zu verwenden, klicken Sie in der oberen rechten Ecke des Panels auf das Symbol responsiver Designmodus:

Im responsiven Designmodus können Sie aus mehreren voreingestellten Bildschirmauflösungen wählen oder Ihre eigene Auflösung festlegen. Außerdem können Sie die Verbindungsgeschwindigkeit und das Pixelverhältnis des Geräts umschalten:

Besonders praktisch: In der Softwareentwicklung spielt es eine wichtige Rolle, dass Sie Webseiten erstellen, die von allen leicht genutzt werden können. Mit dem Tab „Barrierefreiheit“ im Inspektor von Firefox können Sie überprüfen, ob im Accessibility-Tree noch wichtige Eigenschaften fehlen. Auch Farbkontraste können Sie überprüfen.

Am schnellsten greifen Sie auf diese Funktion zu, indem Sie mit der rechten Maustaste auf die Seite klicken > den Inspektor wählen > die beiden Pfeile neben dem Debugger > und dann Barrierefreiheit wählen.

Fazit: Mit dem Inspect-Tool noch genauer hinsehen

Sobald Sie sich mit den wichtigsten Funktionen des Inspect-Tools Ihres Browsers vertraut gemacht haben, werden Sie wahrscheinlich feststellen, wie viele Informationen über Ihre Lieblingswebsites öffentlich verfügbar sind.

Mit ein paar wenigen Klicks können Sie in Zukunft leicht herausfinden, wie genau Webseiten aufgebaut sind, welche Stile sie verwenden, wie sie für Suchmaschinen optimiert sind, wie sie auf mobilen Bildschirmen formatiert werden und vieles mehr.

Titelbild: HubSpot