Sie arbeiten an einem responsiven Layout, prüfen es auf dem Desktop, alles sieht perfekt aus. Sie öffnen es auf einem Smartphone, das Layout zerbricht, die Schrift wird so groß wie ein Streichholzkopf und der Button „Bezahlen" rutscht über den Bildschirmrand hinaus.

Produktgiganten mit Budgets für QA-Labore können es sich leisten, eine Flotte echter Geräte für jeden Bildschirm zu kaufen. Aber was soll ein Freelancer, ein Drei-Personen-Startup oder ein Solo-Entwickler tun? Die Antwort ist der in Chrome integrierte DevTools-Emulator. Kostenlos, startet mit einem einzigen Tastenkürzel und deckt die große Mehrheit der alltäglichen responsiven Testaufgaben ab. Keine zusätzliche Software zu installieren, keine virtuellen Maschinen, keine Cloud-Farmen.

Nachfolgend eine Schritt-für-Schritt-Anleitung zum Gerätemodus: von der Aktivierung bis zur Feinabstimmung von Netzwerkdrosselung und Sensoremulation. Alles, was Sie benötigen, um eine Website auf Smartphones und Tablets zu testen, ohne Ihren Arbeitslaptop zu verlassen.

💡 Kurzer Überblick:

• Öffnen Sie DevTools (F12 oder Ctrl+Shift+I) und aktivieren Sie die Geräte-Symbolleiste (Ctrl+Shift+M), die Seite wechselt in den Emulationsmodus für mobile Ansichtsfenster.
• Wählen Sie ein bestimmtes Modell aus der Dropdown-Liste (iPhone, Pixel, Galaxy) oder legen Sie eine benutzerdefinierte Auflösung in Pixeln fest, Chrome wendet automatisch den passenden User-Agent an.
• Konfigurieren Sie die Netzwerkdrosselung (Slow 3G / Fast 3G) und aktivieren Sie die Touchemulation, um zu sehen, wie die Seite lädt und mit Nutzern im echten mobilen Internet interagiert.
• Denken Sie an die Grenzen: Der Emulator bildet nicht die Hardware-GPU eines bestimmten Geräts, die iOS-Schriftdarstellung oder das Verhalten von Safari WebKit nach, ein echtes Telefon ist für den abschließenden Test weiterhin notwendig.

Was der Gerätemodus ist und wann er ausreicht

Der Gerätemodus ist ein Werkzeugsatz innerhalb der Chrome DevTools, der die Anzeige einer Seite auf einem Mobilgerät emuliert. Er tut drei Dinge gleichzeitig:

• Emuliert das Ansichtsfenster, indem er den Anzeigebereich auf die physischen Bildschirmabmessungen des ausgewählten Geräts komprimiert. Sie sehen die Website so, wie ein Nutzer eines iPhone 16 Pro Max oder Samsung Galaxy S25 sie sehen würde.
• Täuscht den User-Agent vor, der Server erhält eine für einen mobilen Browser typische Zeichenkette. Entscheidend für Websites mit dynamischer Auslieferung, die unterschiedliche Layouts für Desktop und Mobilgeräte bereitstellen.
• Aktiviert die Touchemulation, der Mauszeiger wird zu einer Fingersimulation, mit Unterstützung für Touch-Ereignisse, Gesten und Multi-Touch.

Lassen Sie uns gleich die Grenzen festlegen. Der Gerätemodus emuliert NICHT: die Safari-Rendering-Engine (WebKit), die Hardwarebeschleunigungs-GPU eines bestimmten Modells, das Batterieverhalten und Hintergrundprozesse des Betriebssystems oder das Mobilfunknetzverhalten verschiedener Anbieter. Für den abschließenden Abnahmetest vor der Veröffentlichung ist ein physisches Telefon weiterhin erforderlich. Für die tägliche Entwicklung und Fehlerbehebung deckt das Werkzeug die Anforderungen jedoch mit Leichtigkeit ab.

So öffnen Sie den Gerätemodus: drei Methoden

Chrome bietet mehrere Wege zum Emulationspanel. Wählen Sie den, der in Ihrem Arbeitsablauf schneller ist.

Methode 1. Tastenkürzel, die schnellste

Drücken Sie in Chrome:

• Windows / Linux: Ctrl + Shift + M
• macOS: Cmd + Shift + M

