So verwenden Sie das Tool “Element inspizieren” in Chrome

Das Tool “Element inspizieren” in Google Chrome ist eine leistungsstarke Funktion, mit der Nutzer HTML, CSS und JavaScript einer Website direkt im Browser anzeigen und ändern können. Es wird häufig von Webentwicklern und -designern für die Fehlersuche, die Bearbeitung von Stilen, das Testen von Code und sogar für einen genaueren Blick auf den Aufbau bestimmter Website-Elemente verwendet. Dieser Leitfaden zeigt Ihnen, wie Sie auf das Tool “Element inspizieren” in Chrome zugreifen und es effektiv nutzen können.

Was ist das Tool “Element inspizieren”?

Das Tool “Element inspizieren” ist Teil der Developer Tools (DevTools) von Chrome. Es ermöglicht Ihnen,:

Prüfen und Bearbeiten von HTML und CSS in Echtzeit.
JavaScript-Code debuggen.
Simulation verschiedener Bildschirmgrößen zum Testen von Responsive Design.
Prüfen Sie Netzwerkanfragen und sehen Sie, wie eine Website Ressourcen lädt.
Testen Sie Änderungen, ohne die Live-Site zu beeinträchtigen.

So öffnen Sie das Tool “Element inspizieren” in Chrome

Es gibt mehrere Möglichkeiten, auf das Tool “Element inspizieren” in Chrome zuzugreifen:

Methode 1: Rechtsklick auf eine Webseite

Navigieren Sie zu der Website, die Sie überprüfen möchten.
Klicken Sie mit der rechten Maustaste auf ein beliebiges Element auf der Seite (z. B. ein Bild, einen Text oder eine Schaltfläche).
Wählen Sie im daraufhin angezeigten Kontextmenü die Option Untersuchen aus.

Dadurch wird die Registerkarte Elemente der DevTools geöffnet und der HTML-Code des ausgewählten Elements hervorgehoben.

Methode 2: Verwendung von Tastaturkürzeln

Sie können das Tool “Element inspizieren” schnell mit Hilfe von Tastenkombinationen öffnen:

Windows/Linux: Strg Umschalt I
Mac: Befehl-Option I

Methode 3: Über das Chrome-Menü

Klicken Sie auf das Drei-Punkte-Menü (⋮) in der oberen rechten Ecke von Chrome.
Gehen Sie zu Weitere Tools > Entwicklertools.

Das DevTools-Bedienfeld wird unten oder an der Seite des Browserfensters geöffnet.

Überblick über die DevTools-Schnittstelle

Nach dem Öffnen des Tools “Element inspizieren” sehen Sie oben im DevTools-Panel mehrere Registerkarten:

Elemente: Zeigt die HTML-Struktur und die CSS-Stile der Seite an.
Konsole: Nützlich für die Ausführung von JavaScript-Befehlen und die Anzeige von Fehlermeldungen.
Quellen: Ermöglicht die Anzeige und Fehlersuche in JavaScript-Dateien.
Netzwerk: Zeigt alle Netzwerkanfragen an, was für die Analyse von Seitenladezeiten und Ressourcen hilfreich ist.
Leistung: Hilft bei der Analyse der Leistung einer Webseite.
Anwendung: Zeigt Details wie Cookies, lokalen Speicher und Cache an.
Leuchtturm: Liefert Website-Audits und Leistungsberichte.

Die am häufigsten verwendete Registerkarte: Elemente

Die Registerkarte “Elemente” ist das Herzstück des Werkzeugs “Element inspizieren”, mit dem Sie den HTML- und CSS-Code einer Webseite anzeigen und ändern können.

So verwenden Sie das Tool “Element inspizieren” für HTML und CSS

1. Prüfen von HTML-Elementen

Öffnen Sie die Registerkarte Elemente (indem Sie mit der rechten Maustaste klicken und Untersuchen wählen oder die Tastaturkürzel verwenden).
Bewegen Sie den Mauszeiger über verschiedene Elemente in der HTML-Struktur, um sie auf der Webseite hervorzuheben.
Klicken Sie auf ein beliebiges HTML-Element im Bedienfeld “Elemente”, um die entsprechenden CSS-Stile im Bereich “Stile” auf der rechten Seite anzuzeigen.

2. HTML-Bearbeitung in Echtzeit

Doppelklicken Sie auf einen HTML-Tag, ein Attribut oder einen Text auf der Registerkarte Elemente, um ihn zu bearbeiten.
Drücken Sie die Eingabetaste, um die Änderungen zu übernehmen.
Die Änderungen werden sofort auf der Seite angezeigt, sie sind jedoch temporär und werden zurückgesetzt, wenn Sie die Seite aktualisieren.

Beispiel: Ändern Sie den Text einer Überschrift von<h1>Welcome to My Site</h1> to <h1>Hello World!</h1> indem Sie auf den Text doppelklicken und ihn bearbeiten.

