So erstellen Sie einen Screenshot auf Chrome (Schritt-für-Schritt) – Update 2022

So erstellen Sie einen Screenshot auf Chrome

Wenn Sie jemals Screenshots einer ganzen Webseite machen mussten, wissen Sie, wie umständlich es ist, manuell durch die Seite zu scrollen und mehrere Screenshots zu machen.

Es gibt gute Nachrichten! Sie können ein paar Tools verwenden, um ganze Webseiten zu erfassen und Ihr Leben viel einfacher zu machen.

Eines dieser Tools ist in Chrome integriert, während das andere eine Erweiterung ist.

Integrierte Chrome-Option

Zu den Vorteilen dieser Methode gehört, dass keine Erweiterung heruntergeladen werden muss, und das Tool ist eines der besten, wenn es darum geht, klebrige Balken beim Scrollen der Website zu ignorieren.

So setzen Sie es ein:

  1. Klicken Sie auf die drei "Mehr"-Punkte in der oberen rechten Ecke Ihres Browserfensters.
  2. Ein neues Fenster wird angezeigt. Gehen Sie zu „Entwicklertools“ und dann zu „Weitere Tools“.
  3. Es erscheint ein neues Fenster mit Code und Sie befinden sich in einem etwas anderen Ansichtsmodus.
  4. Wenn die Seite immer noch nicht richtig aussieht, klicken Sie oben links im Entwicklerfenster auf das Symbol zum Umschalten der Gerätesymbolleiste.
  5. Wählen Sie mit der Option „Ansprechmodus“ aus, auf welchem ​​Gerät Sie den Screenshot sehen möchten. Stellen Sie es einfach auf "responsiv", um die Standardeinstellung zu verwenden.
  6. Oben rechts in dieser neuen Zeile sehen Sie eine neue Schaltfläche "Mehr". Um alles zu erhalten, klicken Sie darauf und wählen Sie „Screenshot aufnehmen“ oder „Screenshot in voller Größe aufnehmen“ aus dem Menü.
  7. Nach einigen Sekunden werden Sie feststellen, dass das Tool bereits eine Datei für Sie heruntergeladen und geöffnet hat.

Denken Sie daran, dass die Fußzeile der Website in meinem Beispiel abgeschnitten wurde, also denken Sie daran, wenn Sie dieses Tool verwenden.

Chrome-Erweiterung: Fantastischer Screenshot & Bildschirmrekorder

  1. Gehen Sie zum Chrome Web Store oder zu Google und suchen Sie nach der Erweiterung „Awesome screenshot & screen recorder“.
  2. Nachdem Sie die Erweiterung installiert haben, sehen Sie oben in Ihrer Symbolleiste ein helles Symbol.
  3. Wenn Sie sich auf der Website befinden, die Sie erfassen möchten, klicken Sie auf die Erweiterung. Wenn Sie den Mauszeiger über eine Option bewegen, sehen Sie eine Liste mit Optionen und ihren Tastenkombinationen.
  4. Sie können einen Screenshot eines sichtbaren Abschnitts einer Seite, der gesamten Seite oder eines bestimmten Bereichs erstellen. Wenn Sie danach suchen, kann Ihnen die Erweiterung sogar beim Aufzeichnen von Bildschirmaufnahmen helfen.
  5. Wählen Sie eine ganze Seite aus, um einen Screenshot der gesamten Webseite zu machen.
  6. Nach ein paar Sekunden werden Sie zu einer Seite mit dem Screenshot weitergeleitet.
  7. Sie werden oben auf Ihrer Seite eine neue Symbolleiste bemerken, mit der Sie Anmerkungen zu Ihrem Screenshot hinzufügen können. Sie können ganz einfach Anmerkungen, Text und Pfeile hinzufügen sowie Abschnitte ausschneiden, wie unten gezeigt.
  8. Um Ihre Änderungen zu speichern, klicken Sie auf die Fertig-Schaltfläche in der rechten Ecke, nachdem Sie Ihre Anmerkungen hinzugefügt haben.
  9. Auf der rechten Seite erscheint ein neues Fenster mit einer Vielzahl von Optionen zum Speichern und Teilen Ihres neuen Screenshots über einen Freigabelink, Dropbox, E-Mail, Slack und andere Methoden. Sie können den Screenshot manuell speichern oder kopieren, um ihn an anderer Stelle einzufügen.

Siehe das Quellbild

Da haben Sie es also: zwei einfache Methoden, um Screenshots ganzer Websites zu machen und diese bei Bedarf zu kommentieren.

Fang an zu schnappen!

Häufig gestellte Fragen zum Erstellen eines Screenshots in Chrome

Wie mache ich einen ganzseitigen Screenshot in Chrome?

Öffnen Sie einfach die zusätzlichen Menüoptionen in Ihrer Gerätesymbolleiste und wählen Sie „Screenshot in voller Größe aufnehmen“, um Ihren ganzseitigen Screenshot herunterzuladen. Chrome lädt die gesamte Seite für Sie herunter. Schneiden Sie von hier aus nach Bedarf zu, um das gewünschte Bild zu erhalten.

Wie mache ich mit den Google Chrome Developer Tools einen Screenshot?

Eine versteckte Funktion in den Entwicklertools von Google Chrome ermöglicht es Ihnen, Screenshots in voller Größe von jeder Webseite zu machen. Diese Funktion, ähnlich einem scrollenden Screenshot, erfasst die gesamte Seite ohne die Verwendung einer Erweiterung eines Drittanbieters. Öffnen Sie zunächst Chrome und navigieren Sie zu der Webseite, die Sie speichern möchten.

Wie mache ich einen Screenshot auf einer Website ohne Erweiterung?

Diese Funktion, ähnlich einem scrollenden Screenshot, erfasst die gesamte Seite ohne die Verwendung einer Erweiterung eines Drittanbieters. Öffnen Sie zunächst Chrome und navigieren Sie zu der Webseite, die Sie speichern möchten. Klicken Sie danach auf die drei Punkte, dann auf „Weitere Tools“ und dann auf „Entwicklertools“.

Über den Autor
Autor: Daniel Luke
Daniel ist ein WordPress-Webdesigner mit langjähriger Erfahrung in der Arbeit mit verschiedenen WordPress-Themen, der es ihm ermöglicht, verschiedene Themen zu vergleichen und gegenüberzustellen, die Stärken und Schwächen zu verstehen, um sachliche, reale Bewertungen zu entwickeln.

Eine Sache noch... Wussten Sie, dass Leute, die nützliche Dinge wie diesen Beitrag teilen, auch FANTASTISCH aussehen? ;-);
Bitte kontaktieren Sie uns, wenn Sie Probleme im Zusammenhang mit dieser Website haben oder lass a nützlich Kommentieren Sie mit Ihren Gedanken und teilen Sie dies dann Ihren Facebook-Gruppen mit, die dies nützlich finden würden, und lassen Sie uns gemeinsam die Vorteile nutzen. Vielen Dank für das Teilen und nett zu sein!

Disclosure: Diese Seite enthält möglicherweise Links zu externen Websites für Produkte, die wir lieben und von ganzem Herzen empfehlen. Wenn Sie Produkte kaufen, die wir vorschlagen, können wir eine Empfehlungsgebühr verdienen. Solche Gebühren haben keinen Einfluss auf unsere Empfehlungen und wir akzeptieren keine Zahlungen für positive Bewertungen.

Autor (en) Empfohlen am:  Inc Magazin Logo   Sitepoint-Logo   CSS Tricks Logo    Webdesignerdepot-Logo   WPMU DEV Logo   und viele mehr ...