Falls die DevTools noch nicht geöffnet sind, werden sie automatisch zusammen mit dem Emulationspanel geöffnet. Erneutes Drücken deaktiviert den Gerätemodus und versetzt die Seite zurück in die normale Ansicht.

Methode 2. Schaltfläche in den DevTools

Öffnen Sie die DevTools (F12 oder Ctrl+Shift+I). In der oberen linken Ecke des Panels, neben dem Tab „Elements", befindet sich ein Telefon- und Tablet-Symbol, Toggle device toolbar. Klicken Sie darauf.

Methode 3. Über das Chrome-Hauptmenü

Drei Punkte in der oberen rechten Ecke des Browsers → More Tools → Developer Tools. Dann die Schaltfläche der Geräte-Symbolleiste, wie in Methode 2. Der Pfad ist länger, hilft Ihnen aber, wenn Ihnen die Tastenkürzel mitten in einem nächtlichen Deployment entfallen sind.

Geräteauswahl und Emulationseinstellungen

Nach der Aktivierung der Geräte-Symbolleiste wird die Seite neu geladen und ein Bedienfeld erscheint darüber. Lassen Sie uns jedes Element aufschlüsseln.

Geräte-Dropdown-Liste

Das zentrale Element, eine Dropdown-Liste mit voreingestellten Profilen. Chrome wird mit etwa fünfzehn Voreinstellungen ausgeliefert: vom iPhone SE (zur Prüfung kompakter Bildschirme) bis zum iPhone 16 Pro Max, vom Pixel 9 bis zum Galaxy S25.

Wählen Sie ein Gerät aus, und Chrome führt in einem Schritt Folgendes aus:

• setzt die Breite und Höhe des Ansichtsfensters;
• wendet den entsprechenden User-Agent an;
• aktiviert die Touchemulation (sofern nicht manuell deaktiviert).

Um ein Gerät hinzuzufügen, das nicht in der Liste ist, klicken Sie im selben Dropdown-Menü auf Edit... und füllen das Formular aus: Bildschirmauflösung, Device Pixel Ratio, User-Agent-String. Das benutzerdefinierte Profil erscheint in der allgemeinen Liste.

Manuelle Auflösung

Sie möchten sich nicht an ein bestimmtes Modell binden? Geben Sie beliebige Zahlen in die Felder für Breite und Höhe ein. Typisches Szenario: „Wie sieht das Layout auf einem standardmäßigen Android-Smartphone der Mittelklasse aus?", Sie geben eine typische Auflösung ein und erhalten sofort die Antwort, ohne das richtige Modell in der Liste suchen zu müssen.

Device Pixel Ratio

DPR bestimmt, wie viele physische Bildschirmpixel einem CSS-Pixel entsprechen. Moderne Flaggschiffe haben DPR = 3, Tablets und günstige Telefone 2. Im Chrome-Emulationspanel wird der aktuelle DPR-Wert für das ausgewählte Gerät angezeigt und erlaubt Ihnen, ihn über die Dropdown-Liste zu ändern. Dies wirkt sich direkt auf die Schärfe von Bildern und SVG-Symbolen auf Retina-Displays aus.

Bildschirmdrehung, Netzwerkdrosselung und Sensoren

Drei zusätzliche Einstellungen, die den Gerätemodus von einer einfachen „Lupe" in ein vollwertiges Testwerkzeug verwandeln.

Bildschirmdrehung

Das Symbol mit zwei kreisförmigen Pfeilen vertauscht Breite und Höhe. Schalten Sie auf jedem wichtigen Bildschirm immer zwischen Hochformat ↔ Querformat um: Website-Header, Produktkarte, Zahlungsformular. Horizontales Scrollen auf einer Landingpage im Hochformat ist ein kritischer Fehler, den der Kunde schneller bemerkt als Sie.

Netzwerkdrosselung

Die Dropdown-Liste No throttling erlaubt es Ihnen, die Ladegeschwindigkeit zu begrenzen. Verfügbare Voreinstellungen:

• Slow 3G (400 Kbps), schlechtes mobiles Internet in der U-Bahn, außerhalb der Stadt oder in einem Keller;
• Fast 3G (1,6 Mbps), typisches mobiles Internet in der Stadt;
• Slow 4G und Fast 4G (4-25 Mbps), gute Verbindung.

Nach Auswahl eines Profils aktualisieren Sie die Seite und betrachten die Zeitangaben im Netzwerk-Panel. Wenn Schriftarten oder Hero-Images bei Fast 3G länger als drei Sekunden laden, ist ein Nutzer mit langsamem Internet bereits zur Konkurrenz abgewandert.

