--- title: "Chrome DevTools einfach erklärt – Webseiten untersuchen …" url: https://iliyan-hristov.de/seo/chrome-devtools-einfach-erklaert/ source: SEO Einfach Kapiert language: de published: 2026-10-25T14:59:51.000Z modified: 2026-10-25T14:59:51.000Z --- # Chrome DevTools einfach erklärt – Webseiten untersuchen und für SEO prüfen? 📊 Messen & Verbessern · Messen & Verbessern · Deutsch · Quer · 676 Sek. ## Kurz gesagt Die Chrome DevTools Schritt für Schritt für Einsteiger erklärt, am Beispiel von topkompass.de: DevTools öffnen, HTML im Elements-Panel untersuchen, CSS live ändern, Boxmodell und Computed-Werte, Hover-Zustände erzwingen, Bilder, Tabellen und Affiliate-Links prüfen. Dazu der SEO-Check im head mit Title, Meta-Description, Canonical, Robots, Open Graph und JSON-LD, der Gerätemodus für die Handyansicht, die Console, Sources mit Breakpoints, das Network-Panel mit Statuscodes, Filtern und TTFB, Core Web Vitals wie LCP und CLS, ein Lighthouse-Bericht, Application, Memory und Security, das Befehlsmenü, Coverage für ungenutztes CSS und JavaScript sowie der Seitenquelltext im Vergleich zum Elements-Panel. Von der Redaktion „Iliyan Hristov“ · veröffentlicht am 25. Oktober 2026 ## Worum geht's? Elements, CSS live ändern, Meta-Tags und JSON-LD, Handyansicht, Console, Debugging, Network, Core Web Vitals, Lighthouse und Coverage – Schritt für Schritt **Zum Nachlesen: Was im Video sagt** **Einleitung:** Die Chrome DevTools Schritt für Schritt für Einsteiger erklärt, am Beispiel von topkompass.de: DevTools öffnen, HTML im Elements-Panel untersuchen, CSS live ändern, Boxmodell und Computed-Werte, Hover-Zustände erzwingen, Bilder, Tabellen und Affiliate-Links prüfen. Dazu der SEO-Check im head mit Title, Meta-Description, Canonical, Robots, Open Graph und JSON-LD, der Gerätemodus für die Handyansicht, die Console, Sources mit Breakpoints, das Network-Panel mit Statuscodes, Filtern und TTFB, Core Web Vitals wie LCP und CLS, ein Lighthouse-Bericht, Application, Memory und Security, das Befehlsmenü, Coverage für ungenutztes CSS und JavaScript sowie der Seitenquelltext im Vergleich zum Elements-Panel. **Intro:** Hey, schön, dass du da bist! Heute schauen wir mit den Chrome DevTools unter die Motorhaube einer Webseite. Als Beispiel nehm ich topkompass.de, meine eigene Vergleichsseite für Akkustaubsauger. **DevTools öffnen:** Drück einfach F12 oder mach einen Rechtsklick und wähl Untersuchen. Auf dem Mac geht's mit Cmd, Option und I. Rechts klappen dann die DevTools auf. Oben siehst du die Reiter: Elements, Console, Sources, Network, Performance und so weiter. Jeder Reiter ist ein eigenes Werkzeug. Wir gehen sie alle in Ruhe durch. **Elements und CSS:** Elements zeigt dir das HTML. HTML ist das Gerüst einer Seite: Überschriften, Absätze, Bilder. Hier als Baum, den du auf- und zuklappst wie Ordner. Rechts steht das CSS, also die Gestaltung: Farben, Schriften, Abstände. Durchgestrichene Regeln wurden von einer anderen Regel überschrieben. Mit dem Pfeil oben links oder Strg, Umschalt und C zeigst du direkt auf etwas. Fahr ich über die Überschrift, sagt Chrome: Das ist eine h1, 897 mal 48 Pixel groß. Gleichzeitig springt der Baum an die passende Stelle. Für SEO wichtig: Die Hauptüberschrift sollte genau eine h1 sein, und das ist sie hier auch. Klickst du sie an, stehen rechts alle Regeln dafür. Oben die eigenen der Seite, etwa Schriftdicke 800, ganz unten die Standardwerte vom Browser. Und jetzt das Coolste: Du kannst CSS live ändern. Ich tippe bei element.style eine neue Farbe ein, und schon ist die Überschrift pink. Keine Angst, das gilt nur in deinem Browser. Im Reiter Computed stehen die Werte, die am Ende wirklich gelten. Oben das Boxmodell: Inhalt, Innenabstand, Rahmen und Außenabstand, hier überall null. Das klappt mit allem. Beim Produktbild verrät der Code: Der alt-Text ist Mova G70 Complete, Breite und Höhe sind gesetzt, und loading lazy lädt es erst beim Scrollen. Beim orangen Button Zum Angebot warnt der Tooltip: Kontrast nur 3,04. Weiße Schrift auf Orange ist für manche Leute schwer zu lesen. Im Code siehst du das Linkziel und rel nofollow. Das sagt Google: Das ist ein Werbelink, dem folge ich nicht. Genau so gehört sich das bei Affiliate-Links. Hover heißt, die Maus ist über einem Element. Mit :hov rechts erzwingst du diesen Zustand. Sonst ist der Effekt weg, sobald du zu den DevTools rüberfährst. Häkchen bei hover, und der Button wird dunkler. Rechts steht die passende Regel. Der orange Punkt im Baum erinnert dich daran, den Haken später wieder rauszunehmen. **SEO-Check im head:** Im head, den Besucher nicht sehen, liest Google ganz genau mit. Der title ist die blaue Überschrift im Suchergebnis, die meta description der graue Text darunter. Beide sollten neugierig machen. Der canonical-Link nennt die offizielle Adresse der Seite, damit es keine doppelten Inhalte gibt. Und robots sagt hier: index, follow, also bitte aufnehmen. Darunter stehen Open-Graph- und Twitter-Tags. Die bestimmen, wie die Vorschau aussieht, wenn jemand den Link bei WhatsApp oder LinkedIn teilt. Ganz unten im head steckt ein script vom Typ ld+json. Das sind strukturierte Daten, sie beschreiben den Inhalt für Maschinen. Hier einen Artikel mit Datum und Herausgeber. Dazu kommt eine sortierte Produktliste: Platz 1 Mova G70 Complete, dann Roborock, Dyson und Dreame. Daraus kann Google erweiterte Suchergebnisse bauen. **Gerätemodus:** Mit dem Handy-Symbol oben links oder Strg, Umschalt und M schaltest du den Gerätemodus ein. In der Liste wählst du ein Gerät, hier ein iPhone 16 mit 393 mal 852 Pixeln. Jetzt siehst du die Seite wie auf dem Handy. Das ist wichtig, weil Google vor allem die Handy-Version bewertet. Oben simulierst du sogar ein langsames Netz. **Console:** Die Console ist ein Eingabefeld für JavaScript, die Programmiersprache von Webseiten. Tipp document.title und drück Enter, dann bekommst du den Seitentitel zurück. Mit document.querySelectorAll, a in Klammern und Punkt length zählst du alle Links, hier 291 Stück. Mit img statt a kommen 13 Bilder raus. **Sources und Debugging:** Unter Sources liegen alle Dateien, die die Seite geladen hat, sortiert wie Ordner. Bei topkompass.de unter assets steckt site.js, das JavaScript der Seite. Ein Klick auf eine Zeilennummer setzt einen Breakpoint, also einen Haltepunkt. Hier in Zeile 3. Lädst du die Seite neu, hält das Skript genau dort an. Und tatsächlich: Die Seite wird grau, oben steht Paused in debugger. Rechts unter Scope siehst du die Variablen. a hat hier noch keinen Wert. Mit Step over, also F10, geht's eine Zeile weiter. Jetzt steckt in a der Video-Link der Seite. So verfolgst du Schritt für Schritt, was ein Skript tut. F8 lässt alles weiterlaufen. Und mit Strg, Umschalt und F durchsuchst du alle Dateien auf einmal. Bei addEventListener findet Chrome 29 Treffer in 2 Dateien. **Network:** Network zeichnet jede Datei auf, die beim Laden geholt wird. So eine Anfrage an den Server heißt Request. Wichtig: erst Network öffnen, dann mit F5 neu laden. Pro Zeile siehst du Statuscode, Typ, Größe und Ladezeit. Der Statuscode 200 heißt alles okay, 404 hieße nicht gefunden. Hier sind alle 200. Unten die Summe: 8 Anfragen, 712 Kilobyte, nach 1,09 Sekunden ist alles geladen. Die große injected.js kommt übrigens von einer Browser-Erweiterung, nicht von der Seite. Mit den Filtern zeigst du nur bestimmte Typen. Bei Img bleiben vier Bilder: drei kleine WebP-Fotos und ein JPEG-Vorschaubild mit 137 Kilobyte, das schwerste Stück. Klick auf das Dokument und dann auf Preview. So kommt die Seite roh vom Server, H1, Infos und Einleitung sind schon drin. Das können Google und KI-Crawler ohne Umweg lesen. Response zeigt den reinen Quelltext. Das CSS steckt direkt im HTML, deshalb taucht keine extra CSS-Datei in der Liste auf. Das spart eine Anfrage. Im Reiter Timing wird die Ladezeit zerlegt. Waiting for server response ist die TTFB, Time to First Byte: 516 Millisekunden. Der Download dauert nur 1,3. Der Engpass ist also der Server. **Performance und Lighthouse:** Performance zeigt beim Öffnen sofort deine Core Web Vitals, Googles Messwerte fürs Nutzererlebnis. LCP heißt: Wann ist das größte Element sichtbar? Hier nach 0,62 Sekunden, grün. CLS misst, wie sehr die Seite beim Laden herumspringt, 0,01 ist super. INP misst, wie schnell sie auf Klicks reagiert, und erscheint erst, wenn du etwas anklickst. Links stehen die Insights, also Tipps in Klartext. Bilder besser ausliefern spart geschätzt 194 Kilobyte, längere Cache-Zeiten noch mal 65. Unten im Call tree siehst du, wofür die Rechenzeit draufging. Am meisten fürs Layout, also das Ausrechnen, wo alles auf der Seite hinkommt. Lighthouse ist der eingebaute Prüfbericht. Wähl Mobile, das ist strenger, hak die Kategorien an und klick auf Analyze page load. Am besten im Inkognito-Fenster. Jetzt schaltet Chrome auf Handygröße um, lädt neu und misst. Lass die Finger still und wechsel nicht den Tab, sonst werden die Werte ungenau. Das Ergebnis: 96 bei Performance, 97 bei Barrierefreiheit, 100 bei Best Practices und 100 bei SEO. Grün heißt 90 bis 100, richtig gut. Darunter konkrete Befunde: rund 234 Kilobyte ungenutztes JavaScript und sechs lange Aufgaben. Dafür schauen wir gleich ins Coverage-Werkzeug. Und die drei fehlenden Punkte bei Barrierefreiheit? Der Kontrast reicht nicht. Das ist genau der orange Button von vorhin. **Application, Memory und Security:** Application zeigt, was eine Seite im Browser speichert. Ein Manifest gibt's hier nicht, das braucht man nur für installierbare Web-Apps. Kein SEO-Problem. Unter Cookies siehst du alle Cookies einer Seite. Bei topkompass.de ist die Tabelle leer, es werden keine gesetzt. Deshalb braucht die Seite auch keinen Cookie-Banner. Memory brauchst du, wenn eine Seite immer mehr Arbeitsspeicher frisst. Ein Heap snapshot ist eine Momentaufnahme. Mit 12,7 Megabyte ist hier alles entspannt. Security bestätigt: Die Seite läuft sicher über HTTPS, mit gültigem Zertifikat und moderner Verschlüsselung. HTTPS zählt bei Google sogar fürs Ranking. **Befehlsmenü und Coverage:** Du weißt nicht, wo eine Funktion steckt? Drück Strg, Umschalt und P. Das Befehlsmenü ist die Suchleiste für alle DevTools-Werkzeuge. Tipp zum Beispiel Coverage. Coverage öffnet sich unten. Klick auf Reload page, dann misst Chrome, wie viel vom geladenen CSS und JavaScript wirklich benutzt wird. Ergebnis: Vom CSS sind gut 52 Prozent ungenutzt, von site.js sogar 74 Prozent. Die chrome-extension-Zeile ist eine Erweiterung, die gehört nicht zur Seite. **Seitenquelltext:** Zum Schluss drück Strg und U, oder Rechtsklick und Seitenquelltext anzeigen. Das ist das HTML, wie es vom Server kommt, bevor JavaScript irgendwas verändert. Elements zeigt dagegen den Stand, nachdem Skripte gearbeitet haben. Für SEO prüfst du hier: Stehen title, description, canonical und genau eine h1 schon im Quelltext? Hier passt alles. **Was du dir merken solltest:** Öffne die DevTools mit F12 oder Rechtsklick und Untersuchen. Was du dort änderst, gilt nur bei dir. Schau im head nach title, description und robots. Prüf die Handyansicht. Öffne Network vor dem Neuladen. Und lass Lighthouse im Inkognito-Fenster laufen. Probier's einfach mal aus! Mehr einfach erklärt auf iliyan-hristov.de. Bis bald! **Zum Schluss:** DevTools mit F12 oder Rechtsklick und Untersuchen öffnen, Änderungen gelten nur lokal, im head Title, Description und Robots prüfen, die Handyansicht testen, Network vor dem Neuladen öffnen und Lighthouse im Inkognito-Fenster laufen lassen. Vereinfacht erklärt, ohne Gewähr. ## Auf YouTube Dieses Video gibt es auch auf unserem Kanal. [▶ Auf YouTube ansehen](https://youtu.be/ePU38M1sL0k)[Kanal abonnieren](https://www.youtube.com/channel/UCfypwm7ZTtZY-VOODNVW0Zw?sub_confirmation=1) ## Mehr zum Thema Messen & Verbessern alle ansehen - [Rich Results Test vs. Schema Validator?](https://iliyan-hristov.de/seo/strukturierte-daten-pruefen-rich-results-test/) – 📊 Messen & Verbessern · ▶ YouTube · 596 Sek. - [Wappalyzer einfach erklärt – welche Technik steckt hinter einer Website?](https://iliyan-hristov.de/seo/wappalyzer-einfach-erklaert/) – 📊 Messen & Verbessern · ▶ YouTube · 550 Sek. - [Wayback Machine einfach erklärt – Zeitreise durchs Internet mit yahoo.com?](https://iliyan-hristov.de/seo/wayback-machine-einfach-erklaert/) – 📊 Messen & Verbessern · ▶ YouTube · 687 Sek.