Anzeige
Smartes Cloud Hosting für anspruchsvolle Projekte.
↬ Loslegen und Spaces testen ↬ Jetzt testen!
Markus Seyfferth 9. August 2019

Praktisch: Ganzseitige Screenshots deiner Website mit Firefox, Chrome & Safari

Wer kennt das nicht? Du willst von einer ganzen Website ein Abbild erstellen, kannst aber im Regelfall nur den sichtbaren Bereich virtuell ablichten. Dabei ist es eigentlich ziemlich einfach, einen Screenshot einer Website zu machen, wobei auch die Bereiche erfasst werden, die du erst durch Scrollen erreichst. Hier zeige ich dir kurz & knapp, wie das geht.

Anzeige

Total easy: Screenshots mit Firefox

Firefox macht es meines Erachtes mit Abstand am einfachsten, solch einen ganzseitigen Screenshot zu erstellen. Der Vorgang ist überaus benutzerfreundlich, und du brauchst keine Extensions, um ganz bequem die Website abzufotografieren:

1. Hierzu klickst du auf die drei Pünktchen in der URL-Leiste und gehst auf “Take a Screenshot”:

2. Im nächsten Schritt kannst du dann wahlweise die einzelnen Elemente einer Seite virtuell ablichten lassen, indem du mit dem Mauszeiger drüber fährst und den jeweiligen Bereich anklickst.

In diesem Fall willst du aber die ganze Seite abfotografieren, und hierfür gehst du dann auf “Save full page” und lichtest so die Seite ab.

3. Im allerletzten Schritt tut sich dann ein Fenster auf, in dem du eigentlich nur noch den blauen “Download” Knopf betätigst. Die Datei wird dann im Regelfall in den Downloads-Ordner verfrachtet und dort abgespeichert. Es sei denn, du hast einen anderen Standard-Ordner definiert.

Und das war es auch schon. Operation gelungen, Patient lebt. Nun schauen wir uns als nächstes den Vorgang in Chrome an.

Weniger easy: Screenshots mit Chrome

In Chrome geht das Ganze leider nicht ganz so einfach wie in Firefox. Für Entwickler wird das sicher kein Problem sein, da diese sich meist schon mit Chromes DevTools auskennen. Für nicht ganz so versierte Nutzer hingegen ist es wohl eher etwas unzugänglich, und man muss sich erst an den Vorgang gewöhnen. Und der geht so:

1. Du rufst das DevTools Menü in Windows per STRG + SHIFT + I auf, (im Mac per CMD + ALT + I). Es erscheint folgende Übersicht:

2. In einem zweiten Schritt gibst d nun in Windows STRG + Shift + P ein, was ein Eingabefeld aufruft, das so aussieht:

3. Zu guter Letzt schreibst du nun das Wort “Screenshot” in das Eingabefeld, wodurch einige Optionen angezeigt werden. Was du brauchst, ist “Capture full-size screenshot”.

Das klickst du nun also an, und nach wenigen Sekunden wird ein Abbild der gesamten Website in den Downloads-Ordner heruntergeladen. Fertig. Wenn dir das zu kompliziert ist, gibt es für dich die Screenshot-Funktionalität auch als Chome Extension.

Der Vollständigkeit halber werfe ich noch einen Blick auf den Safari-Browser.

Auch ganz okay: Screenshots mit Safari

Im Safari kannst du ebenso einen Screenshot über den “Web Inspector” tätigen, welchen du per CMD + ALT + I im Mac aufrufst. Hier braucht es nur noch einen weiteren Mausklick auf “Capture Screenshot”, und im Nu liegt die Datei im Downloads-Ordner. Wenn du solche Entwickler-Werkzeuge nicht magst, kannst du auch eine Extension à la Awesome Screenshot verwenden.

Was sind deine Lieblings-Extensions oder Tricks, um solche Screenshots zu erstellen? Schreib es doch unten in die Kommentare! Die besten Tipps nehmen wir dann in den Artikel auf.

Frohes Fotografieren!

(Beitragsbild: Depositphotos)

Markus Seyfferth

Markus Seyfferth

Markus leitet seit April 2019 die Geschicke der Dr. Web GmbH & Co. KG, dem Unternehmen hinter Dr. Web, und ist dabei, einige interessante neue Projekte in Angriff zu nehmen. Zuvor war er für mehr als 6 Jahre der Geschäftsführer und Vorstand vom Smashing Magazine, der englischsprachigen Schwesterpublikation von Dr. Web.

5 Kommentare

  1. Die Entwickler-Konsole kann auch einfacher mit der Taste“F12″ aufgerufen werden.

  2. Auf Firefox nutze ich das „FireShot“ Addon, kann nämlich die Screenshots als PDF exportieren ;)

  3. Und meine unbedingte Empfehlung für Chrome ist das Add-on „Awesome Screenshot“.

  4. Danke für den Tipp, das wusste ich noch gar nicht – hab es bisher immer (umständlich) mit Photoshop zusammengebastelt haha – so gehts natürlich einfacher :D

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.