Touchemulation

Standardmäßig aktiviert, wenn ein mobiles Gerät ausgewählt wird. Der Cursor verwandelt sich in einen durchscheinenden Kreis, der einen Fingertipp simuliert. Prüfen Sie drei Dinge:

• Funktionieren Dropdown-Menüs bei Antippen, nicht bei Hover;
• ist die Größe interaktiver Elemente ausreichend, gemäß WCAG 2.1 beträgt die minimale Touch-Zielfläche 48×48 CSS-Pixel;
• gibt es keine falschen Auslöser für Hover-Effekte, die auf einem echten Telefon physisch nicht reproduzierbar sind.

Geolokalisierung, Media Queries und Sensoren

Chrome hat mehrere nützliche Werkzeuge im Menü „Drei Punkte" (⋮) innerhalb des DevTools-Panels versteckt, im Bereich More tools.

Geolokalisierung

Der Tab „Sensors" (More tools → Sensors) erlaubt es Ihnen, beliebige Längen- und Breitengradkoordinaten festzulegen. Eine Website, die die Geolocation API verwendet, erhält den angegebenen Punkt anstelle des echten. Praktisch für die Prüfung regionaler Preise, automatischer Erkennung der Interface-Sprache und lokaler Aktionen.

Media Queries

Das Panel Rendering (More tools → Rendering) zeigt CSS-Media-Query-Breakpoints direkt über der Seite an. Aktivieren Sie das Flag Show media queries, eine farbige Skala mit Markierungen für Stilwechsel erscheint über der Seite. Ein Klick auf einen Punkt setzt das Ansichtsfenster sofort auf die entsprechende Breite. Eine unverzichtbare Sache beim Debuggen komplexer Breakpoints.

Prefers-color-scheme und prefers-reduced-motion

Ebenfalls im Panel Rendering befinden sich Umschalter:

• prefers-color-scheme, erzwingt das helle oder dunkle Thema unabhängig von den Betriebssystemeinstellungen;
• prefers-reduced-motion, emuliert eine Anfrage zur Deaktivierung von Animationen, entscheidend für Barrierefreiheitstests.

Screenshots und Screencast-Aufzeichnung

Der Gerätemodus kann Screenshots der emulierten Seite erstellen. Drei Punkte im Panel der Geräte-Symbolleiste → Capture screenshot, und Sie erhalten ein PNG genau in der Größe, die Sie auf dem Bildschirm sehen. Für einen Screenshot der gesamten Seitenhöhe wählen Sie Capture full size screenshot, nützlich, um das Layout an einen Kunden oder in einem Fehlerbericht zu senden.

Wenn statische Screenshots nicht ausreichen, zeichnet Chrome einen Screencast der Arbeit mit der emulierten Seite auf. Öffnen Sie das Panel Recorder (More tools → Recorder), erstellen Sie eine neue Aufzeichnung und führen Sie Aktionen aus, Chrome zeichnet jeden Schritt mit Zeitstempeln auf. Die fertige Aufzeichnung kann als Puppeteer-Skript exportiert werden und automatisiert erneute Tests nach Bearbeitungen durchführen.

Grenzen: Wenn es ohne ein echtes Gerät nicht geht

Die Chrome-Emulation ist ein leistungsstarkes Werkzeug, aber kein Allheilmittel. Hier ist, was sie grundsätzlich nicht abdeckt:

• iOS-Rendering. Gemäß den Apple App Store-Regeln müssen alle Browser auf iPhone und iPad die WebKit-Engine verwenden, selbst Chrome und Firefox sind technisch gesehen Wrapper über Safari WebView. DevTools zeigt das Rendering der Chromium-Engine (Blink), und Unterschiede in der Schriftdarstellung, Rundung, Schatten und Filtern zwischen Blink und WebKit können erheblich sein.
• Hardware-Sensoren. Gyroskop, Barometer, NFC, Hardware-Videobeschleunigung, nichts davon existiert im Emulator, und die entsprechenden APIs geben null oder einen Fehler zurück.
• Verhalten bei niedrigem Akkustand. iOS und Android entladen aggressive Hintergrund-Tabs bei kritischen Akkuständen. Der Emulator bildet dies nicht nach.
• Echte JavaScript-Leistung. Ein mobiler Prozessor ist um ein Vielfaches langsamer als ein Desktop-Prozessor, Animationen, die auf einem Arbeitslaptop „fliegen", können auf einem Mittelklasse-Telefon einfrieren. Verwenden Sie für Messungen Lighthouse mit CPU-Drosselung.

