Browser-DevTools

Browser-DevTools sind die in Chrome, Firefox, Edge und Safari integrierten Entwicklertools. Mit ihnen lassen sich Seiten untersuchen, Geräte simulieren, Screenshots erstellen und Layoutfehler suchen, ganz ohne Erweiterung.

Related workflow terms: Viewport-Screenshot.

Was DevTools bei Screenshots leisten

Browser-DevTools dienen in erster Linie der Fehlersuche. Einige ihrer Funktionen sind aber auch für Screenshots und visuelle Tests nützlich.

Über die Screenshot-Befehle kannst du den sichtbaren Viewport, die gesamte scrollbare Seite oder ein bestimmtes DOM-Element aufnehmen. Dafür ist weder eine Erweiterung noch ein Drittanbieterwerkzeug nötig. Ausgegeben wird eine PNG-Datei mit der aktuellen Device Pixel Ratio. Aufnahmen von einem Retina-Display haben deshalb die doppelte Auflösung.

Im DOM-Inspektor lässt sich der Seiteninhalt vorübergehend ändern. Du kannst Cookie-Banner ausblenden, Overlays entfernen, Texte austauschen oder Stile anpassen und danach eine aufgeräumte Aufnahme erstellen. Diese Änderungen gelten nur lokal und verschwinden beim Neuladen. Die veröffentlichte Seite wird nicht verändert.

Mit der Netzwerkdrosselung simulierst du langsame Verbindungen und kannst Ladezustände, Skeleton Screens oder Zeitüberschreitungen dokumentieren. So lässt sich zeigen, wie sich eine Seite bei schlechter Verbindung verhält.

Responsiver Modus und Geräteemulation

Der responsive Modus, auch Geräte-Symbolleiste genannt, simuliert verschiedene Viewport-Größen und Geräteeigenschaften. Physische Geräte brauchst du dafür nicht. Aktiviert wird er mit Cmd+Shift+M auf dem Mac oder Ctrl+Shift+M unter Windows.

Du kannst Vorgaben für iPhone, iPad, Pixel oder Galaxy auswählen oder Breite, Höhe und Device Pixel Ratio selbst eingeben. Der Browser passt den Viewport an und ändert den User-Agent-String passend zum gewählten Gerät. Dadurch greifen responsive Breakpoints und gerätespezifisches CSS.

Das ist praktisch, wenn du Screenshots in mehreren Bildschirmgrößen brauchst. Statt zahlreiche Geräte bereitzuhalten, wechselst du innerhalb einer Browser-Session durch die Viewports und nimmst jeden davon auf. Für Marketingbilder oder Dokumentation an verschiedenen Breakpoints bietet das eine schnelle Vorschau. Für pixelgenaue Ergebnisse empfiehlt sich trotzdem eine abschließende Prüfung auf echten Geräten.

Screenshots mit den DevTools erstellen

Chrome DevTools bietet im Befehlsmenü mehrere Aufnahmemethoden:

1. Öffne die DevTools mit Cmd+Option+I auf dem Mac oder Ctrl+Shift+I unter Windows.
2. Öffne das Befehlsmenü mit Cmd+Shift+P auf dem Mac oder Ctrl+Shift+P unter Windows.
3. Suche nach einem der folgenden Befehle:
   • „Capture screenshot“ nimmt den sichtbaren Viewport auf.
   • „Capture full size screenshot“ erfasst die gesamte scrollbare Seite.
   • „Capture node screenshot“ nimmt ein ausgewähltes DOM-Element auf.
   • „Capture area screenshot“ lässt dich einen Bereich aufziehen.

Firefox bietet eine ähnliche Funktion über sein integriertes Screenshot-Werkzeug. Du erreichst es über das Dreipunktmenü der Seite oder mit :screenshot in der Browserkonsole. In Safaris Web Inspector kannst du über das Kontextmenü im Tab „Elements“ eine Aufnahme erstellen.

Wiederkehrende Aufnahmen lassen sich mit dem DevTools Protocol oder einem Headless-Browser automatisieren. Für eine einzelne schnelle Aufnahme führt das Befehlsmenü dagegen am direktesten vom Browser zur Bilddatei.

In der Praxis eignen sich die DevTools vor allem, um Bildausschnitt, Breakpoint-Verhalten und einmalige Korrekturen zu prüfen, bevor daraus ein automatisierter Aufnahmeablauf wird. Hier lässt sich die Viewport-Größe kontrollieren, störender Inhalt ausblenden und feststellen, ob sich die Seite für eine wiederholbare Headless-Aufnahme eignet.

Häufige Fehler

• Device Pixel Ratio nicht einstellen: Im responsiven Modus verwenden die DevTools standardmäßig häufig DPR 1. Für Aufnahmen in Retina-Qualität musst du in den Einstellungen der Geräte-Symbolleiste DPR 2 oder 3 wählen. Andernfalls bleibt der Screenshot unabhängig vom Display bei Standardauflösung.
• Emulation mit einem echten Gerät gleichsetzen: Die DevTools simulieren Viewport-Abmessungen und DPR, aber nicht die tatsächliche Rendering-Engine eines Geräts, dessen Schriftwiedergabe oder Touch-Interaktionen. Nutze die Emulation für schnelle Vorschauen und Entwürfe, nicht als endgültigen Maßstab.
• Mit sichtbaren DevTools-Panels aufnehmen: Das Inspektorfenster belegt Platz und verändert die wirksame Viewport-Breite. Löse die DevTools in ein eigenes Fenster oder schließe das Panel vor der Aufnahme, wenn die Abmessungen stimmen müssen.
• Scrollposition übersehen: „Capture screenshot“ nimmt nur den sichtbaren Bereich auf. Scrolle zuerst zum gewünschten Inhalt oder verwende für die ganze Seite „Capture full size screenshot“.