3. Bearbeiten von CSS in Echtzeit

Wählen Sie auf der Registerkarte “Elemente” ein Element aus, das Sie gestalten möchten.
Im Bereich “Stile” auf der rechten Seite können Sie vorhandene CSS-Eigenschaften bearbeiten oder neue hinzufügen.
Um einen neuen Stil hinzuzufügen, klicken Sie auf ein leeres Feld im Bereich “Stile” und geben Sie die CSS-Eigenschaft und den Wert ein.

Beispiel: Ändern Sie die Hintergrundfarbe eines Elements:

background-color: #ff0000;

Die Änderungen werden sofort übernommen, aber nicht dauerhaft auf der Website gespeichert.

4. CSS-Stile ein- und ausschalten

Jede CSS-Eigenschaft im Bereich “Stile” verfügt über ein Kontrollkästchen daneben.
Deaktivieren Sie eine Eigenschaft, um sie vorübergehend zu deaktivieren, oder aktivieren Sie sie erneut, um sie wieder zu aktivieren.

Dies ist nützlich, um zu testen, wie sich CSS-Änderungen auf das Design auswirken können, ohne den Code dauerhaft zu bearbeiten.

5. Kopieren und Bearbeiten von HTML

Klicken Sie mit der rechten Maustaste auf ein HTML-Element auf der Registerkarte Elemente.
Wählen Sie Kopieren > Element kopieren, um den ausgewählten HTML-Code zu kopieren.
Sie können ihn dann in Ihren Texteditor einfügen oder ihn für die Entwicklung verwenden.

Verwenden der Registerkarte Konsole

Die Registerkarte Konsole ist ein weiteres leistungsstarkes Werkzeug in DevTools, mit dem Sie JavaScript-Befehle direkt auf der Seite ausführen können:

Gehen Sie zur Registerkarte Konsole.
Geben Sie JavaScript-Befehle oder -Ausdrücke ein und drücken Sie die Eingabetaste, um sie auszuführen.

Beispiel: Ändern Sie die Hintergrundfarbe der Seite:

document.body.style.backgroundColor = ‘#00ff00’;

Dadurch wird die Hintergrundfarbe der Seite auf grün geändert.

Mobile Geräte simulieren

Mit dem Tool “Element inspizieren” können Sie auch testen, wie eine Website auf verschiedenen Bildschirmgrößen und Geräten aussieht:

Klicken Sie auf das Symbol für die Symbolleiste “Gerät umschalten” (ein kleines Telefon- und Tablet-Symbol) in der oberen linken Ecke des DevTools-Bedienfelds.
Wählen Sie ein Gerät aus dem Dropdown-Menü (z. B. iPhone, iPad, Galaxy).
Passen Sie die Bildschirmauflösung und -ausrichtung an, um zu sehen, wie die Website auf verschiedene Bildschirmgrößen reagiert.

Diese Funktion ist äußerst nützlich für das Testen von responsivem Design.

Fehlersuche in JavaScript

Die Registerkarte Quellen dient der Fehlersuche in JavaScript:

Öffnen Sie die Registerkarte Sources in DevTools.
Sie können Haltepunkte setzen, indem Sie auf die Zeilennummern von JavaScript-Code klicken.
Dadurch können Sie die Ausführung des Codes anhalten und Variablen, Funktionen und den Aufrufstapel untersuchen.

Netzwerkanalyse mit der Registerkarte Netzwerk

Auf der Registerkarte “Netzwerk” werden alle Netzwerkanforderungen angezeigt, die beim Laden einer Seite auftreten, einschließlich Bilder, Skripte und Stylesheets:

Öffnen Sie die Registerkarte “Netzwerk”, bevor Sie die Seite aktualisieren.
Aktualisieren Sie die Seite, um alle Netzwerkanforderungen zu sehen.
Sie können die Anfragen nach Typ filtern (z. B. XHR, JS, CSS) und sehen, wie lange jede Ressource zum Laden braucht.

Dies ist nützlich, um die Ladegeschwindigkeit der Seite zu optimieren.

Zusammenfassung

Das Tool “Element inspizieren” in Google Chrome ist eine vielseitige und unverzichtbare Funktion für Webentwickler, Designer und sogar neugierige Nutzer, die verstehen wollen, wie Websites aufgebaut sind. Wenn Sie lernen, wie Sie HTML, CSS und JavaScript prüfen und ändern können, können Sie Probleme beheben, neue Stile testen und sicherstellen, dass Ihre Website auf verschiedenen Geräten gut aussieht. Mit den verschiedenen Tools und Registerkarten, die in Chrome DevTools zur Verfügung stehen, können Sie ein tieferes Verständnis für die Funktionsweise von Websites gewinnen und sie für eine bessere Leistung optimieren.2