Die Regel ist einfach: Führen Sie den gesamten Entwicklungs- und Layoutzyklus im Gerätemodus durch und führen Sie die abschließende Prüfung jedes Release auf mindestens einem physischen Android-Gerät und einem iPhone durch.

Ein kurzes, aber inhaltsreiches Video vom Chrome Developers-Team: Jecelyn Yeen zeigt fünf Wege, das mobile Ansichtsfenster zu emulieren, vom grundlegenden Umschalten bis zu benutzerdefinierten Geräteprofilen und Touch-Tests.

⁉️🤔 Häufig gestellte Fragen

Warum sieht die Website in Chrome DevTools anders aus als auf einem echten iPhone?

Chrome verwendet auf allen Plattformen außer iOS die Blink-Engine. Ein echtes iPhone läuft auf WebKit, das sind zwei unterschiedliche Rendering-Engines mit unterschiedlicher Handhabung von Schriften, Glättung, CSS-Filtern und Schatten. Deshalb erfordert der abschließende Test für das iPhone ein physisches Gerät, der Emulator zeigt das Bild „wie in Chrome auf dem Mac", nicht „wie in Safari auf dem iPhone".

Was ist der Unterschied zwischen Emulation und Simulation im Kontext der DevTools?

Emulation reproduziert das Systemverhalten auf API- und Protokollebene: täuscht den User-Agent vor, emuliert Touch-Ereignisse, begrenzt die Netzwerkbandbreite auf Browserebene. Simulation ist eine oberflächlichere Nachahmung, die keine Low-Level-Mechanismen beeinflusst. Der Gerätemodus in Chrome ist genau Emulation, nicht Simulation.

Kann man eine bestimmte Version von iOS oder Android emulieren?

Nein. Der Gerätemodus emuliert Ansichtsfenster, User-Agent und Touch-Eingabe, aber nicht das Betriebssystem und nicht die Version der Browser-Engine. Der User-Agent kann manuell über Network conditions → User agent vorgetäuscht werden, aber das Rendering bleibt weiterhin Blink-basiert. Um unter einer bestimmten Safari-/iOS-Version zu testen, benötigen Sie entweder ein physisches Gerät oder einen Cloud-Dienst wie BrowserStack.

Wie testet man eine PWA oder einen Service Worker im Emulator?

Öffnen Sie das Application-Panel in den DevTools. Aktivieren Sie im Bereich Service Workers das Flag Update on reload und markieren Sie bei Bedarf Bypass for network. Der Emulator unterstützt den Offline-Modus, aktivieren Sie ihn mit der Checkbox Offline im Tab Network oder im Service Workers-Panel. Das PWA-Manifest wird im Tab Manifest überprüft, ebenfalls im Application-Panel.

Was tun, wenn die Geräte-Symbolleiste nicht aktiv ist, das Symbol ausgegraut ist?

Der häufigste Grund ist, dass Sie sich auf einer Chrome-Service-Seite befinden (chrome://extensions, chrome://settings, neuer DevTools-Tab). Der Gerätemodus funktioniert nur auf regulären Webseiten. Öffnen Sie eine beliebige http/https-Seite und versuchen Sie es erneut.

Was zu tun ist, wenn der Emulator nicht ausreicht

Der Gerätemodus in Chrome DevTools deckt den Löwenanteil der responsiven Layout-Aufgaben ab: Umschalten des Ansichtsfensters, Netzwerkdrosselung, Touch-Eingabe, Geolokalisierung, Media Queries, Screenshots. Für die tägliche Arbeit eines Freelancers oder eines kleinen Teams ist dieses Set mehr als ausreichend.

Aber denken Sie an die Grenzen. iOS-Rendering, Hardware-Sensoren, echte JS-Leistung auf schwacher mobiler Hardware, all das bleibt außerhalb der Emulation. Der Goldstandard: Schreiben und debuggen Sie das Layout im Gerätemodus und gehen Sie vor jedem Release die Checkpoints auf einem physischen iPhone und Android-Smartphone durch. Zwei Geräte, fünfzehn Minuten, und die Gewissheit, dass der Nutzer die Website so sieht, wie Sie es beabsichtigt haben.