Machen Sie Seiten-Screenshots mit Devtools
Es gab Zeiten, in denen ich einem Kunden oder einem Teamkollegen einen vollständigen Screenshot des aktuellen Zustands der Website oder sogar eines Teils davon zeigen musste. Daher habe ich Full Page Screen Capture und für jede andere Art von Screenshots das Windows-Snippet-Tool oder Snaggit verwendet. Wenn ich es online hosten möchte, wie in diesem Beitrag [Gyazo](https://gyazo.com, das auch einen GIF-Maker hat.
Kürzlich habe ich herausgefunden, dass Devtools ein Tool hat, das einen ganzseitigen Screenshot erstellt, ohne dass eine Erweiterung erforderlich ist!
Das ist kein neuer Gedanke, er war im [Devtools-Update im April 2017](https://developers.google.com/web/updates/2017/04/devtools-release-notes enthalten, aber es sieht so aus, als ob ich unter einem Felsen lebe und es bis jetzt nicht herausgefunden habe…
Devtools
Wie auf der [offiziellen Devtools-Seite](https://developers.google.com/web/tools/chrome-devtools/?hl=en angegeben:
Chrome DevTools ist eine Reihe von Webentwicklertools, die direkt in den Google Chrome-Browser integriert sind. DevTools kann Ihnen dabei helfen, Seiten im Handumdrehen zu bearbeiten und Probleme schnell zu diagnostizieren, was Ihnen letztendlich dabei hilft, bessere Websites schneller zu erstellen.
Befehle in Devtools ausführen
Sie wissen bereits, wie man Devtools öffnet, aber falls Sie es gerade vergessen haben und für diesen Beitrag, öffnen Sie es mit der Taste F12 oder der Tastenkombination Ctrl + Shift + I. Dann müssen Sie Run command im Menü in Devtools öffnen oder Ctrl + Shift + P verwenden.
Screenshot-Tool
Wenn Sie screenshot eingeben, werden die Befehle gefiltert. Es gibt 4 Arten von Screenshot-Methoden, die Sie verwenden können:
- Bereichs-Screenshot
- Screenshot in voller Größe
- Knoten-Screenshot
- Screenshot aufnehmen
Bevor alle Screenshot-Methoden überprüft werden, lädt devtools das Bild automatisch mit dem Namen der Webseite herunter, nachdem es die Verarbeitung abgeschlossen hat.
Bereichs-Screenshot
Mit area screenshot können Sie einen Teil der Website auswählen und einen Screenshot erstellen.
Ergebnis:
Screenshot in voller Größe
Der full size screenshot erstellt einen Screenshot der gesamten Webseite, von Anfang bis Ende.
Ergebnis:
Knoten-Screenshot
Mit dem Befehl node screenshot können Sie einen Screenshot eines ausgewählten Knotens im Inspect-Element erstellen.
Ergebnis:
Screenshot aufnehmen
Der capture screenshot erstellt einen Screenshot der aktuellen Seite ohne Scrollen und in der Größe des Browsers.
Ergebnis:
