Wenn du eine Website responsive gestaltest, willst du wissen wie sie auf verschiedenen Geräten aussieht – auf einem Smartphone, einem Tablet, einem kleinen Laptop. Dafür brauchst du nicht jedes Gerät physisch vor dir: Die DevTools haben einen eingebauten Modus genau dafür.
Abschnitte: DevTools öffnen, Den Geräte-Modus aktivieren, Bildschirmgröße einstellen, Ein wichtiger Hinweis.
DevTools öffnen
Die Entwicklerwerkzeuge öffnest du in Firefox – und in den meisten anderen Browsern – mit der F12-Taste. Alternativ geht auch ein Rechtsklick auf eine beliebige Stelle der Seite und dann auf Element untersuchen.
Die DevTools öffnen sich meistens als Panel am unteren oder rechten Rand des Browsers. Welche Position du bevorzugst, lässt sich oben rechts in den DevTools über ein kleines Icon einstellen.
Den Geräte-Modus aktivieren
Sobald die DevTools geöffnet sind, siehst du oben in der Werkzeugleiste ein kleines Icon das wie ein Smartphone aussieht – in Firefox heißt dieser Modus Reaktionsfähiges Design, in Chrome und Edge nennt er sich Device Toolbar. Klick darauf, um ihn zu aktivieren.
Die Seite wechselt nun in eine schmale Vorschau. Oben erscheint eine Leiste mit der aktuellen Breite und Höhe in Pixeln. Du kannst diese Werte direkt eintippen oder den Rand der Vorschau mit der Maus ziehen um die Größe frei anzupassen.
Bildschirmgröße einstellen
Typische Breiten die beim Testen nützlich sind:
- 360 px – schmales Smartphone (z. B. ältere Android-Geräte)
- 390 px – iPhone 14 / 15
- 768 px – Tablet im Hochformat
- 1024 px – Tablet im Querformat oder kleines Laptop-Display
- 1280 px – normales Desktop-Display
Du kannst diese Werte oben in den Feldern direkt eintippen. So siehst du auf einen Blick, wo dein Layout kippt – also wo ein Element zu breit wird, ein Text umbricht oder ein Abstand zu eng wird. Genau an diesen Stellen setzt du dann in deinem CSS einen Media Query an.
In Firefox gibt es zusätzlich ein Dropdown mit vordefinierten Geräteprofilen – zum Beispiel „iPhone 14" oder „Galaxy S21". Diese setzen automatisch die passende Breite und Pixeldichte.
Ein wichtiger Hinweis
Der Geräte-Modus der DevTools ist eine Simulation – er zeigt wie deine Seite bei einer bestimmten Breite aussieht, aber er emuliert kein echtes Gerät vollständig. Touch-Verhalten, Scrollgeschwindigkeit und manche Schriftgrößen können sich auf einem echten Smartphone anders anfühlen als in der Vorschau.
Für die Entwicklung und das schnelle Testen von Breakpoints ist der Modus dennoch unverzichtbar. Für den finalen Check vor dem Veröffentlichen lohnt es sich zusätzlich, die Seite einmal auf einem echten Gerät zu öffnen.