Screenshot der Webseite mit Geräterahmen in Chrome erstellen

Eine weniger bekannte Funktion von Google Chrome auf Desktop-Betriebssystemen ist die Möglichkeit, einen Screenshot einer geöffneten Seite zu erstellen, als ob der Screenshot des auf einem mobilen Gerät ausgeführten Browsers wäre. Es kann sogar einen Rahmen um den Screenshot hinzufügen, damit er wie ein realistisches Foto eines Smartphones aussieht. Hier ist, wie es gemacht werden kann.

In den Chrome Developer Tools gibt es ein spezielles Tool, mit dem Sie ein mobiles Gerät emulieren können. Für Entwickler ist es sehr nützlich zu überprüfen, wie ihre Websites auf Smartphones und kleinen Bildschirmgeräten aussehen. Es ermöglicht die Angabe einer benutzerdefinierten Bildschirmgröße oder die Verwendung vordefinierter Gerätegrößen wie iPhone, iPad, Nexus oder Samsungs Galaxy. Sobald die geöffnete Seite im Geräteemulator angezeigt wird, kann der Benutzer einen Screenshot der Seite aufnehmen. Es ist auch möglich, einen Geräterahmen um die Seite herum zu aktivieren, damit sie wie ein realistisches Foto aussieht.

Sie können es wie folgt tun.

1. Öffnen Sie die gewünschte Seite in Chrome und drücken Sie F12. Dadurch werden die Entwicklertools geöffnet:
2. Klicken Sie auf die Emulator-Schaltfläche für mobile Geräte, um den Entwicklertools-Modus zu wechseln:
3. Wählen Sie unter der Geräteauswahl ein Gerät aus. Ich wähle zum Beispiel iPhone 6:
4. Klicken Sie nun rechts neben der Geräteauswahl auf das 3-Punkte-Menü und aktivieren Sie die Option "Geräterahmen anzeigen":
5. Voila, jetzt wird Ihre Webseite in einem schönen Geräterahmen angezeigt:
   
   Klicken Sie nun erneut auf das Drei-Punkte-Menü und wählen Sie "Screenshot aufnehmen":

Das Ergebnis wird wie folgt sein:

Du bist fertig.