Jeder moderne Browser verbirgt ein erstaunlich leistungsstarkes Werkzeug, das in Sekundenschnelle zugänglich ist, aber von vielen Webprofis ignoriert wird. Der Elementinspektor, auch bekannt als Entwicklertool oder DevTools, ermöglicht es Ihnen, die Funktionsweise einer Webseite zu analysieren und genau zu sehen, wie sie aufgebaut ist, warum sie sich auf eine bestimmte Weise verhält und wie Sie sie temporär modifizieren können, ohne den ursprünglichen Quellcode zu verändern.
Anders als der Name vermuten lässt, ist dieses Tool nicht nur für Entwickler gedacht. Auch Marketingmanager, die ihre SEO-Tags überprüfen möchten, Projektmanager, die einen überarbeiteten Entwurf erfassen wollen, Berater, die eine langsame Seite analysieren, oder Designer, die den exakten Wert einer Farbe ermitteln möchten, haben gute Gründe, den Inspektor mindestens einmal pro Woche zu nutzen.
Dieser Leitfaden behandelt die drei in Frankreich am häufigsten verwendeten Browser, Chrome, Safari und Firefox, mit den genauen Tastenkombinationen für Windows und Mac, fünf praktischen Anwendungsfällen für Nicht-Entwickler, der Überprüfung vom Smartphone aus, einer Übersichtstabelle und einem vollständigen FAQ.
Der Elementinspektor: Wozu dient er eigentlich?
Wenn Sie eine Webseite öffnen, lädt Ihr Browser HTML-, CSS- und JavaScript-Code herunter und setzt ihn anschließend zusammen, um die angezeigte Seite darzustellen. Der Elementinspektor ermöglicht Ihnen den Zugriff auf dieses Endergebnis, das DOM (Document Object Model). Es handelt sich dabei um die interaktive Live-Version der Seite, wie sie in Ihrem Browser nach der Ausführung aller Skripte vorliegt.
Der Inspektor sollte nicht mit dem Befehl „Seitenquelltext anzeigen“ (Strg+U unter Windows, Cmd+U unter macOS) verwechselt werden. Der Quelltext zeigt den vom Server gesendeten, unformatierten HTML-Code an, bevor er durch JavaScript verändert wird. Der Inspektor hingegen zeigt das DOM in Echtzeit nach allen dynamischen Änderungen. Bei Websites, die mit modernen Frameworks wie React oder Vue.js erstellt wurden, ist der Unterschied deutlich: Der Quelltext zeigt oft nur eine leere Struktur an, während der Inspektor die vollständige Seite darstellt.
Mögliche Maßnahmen gegenüber dem Inspektor sind:
Alle im Inspektor vorgenommenen Änderungen sind temporär: Sie verschwinden beim Neuladen der Seite. Es ist eine perfekte Testumgebung für risikofreies Testen.
Untersuchen einer Seite mit Google Chrome (Chrome-Entwicklertools)
Die Chrome-Entwicklertools gelten als Goldstandard unter den Entwicklungswerkzeugen. Sie werden alle vier bis sechs Wochen mit neuen Chrome-Versionen aktualisiert und integrieren fortschrittliche Funktionen wie Lighthouse für Leistungs- und SEO-Audits, einen responsiven Modus zur Simulation mobiler Geräte und einen vollwertigen JavaScript-Debugger.
So öffnen Sie die Chrome-Entwicklertools
Es gibt vier Möglichkeiten, den Inspektor in Chrome zu öffnen:
Methode 1: Rechtsklick Klicken Sie mit der rechten Maustaste auf ein beliebiges Element auf der Seite und wählen Sie „Untersuchen“. Das Tool öffnet sich direkt im Tab „Elemente“ mit dem angeklickten Element. Dies ist die schnellste Methode, um eine bestimmte Komponente zu untersuchen.
Methode 2: Tastenkombinationen Dies ist die effektivste Methode für normale Benutzer.
Methode 3: Das Chrome-Menü Klicken Sie auf die drei Punkte in der oberen rechten Ecke, dann auf „Weitere Tools“ und anschließend auf „Entwicklertools“.
Methode 4: Die Symbolleiste Ab Chrome 2024+ ist es möglich, eine Schnellzugriffsschaltfläche für die Entwicklertools direkt an die Browser-Symbolleiste anzuheften.
Chrome-Entwicklertools-Tastenkombinationen
| Action | Windows/Linux | Download Mac |
|---|---|---|
| Entwicklertools öffnen/schließen | F12 oder Strg+Umschalt+I | Befehl+Wahl+I |
| Elementselektor (Element auswählen) | Strg + Shift + C | Cmd+Option+C |
| Öffne die Konsole direkt | Strg + Umschalt + J | Befehl+Option+J |
| Reaktionsmodus aktivieren | Strg+Umschalt+M | Cmd+Shift+M |
| Seite neu laden | Strg + R | Cmd + R. |
| Cache leeren und neu laden. | Strg + Umschalt + R | Befehl+Umschalt+R |
Die Hauptregisterkarten der Chrome-Entwicklertools
Sobald die Entwicklertools geöffnet sind, stehen Ihnen mehrere Registerkarten zur Verfügung. Die für den täglichen Gebrauch nützlichsten sind:
Untersuchen einer Seite mit Safari (Web Inspector)
Safari ist der Standardbrowser auf Mac, iPhone und iPad. Sein Analysetool, der sogenannte Web Inspector, ist besonders nützlich zum Debuggen von Seiten unter iOS, da es das einzige Tool ist, mit dem man Safari auf einem iPhone von einem Mac aus untersuchen kann.
Obligatorischer vorbereitender Schritt: Aktivieren Sie das Entwicklermenü.
Im Gegensatz zu Chrome und Firefox blendet Safari seine Entwicklertools standardmäßig aus. Sie müssen diese manuell aktivieren, bevor Sie eine Seite untersuchen können.
Auf macOS Sonoma und neueren Versionen:
Auf älteren macOS-Versionen:
Die Option hieß „Entwicklermenü in der Menüleiste anzeigen“. Der Effekt ist derselbe.
Sobald dieses Kästchen aktiviert ist, erscheint in der Menüleiste von Safari ein Menüpunkt „Entwickler“. Diese Aktion muss nur einmal durchgeführt werden.
So öffnen Sie den Inspektor in Safari
Nach Aktivierung des Entwicklermenüs stehen drei Methoden zur Verfügung:
Rechtsklick Klicken Sie mit der rechten Maustaste auf ein Element auf der Seite und wählen Sie „Element untersuchen“.
Entwicklungsmenü Klicken Sie in der Menüleiste auf „Entwicklung“ und dann auf „Web Inspector anzeigen“ (oder „Web Inspector verbinden“).
Tastaturkürzel : Verwenden Sie direkt die unten stehende Abkürzung.
Safari-Tastenkombinationen (nur Mac)
| Action | Download Mac |
|---|---|
| Öffnen Sie den Web-Inspektor | Befehl+Wahl+I |
| Öffne die Konsole. | Cmd+Option+C |
| Aktivieren Sie die Artikelauswahl. | Cmd+Option+C |
Safari ist nur für macOS und iOS verfügbar; es gibt keine Windows-Version. Daher sind die Tastenkombinationen ausschließlich für Mac.
Eine Seite mit Firefox untersuchen
Firefox bietet eigene Entwicklertools, die für ihren visuellen CSS-Inspektor und den integrierten Flexbox-/Grid-Editor hoch geschätzt werden. Sie funktionieren ähnlich wie die Chrome-Entwicklertools, weisen aber einige Unterschiede in der Benutzeroberfläche auf.
So öffnen Sie die Firefox-Entwicklertools
Rechtsklick Klicken Sie mit der rechten Maustaste auf ein Element und wählen Sie „Untersuchen“.
Hamburger-Menü Klicken Sie auf die drei Linien in der oberen rechten Ecke, dann auf „Weitere Tools“ und anschließend auf „Webentwicklungstools“.
Tastatürkürzel : identisch mit Chrome unter Windows, geringfügige Abweichungen auf dem Mac bei einigen Tabs.
Firefox-Entwicklertools-Tastenkombinationen
| Action | Windows/Linux | Download Mac |
|---|---|---|
| Entwicklertools öffnen/schließen | F12 oder Strg+Umschalt+I | Befehl+Wahl+I |
| Elementinspektor | Strg + Shift + C | Cmd+Option+C |
| Web-Konsole | Strg + Umschalt + K. | Cmd+Option+K |
| Reaktionsmodus | Strg+Umschalt+M | Befehl+Wahl+M |
| Netzwerkmonitor | Strg + Umschalt + E | Cmd+Option+E |
Firefox zeichnet sich durch seine Registerkarte „Barrierefreiheit“ aus, mit der man überprüfen kann, ob die Seitenelemente den ARIA-Standards entsprechen, sowie durch seinen CSS-Inspektor, der vererbte Eigenschaften und widersprüchliche Regeln übersichtlich anzeigt.
5 praktische Anwendungsmöglichkeiten für einen Nicht-Entwickler
Der Komponenteninspektor ist nicht nur für Ingenieure gedacht. Hier sind fünf Situationen, in denen er sich zu einem unverzichtbaren Arbeitsmittel für Personen ohne technischen Hintergrund entwickelt.
1. Überprüfen Sie das mobile Display im responsiven Modus.
Der responsive Modus (oder die Geräte-Toolbar) simuliert, wie Ihre Seite auf Dutzenden verschiedener Geräte angezeigt wird, ohne dass Sie Ihren Desktop verlassen müssen. Aktivieren Sie ihn in Chrome mit Strg+Umschalt+M unter Windows oder Cmd+Umschalt+M unter macOS.
Nach der Aktivierung können Sie über ein Dropdown-Menü vordefinierte Geräte (iPhone 15, Samsung Galaxy S24, iPad Air usw.) auswählen oder benutzerdefinierte Abmessungen eingeben. Sie können außerdem eine langsame Netzwerkverbindung (3G, 4G) simulieren, um die Leistung unter realen Bedingungen zu testen.
Laut einer Studie von Statcounter Über 58 % des weltweiten Web-Traffics stammen von Mobilgeräten.Das Testen von mobilen Displays vor jeder Veröffentlichung ist unerlässlich geworden.
2. Eine exakte Farbe oder Schriftart abrufen
Sie sehen eine Farbe auf der Website eines Mitbewerbers oder Ihrer eigenen und möchten deren genauen Hexadezimalcode erfahren? Klicken Sie mit der rechten Maustaste auf das Element, wählen Sie „Untersuchen“ und sehen Sie dann im Bereich „Stile“ auf der rechten Seite nach. Die Eigenschaft color ou background-color zeigt den genauen Wert an.
Durch Klicken auf das kleine farbige Quadrat neben dem Wert öffnet sich eine Farbauswahl mit einer Pipette, mit der Sie jede auf dem Bildschirm sichtbare Farbe auswählen können. Für Schriftarten gilt die Eigenschaft font-family gibt den genauen Namen der verwendeten Schriftart an, und font-size Gibt die Größe in Pixeln an.
3. Text vor dem Erstellen eines Screenshots korrigieren.
Müssen Sie den Text einer Seite vorübergehend für eine Präsentation, ein Mockup oder eine Kundendemonstration ändern? Mit dem Inspektor können Sie dies in Sekundenschnelle tun.
Klicken Sie mit der rechten Maustaste auf den Text, den Sie bearbeiten möchten, wählen Sie „Untersuchen“ und doppelklicken Sie anschließend im Tab „Elemente“ auf den Text. Geben Sie Ihren neuen Text ein und drücken Sie die Eingabetaste. Die Seite wird sofort aktualisiert. Erstellen Sie einen Screenshot und laden Sie die Seite neu: Alles wird auf den ursprünglichen Zustand zurückgesetzt.
Diese Technik ist besonders nützlich für die Erstellung von Geschäftspräsentationen oder visuellen Berichten, ohne dass die Aufnahmen anschließend in einer Bildbearbeitungssoftware bearbeitet werden müssen.
4. Langsame Seiten mithilfe der Registerkarte „Netzwerk“ diagnostizieren.
Der Netzwerk-Tab listet alle von der Seite geladenen Ressourcen auf: Bilder, Skripte, Stylesheets und API-Aufrufe. Jede Zeile zeigt die Dateigröße und die Ladezeit an.
So verwenden Sie es: Öffnen Sie die Entwicklertools, wechseln Sie zum Tab „Netzwerk“ und aktualisieren Sie die Seite (Strg+R oder Cmd+R). Alle Ressourcen werden nun angezeigt. Klicken Sie auf die Spalte „Größe“, um die Liste nach Dateigröße zu sortieren und die größten Dateien zu finden. Klicken Sie auf die Spalte „Dauer“, um die Ressourcen mit der längsten Laufzeit zu ermitteln.
Ein 5 MB großes, unkomprimiertes Bild oder eine 2 MB große JavaScript-Datei können bereits zu lange Ladezeiten verursachen. Google geht davon aus, dass eine Seite in weniger als 2,5 Sekunden geladen sein sollte, um einen guten LCP-Wert (Largest Contentful Paint) zu erzielen. Dieser Wert gehört zu den wichtigsten Web Vitals-Kennzahlen für das Suchmaschinenranking.
5. Überprüfen Sie Ihre SEO-Tags: Titel und Meta-Beschreibung
Mit dem Inspektor können Sie in wenigen Sekunden überprüfen, ob die SEO-Tags einer Seite korrekt ausgefüllt sind, ohne dass ein Drittanbieter-Tool erforderlich ist.
Um den Titel-Tag zu überprüfen Öffnen Sie die Entwicklertools, wechseln Sie zum Tab „Elemente“ und verwenden Sie die Suchfunktion (Strg+F oder Cmd+F im Bedienfeld). Geben Sie Folgendes ein: <title> Um das Tag zu finden und seinen Inhalt zu lesen. Idealerweise sollte es zwischen 50 und 60 Zeichen enthalten.
Um die Meta-Beschreibung zu überprüfen Geben Sie in derselben Suche Folgendes ein: meta name="description"Der Wert des Attributs content Dies ist Ihre Meta-Beschreibung. Sie sollte zwischen 150 und 155 Zeichen lang sein, damit sie in den Suchergebnissen nicht abgeschnitten wird. Google ändert Meta-Beschreibungen in etwa 60 bis 70 % der Fälle, aber eine gute Meta-Beschreibung ist auch dann wichtig, wenn sie unverändert angezeigt wird.
Um die Hn-Tags zu überprüfen Geben Sie in der Suchleiste Folgendes ein: <h1 um zu überprüfen, ob die Seite einen eindeutigen und korrekt geschriebenen H1-Titel hat.
Eine Seite auf einem Smartphone anzeigen
Der responsive Modus der Chrome-Entwicklertools simuliert mobile Geräte, bildet aber das Verhalten eines echten Browsers auf einem echten Smartphone nicht perfekt nach. Für eine genaue Diagnose stehen Methoden zur Ferndiagnose zur Verfügung.
Auf Android-Geräten mit Chrome untersuchen
chrome://inspect/#devices in der Adressleiste.Auf Ihrem Computer öffnet sich ein vollständiges Chrome-Entwicklertools-Fenster, das in Echtzeit mit dem Browser Ihres Telefons verbunden ist.
Auf dem iPhone mit Safari (Mac) prüfen
Der Web-Inspektor von Safari öffnet sich auf Ihrem Mac und bietet vollen Zugriff auf die Elemente, die Konsole und das Netzwerk der auf Ihrem iPhone angezeigten Seite. Er ist die einzige native Methode zum Debuggen von Safari unter iOS und somit ein unverzichtbares Werkzeug für Teams, die die Kompatibilität mit Apple-Geräten testen.
Übersichtstabelle der Tastenkombinationen nach Browser und System
| Action | Chrom (Windows) | Chrome (Mac) | Firefox (Windows) | Firefox (Mac) | Safari (Mac) |
|---|---|---|---|---|---|
| Entwicklertools öffnen | F12 oder Strg+Umschalt+I | Befehl+Wahl+I | F12 oder Strg+Umschalt+I | Befehl+Wahl+I | Cmd+Option+I* |
| Elementselektor | Strg + Shift + C | Cmd+Option+C | Strg + Shift + C | Cmd+Option+C | Cmd+Option+C* |
| Console | Strg + Umschalt + J | Befehl+Option+J | Strg + Umschalt + K. | Cmd+Option+K | Cmd+Option+C* |
| Reaktionsmodus | Strg+Umschalt+M | Cmd+Shift+M | Strg+Umschalt+M | Befehl+Wahl+M | Nicht verfügbar |
| Netzwerkmonitor | Strg + Umschalt + E | Cmd+Option+E | Strg + Umschalt + E | Cmd+Option+E | Über das Entwicklermenü |
*Erfordert die vorherige Aktivierung des Entwicklermenüs unter Safari > Einstellungen > Erweitert.
Entdecken Sie im gleichen praktischen Sinne, wie Ein Popup in JavaScript erstellenUnd wenn Sie in erster Linie Zeit bei der Verwaltung Ihres Unternehmens und nicht beim Programmieren sparen möchten, zentralisiert Djaboo dies. CRM, Zitat et Abrechnung in einem einzigen Tool.
FAQ: Die 5 am häufigsten gestellten Fragen zum Element Inspector
Kann der Elementinspektor eine Webseite dauerhaft verändern?
Nein. Alle im Inspektor vorgenommenen Änderungen sind lokal und temporär. Sie existieren nur in Ihrem Browser und verschwinden, sobald Sie die Seite neu laden. Der Inspektor greift niemals auf die auf dem Server gespeicherten Dateien zu. Sie können daher auf jeder Seite bedenkenlos experimentieren.
Warum wird die Option „Untersuchen“ in Safari nicht angezeigt?
Safari blendet die Entwicklertools standardmäßig aus. Um sie zu aktivieren, gehen Sie zu Safari > Einstellungen > Erweitert und aktivieren Sie die Option „Funktionen für Webentwickler anzeigen“. Sobald diese Option aktiviert ist, wird durch einen Rechtsklick das Menü „Element untersuchen“ angezeigt.
Kann der Elementinspektor auf einem iPhone oder einem Android-Gerät verwendet werden?
Mobile Browser verfügen nicht über einen integrierten Inspektor, der direkt auf dem Bildschirm des Telefons zugänglich ist. Sie müssen das Telefon per USB mit einem Computer verbinden und Remote-Debugging verwenden: Chrome DevTools für Android und Safari Web Inspector für iPhone (nur von einem Mac aus).
Ist der Elementinspektor für SEO nützlich?
Ja, und zwar auf eine sehr praktische Weise. Es ermöglicht Ihnen, den Title-Tag, die Meta-Beschreibung, die Struktur der Hn-Tags (H1, H2, H3), die Alt-Attribute von Bildern und die internen Links zu überprüfen – alles ohne ein externes Tool. Es ist ein schneller Onpage-SEO-Audit, der mit wenigen Klicks möglich ist.
Worin besteht der Unterschied zwischen dem Inspektor und „Quellcode anzeigen“?
Die Funktion „Quelltext anzeigen“ (Strg+U unter Windows, Cmd+U unter Mac) zeigt den vom Server gesendeten HTML-Code an, bevor JavaScript ausgeführt wird. Der Inspektor zeigt das Live-DOM nach allen dynamischen Änderungen. Bei Websites, die mit JavaScript-Frameworks erstellt wurden, zeigt nur der Inspektor den tatsächlichen Seiteninhalt an.
Djaboo: Ihr Unternehmen verwalten, ohne auf technische Tools angewiesen zu sein
Die Beherrschung des Elementinspektors bedeutet mehr Autonomie im Web. Diese Logik von Autonomie und Produktivität steht im Mittelpunkt seines Angebots. DjabooDjaboo ist ein CRM-System, das speziell für Kleinstunternehmen und KMU entwickelt wurde, die ihre Kunden, Projekte und Rechnungsstellung ohne spezielle technische Kenntnisse verwalten möchten. So wie der Element Inspector jeden zum Webanalysten macht, verwandelt Djaboo jedes Team – von 1 bis über 100 Personen – in eine strukturierte und produktive Organisation.
