Browser-DevTools

Browser-DevTools sind die in Webbrowser integrierten Entwicklerwerkzeuge: Chrome DevTools, Firefox Developer Tools und Safari Web Inspector. Sie zeigen Seitenstruktur und Stile, protokollieren JavaScript-Ausgaben, zeichnen Netzwerkanfragen auf und analysieren die Leistung.

Die meisten DevTools bieten eine Geräteemulation. Sie legt Breite und Höhe des Viewports, das Gerätepixelverhältnis und den User-Agent-String fest, sodass ein Desktop-Browser eine Seite wie ein Smartphone darstellt. Die Emulation bildet weder die Browser-Engine noch die Schriften oder das Touch-Verhalten eines echten Geräts nach.

In Chrome auf dem Mac öffnet Option+Command+I die DevTools. In Safari muss das Menü „Entwickler“ zuerst in den Einstellungen aktiviert werden, bevor der Web Inspector verfügbar ist.

Was DevTools für Screenshots leisten

• Den sichtbaren Viewport, die gesamte scrollbare Seite, einen ausgewählten Bereich oder ein einzelnes Element aufnehmen.
• Vor der Aufnahme eine exakte Viewport-Größe und ein Gerätepixelverhältnis festlegen.
• Vor der Aufnahme Elemente ausblenden oder bearbeiten, etwa ein Cookie-Banner oder ein Chat-Widget.
• Das Netzwerk drosseln, um zu prüfen, wie eine Seite während des Ladens aussieht.

Responsive-Modus und Geräteemulation

Der Responsive-Modus, in Chrome Gerätesymbolleiste genannt, ändert die Größe des Seitenbereichs auf eine gewählte Breite und Höhe. Voreinstellungen decken gängige Smartphones und Tablets ab, eigene Größen sind ebenfalls möglich. Das Gerätepixelverhältnis bestimmt, wie viele Bildpixel jedes CSS-Pixel erzeugt, sodass ein 390 Pixel breiter Viewport bei Verhältnis 3 einen 1170 Pixel breiten Screenshot liefert.

So nehmen Sie Screenshots mit DevTools auf

1. Öffnen Sie die DevTools und aktivieren Sie die Gerätesymbolleiste, wenn Sie eine bestimmte Größe brauchen.
2. Öffnen Sie das Befehlsmenü mit Shift+Command+P.
3. Geben Sie „screenshot“ ein und wählen Sie den Befehl für Viewport, volle Größe, Bereich oder Knoten.
4. Der Browser lädt ein PNG herunter.

Häufige Fehler

• Die DevTools im Fenster angedockt lassen, wodurch der Viewport bei einer normalen Aufnahme schrumpft.
• Vergessen, die Emulation zurückzusetzen, sodass spätere Aufnahmen eine Smartphone-Größe verwenden.
• Aufnehmen, bevor nachgeladene Bilder (Lazy Loading) erscheinen.
• Die Emulation als Beweis betrachten, dass eine Seite auf einem echten Gerät funktioniert.

Immer wieder dieselben Screenshots?

Website Capture in Temposhot wiederholt dieselbe Aufnahme für eine Liste von URLs mit Desktop 1920×1080, Tablet 768×1024 oder Mobile 390×844. Siehe Website-Screenshot-Automatisierung.

Häufige Fragen

Können DevTools eine ganze Seite in einem Bild aufnehmen?

Der Chrome-Befehl „Capture full size screenshot“ rendert die gesamte Seitenhöhe. Sehr lange Seiten oder Seiten mit Lazy Loading können trotzdem unvollständig ausgegeben werden.

Gibt es für eine einzelne Seite eine einfachere Option?

Die Erweiterung Temposhot Full Page Screenshot für Chrome 116 und neuer scrollt die aktive Seite und lädt ein PNG herunter.

Quellen

• Chrome DevTools Dokumentation
• Web development tools (Wikipedia)

Weiterführende Ressourcen

• Optionen für Website Capture: Geräte-, Bereichs- und Warteeinstellungen.
• Website-Screenshots ohne Code automatisieren: eine Schritt-für-Schritt-Anleitung.
• Screenshot Resolution Checker: die Pixelgröße einer Aufnahme prüfen.