So machen Sie Screenshots auf Google Chrome

So machen Sie Screenshots auf Google Chrome
Mit den Tools für Google Chrome -Entwickler können Sie Screenshots von Webseitenelementen von Google Chrome aufnehmen. Sie können Screenshots bestimmter Webseitenelemente oder die gesamte Webseite mit den Google Chrome Developer Tools aufnehmen.

In diesem Artikel zeigen wir Ihnen, wie Sie Screenshots bestimmter Webseitenelemente oder die gesamte Webseite mit Google Chrome Developer Tools aufnehmen können.

Inhaltsthema:

  1. Öffnen der Google Chrome Developer Tools
  2. Auswählen eines bestimmten Elements auf der Webseite mithilfe von Google Chrome Developer Tools
  3. Machen Sie Screenshots der Webseitenelemente mithilfe von Google Chrome Developer Tools
  4. Mithilfe von Google Chrome Developer Tools Screenshots der vollständigen Webseite aufnehmen
  5. Abschluss
  6. Verweise

Öffnen der Google Chrome Developer Tools

Um die Tools von Google Chrome Developer zu öffnen, die Google Chrome ausführen, die Webseite besuchen, von der Sie Screenshots machen möchten, und drücken + + ICH.

Wenn Sie Unterstützung bei der Öffnung der Google Chrome Developer Tools benötigen, lesen Sie den Artikel zum Öffnen der Google Chrome Developer Tools.

Auswählen eines bestimmten Elements auf der Webseite mithilfe von Google Chrome Developer Tools

Wenn Sie mit den Google Chrome Developer Tools Screenshots eines bestimmten Elements auf der Webseite aufnehmen möchten.

Sie können ein Element auf der Registerkarte "Elemente" der Registerkarte "Elemente" der Google Chrome Developer Tools auswählen.

Sie können auch das Tool "Inspect" der Google Chrome Developer Tools verwenden, um ein Element auf der Webseite auszuwählen.

Klicken Sie auf das Inspektionsinstrument, um auf das Tool zu inspizieren

aus der oberen linken Ecke der Google Chrome Developer Tools.

Wählen Sie das Element aus, von dem Sie einen Screenshot von der Webseite machen möchten. Sobald das Element ausgewählt ist, sollte der Abschnitt HTML -Code auch automatisch auf der Registerkarte "Elemente" ausgewählt werden.

Machen Sie Screenshots der Webseitenelemente mithilfe von Google Chrome Developer Tools

Um einen Screenshot des ausgewählten Webseitenelements aufzunehmen, klicken Sie mit der rechten Maustaste (RMB) auf das ausgewählte HTML-übergeordnete Element der Registerkarte "Elemente" und klicken Sie auf "Knoten-Screenshot erfassen".

Ein Screenshot des ausgewählten Webseitenelements sollte auf Ihrem Computer aufgenommen und gespeichert werden.

Wie Sie sehen können, wird ein Screenshot des ausgewählten Webseitenelements erfolgreich aufgenommen.

Versuchen wir, mit den Google Chrome Developer Tools einen Screenshot eines anderen Webseitenelements aufzunehmen.

Wählen Sie die Inhaltsverzeichnis in einem der LinuxHint-Artikel, klicken Sie mit der rechten Maustaste (RMB) darauf und klicken Sie auf den Screenshot „Capture Knode Screenshot“, um einen Screenshot zu machen, wie wir es kürzlich getan haben.

Ein Screenshot wird jetzt aufgenommen und gespeichert.

Wie Sie sehen können.

Mithilfe von Google Chrome Developer Tools Screenshots der vollständigen Webseite aufnehmen

Um einen Screenshot der vollständigen Webseite zu machen, navigieren Sie zur Registerkarte „Elemente“ der Google Chrome Developer Tools. Scrollen Sie ganz hoch und wählen Sie das HTML -Tag aus. Dies wählt die gesamte Webseite aus.

Klicken Sie nun mit der rechten Maustaste (RMB) auf das HTML-Tag und klicken Sie auf "Knoten-Screenshot erfassen".

Ein Screenshot der gesamten Webseite sollte auf Ihrem Computer aufgenommen und gespeichert werden.

Wie Sie sehen können, wird der Screenshot der vollständigen Webseite erfolgreich aufgenommen.

Abschluss

Wir haben Ihnen gezeigt, wie Sie die Google Chrome Developer Tools öffnen können. Wir haben Ihnen auch gezeigt, wie Sie bestimmte Webseitenelemente mithilfe des Tools der Google Chrome -Entwicklertools inspizieren und wie Sie Screenshots bestimmter Webseitenelemente und die vollständige Webseite unter Verwendung von Google Chrome Developer Tools machen.

Verweise:

  • https: // Entwickler.Chrom.com/blog/new-in-devtools-62/#node-screenshots