In diesem Artikel zeigen wir Ihnen, wie Sie mit den Google Chrome Developer Tools Screenshots von bestimmten Webseitenelementen oder der gesamten Webseite erstellen.
Thema Inhalt:
- Öffnen Sie die Google Chrome-Entwicklertools
- Auswählen eines bestimmten Elements von der Webseite mit den Google Chrome-Entwicklertools
- Erstellen von Screenshots der Webseitenelemente mit den Google Chrome-Entwicklertools
- Erstellen von Screenshots der vollständigen Webseite mit den Google Chrome-Entwicklertools
- Abschluss
- Verweise
Öffnen Sie die Google Chrome-Entwicklertools
Um die Google Chrome Developer Tools zu öffnen, führen Sie Google Chrome aus, besuchen Sie die Webseite, von der Sie Screenshots machen möchten, und drücken Sie
Wenn Sie Hilfe beim Öffnen der Google Chrome Developer Tools benötigen, lesen Sie den Artikel weiter So öffnen Sie die Google Chrome-Entwicklertools .
Auswählen eines bestimmten Elements von der Webseite mit den Google Chrome-Entwicklertools
Wenn Sie mit den Google Chrome Developer Tools Screenshots eines bestimmten Elements von der Webseite machen möchten, müssen Sie in der Lage sein, das Element auszuwählen, von dem Sie Screenshots von der Webseite machen möchten.
Sie können ein Element von der Webseite auf der Registerkarte „Elemente“ der Google Chrome Developer Tools auswählen.
Sie können auch das „Inspect“-Tool der Google Chrome Developer Tools verwenden, um ein Element von der Webseite auszuwählen.
Um das Prüfwerkzeug zu verwenden, klicken Sie auf
in der oberen linken Ecke der Google Chrome Developer Tools.
Wählen Sie auf der Webseite das Element aus, von dem Sie einen Screenshot machen möchten. Sobald das Element ausgewählt ist, sollte auch der HTML-Code-Abschnitt automatisch auf der Registerkarte „Elemente“ ausgewählt werden.
Erstellen von Screenshots der Webseitenelemente mit den Google Chrome-Entwicklertools
Um einen Screenshot des ausgewählten Webseitenelements zu erstellen, klicken Sie mit der rechten Maustaste (RMB) auf das ausgewählte HTML-Elternelement auf der Registerkarte „Elemente“ und klicken Sie auf „Capture node screenshot“.
Ein Screenshot des ausgewählten Webseitenelements sollte erstellt und auf Ihrem Computer gespeichert werden.
Wie Sie sehen können, wurde erfolgreich ein Screenshot des ausgewählten Webseitenelements erstellt.
Versuchen wir, mit den Google Chrome Developer Tools einen Screenshot eines anderen Webseitenelements zu machen.
Wählen Sie das Inhaltsverzeichnis in einem der LinuxHint-Artikel aus, klicken Sie mit der rechten Maustaste (RMB) darauf und klicken Sie auf „Capture node screenshot“, um einen Screenshot zu machen, so wie wir es kürzlich getan haben.
Es wird nun ein Screenshot erstellt und gespeichert.
Wie Sie sehen können, wird nur ein Screenshot des Inhaltsverzeichnisses erstellt.
Erstellen von Screenshots der vollständigen Webseite mit den Google Chrome-Entwicklertools
Um einen Screenshot der vollständigen Webseite zu machen, navigieren Sie zur Registerkarte „Elemente“ der Google Chrome Developer Tools. Scrollen Sie ganz nach oben und wählen Sie das HTML-Tag aus. Dadurch wird die gesamte Webseite ausgewählt.
Klicken Sie nun mit der rechten Maustaste (RMB) auf das HTML-Tag und klicken Sie auf „Capture node screenshot“.
Ein Screenshot der gesamten Webseite sollte erstellt und auf Ihrem Computer gespeichert werden.
Wie Sie sehen können, wurde der Screenshot der vollständigen Webseite erfolgreich erstellt.
Abschluss
Wir haben Ihnen gezeigt, wie Sie die Google Chrome Developer Tools öffnen. Wir haben Ihnen auch gezeigt, wie Sie mit dem Inspektionstool der Google Chrome Developer Tools bestimmte Webseitenelemente auswählen und mit den Google Chrome Developer Tools Screenshots von bestimmten Webseitenelementen und der vollständigen Webseite erstellen.