Google beschreibt DevTools als Satz von Werkzeugen für Webentwickler, der direkt in Chrome eingebaut ist [1]. Man braucht nichts zu installieren. Ein Rechtsklick auf ein Element und "Untersuchen" öffnet das Panel Elements mit genau diesem Element. Strg+Umschalt+C führt dorthin, Strg+Umschalt+J direkt zur Konsole, auf dem Mac jeweils mit Command und Option [1]. Für SEO sind die Werkzeuge nützlich, weil sie zeigen, was der Browser wirklich bekommt, unabhängig davon, was das CMS anzeigt.
Die wichtigsten Panels
Im Panel Elements siehst du das DOM und das CSS der Seite und kannst beides probeweise ändern. Die Konsole zeigt Meldungen und führt JavaScript aus, mehr dazu unter Browser-Konsole. Sources dient zum Debuggen von JavaScript. Network zeigt jede Anfrage der Seite, Performance misst Lade- und Laufzeit, Memory sucht Speicherprobleme. Unter Application liegen Cookies, Local Storage und weitere gespeicherte Daten, unter Security Hinweise zu Zertifikaten und gemischten Inhalten [1]. Dazu kommt ein Panel für Google Lighthouse, das eine Seite automatisch prüft.
Bei SEO-Fragen beginnt die Arbeit meist in Elements. Dort lässt sich im Kopf der Seite nachsehen, welcher Title, welche Meta Description und welcher Canonical nach dem Ausführen der Skripte im DOM stehen und ob ein Text als HTML auf der Seite steht. Weil Elements das DOM zeigt, sind auch Inhalte zu sehen, die erst ein Skript eingefügt hat. Der Recorder zeichnet Abläufe auf, etwa einen Bestellvorgang, spielt sie wieder ab und misst sie [1]. So lässt sich nach einer Änderung prüfen, ob der Weg durch den Shop noch genauso funktioniert.
Network: Statuscodes und Header
Für technische SEO-Fragen ist das Netzwerk-Panel am wichtigsten. Die Spalte Status zeigt den HTTP-Statuscode jeder Antwort, etwa 200 oder 404 [2]. Klickst du eine Anfrage an, erscheinen die HTTP-Header, darunter Weiterleitungsziele, Cache-Control oder ein X-Robots-Tag. Mit dem Kästchen "Disable cache" schaltet DevTools den Browser-Cache ab und stellt so einen Erstbesuch nach [2]. Über das Menü Throttling lassen sich langsamere Verbindungen wie 3G simulieren. Im Bereich Network Conditions kannst du einen anderen User-Agent eintragen, etwa den eines Smartphones [2].
Noch eine Frage offen?
In der gratis Sprechstunde beantworten wir Fragen zu SEO live, jeden ersten Samstag im Monat um 18 Uhr. Oder du rufst einfach an.
Device Mode und seine Grenzen
Ein Klick auf das Gerätesymbol in der Werkzeugleiste schaltet den Device Mode ein. Er simuliert Bildschirmgrößen von Mobilgeräten, bremst Prozessor und Netz und stellt Sensoren wie den Standort nach [3]. Google nennt ihn ausdrücklich eine Annäherung erster Ordnung. Der Code läuft weiter auf dem eigenen Rechner, und dessen Prozessor arbeitet ganz anders als der eines Smartphones [3]. Wer sicher sein will, testet zusätzlich auf einem echten Gerät, Google empfiehlt dafür Remote Debugging [3].
Für Ladezeiten gilt dasselbe. Werte, die du in DevTools misst, sind Labordaten von einem Rechner. Wie echte Besucher die Seite erleben, zeigen Felddaten aus dem Chrome User Experience Report. Was die Messwerte bedeuten, erklärt der Eintrag Core Web Vitals, die Bedeutung der Codes der Eintrag Statuscodes.
Über einzelne Funde aus dem Netzwerk-Panel, etwa eine Weiterleitung, die du nicht erwartet hast, sprechen wir in der gratis Sprechstunde.
- Organisation Chrome DevTools (Overview). Chrome for Developers. Stand 28.03.2016. abgerufen am 31.10.2026
- Organisation Network features reference. Chrome for Developers. Stand 16.07.2024. abgerufen am 31.10.2026
- Organisation Simulate mobile devices with device mode. Chrome for Developers. Stand 20.02.2024. abgerufen am 31.10.2026
Häufige Fragen
Wie öffne ich die Chrome DevTools?
Mit einem Rechtsklick auf ein Element und "Untersuchen", mit Strg+Umschalt+C für das Panel Elements oder mit Strg+Umschalt+J für die Konsole. Auf dem Mac gelten Command und Option statt Strg und Umschalt.
Wo sehe ich den Statuscode einer Seite?
Im Panel Network in der Spalte Status. Ein Klick auf die Anfrage zeigt zusätzlich die HTTP-Header, etwa das Ziel einer Weiterleitung.
Ersetzt der Device Mode einen Test auf dem Smartphone?
Nein. Google nennt ihn eine Annäherung, weil der Code weiter auf dem eigenen Rechner läuft. Für verlässliche Ergebnisse empfiehlt Google den Test auf einem echten Gerät.
Sind die Ladezeiten in DevTools dieselben wie bei Google?
Nein. DevTools misst Labordaten auf deinem Rechner. Google wertet für die Core Web Vitals Felddaten echter Chrome-Nutzer aus dem Chrome User Experience Report aus.
Noch eine Frage offen?
In der gratis Sprechstunde beantworten wir Fragen zu SEO live, jeden ersten Samstag im Monat um 18 Uhr. Oder du rufst einfach an.
Zuletzt geprüft am 03.11.2026, nächste Prüfung spätestens im November 2027. Fehler entdeckt? Schreib uns.
