Πάρτε ένα screenshot ενός συγκεκριμένου στοιχείου από ιστοσελίδα στο Firefox

Κατά την πλοήγηση σας στο διαδίκτυο, μερικές φορές θέλετε να δείξετε στους φίλους σας ένα screenshot από μία ιστοσελίδα που είδατε.

Firefox screenshot

Η συνήθης τρόπος είναι να πατήσετε τα πλήκτρα Win και Print , αλλά έτσι θα πάρετε μία εικόνα όλης της οθόνης σας. Η εικόνα θα είναι μεγάλη σε όγκο, θα αναγκαστείτε να την περικόψετε για να τους δείξετε μόνο το στοιχείο που θέλετε και γενικά θα κάνετε πολλά ς. Ας δούμε ένα καλύτερο τρόπο πώς να πάρετε άμεσα ένα screenshot από ένα συγκεκριμένο στοιχείο μιας ιστοσελίδας, μέσω του Firefox και χωρίς τη χρήση add-ons.

Όταν φορτώνεται μια ιστοσελίδα, ο web browser σας δημιουργεί ένα Document Object Model της σελίδας. Το DOM είναι διαμορφωμένο ως δομή δέντρου όπου κάθε κόμβος είναι ένα αντικείμενο που αντιπροσωπεύει ένα τμήμα του εγγράφου.

Ας δούμε πώς μπορείτε να χρησιμοποιήσετε αυτή την λειτουργία για να συλλάβετε μόνο ένα συγκεκριμένο στοιχείο στο screenshot σας:

1. Ανοίξτε τη σελίδα που επιθυμείτε στο Firefox και κάντε δεξί κλικ στο στοιχείο που θέλετε να καταγράψετε.
2. Από το μενού, επιλέξτε “Έλεγχος αντικειμένου”
csff2
3. Το εργαλείο Inspector θα ανοίξει. Παρατηρήστε ότι έχει την βηματική των κόμβων του δέντρου DOM
4. Εκεί επιλέξτε από το αναδυόμενο μενού το  “Screenshot Node”
csff1
5. Η εντολή σας θα εκτελεστεί αυτόματα και μία απεικόνιση του στοιχείου θα αποθηκευτεί ως εικόνα στο φάκελο αποθήκευσης του Firefox.

Το ατού αυτής της μεθόδου είναι ότι συλλαμβάνει επίσης μακρυά στοιχεία, συμπεριλαμβανομένων και αυτών που απαιτούν κύλιση. Στην περίπτωσή μας, ζητήσαμε το αρχικό στοιχείο της σελίδας, δηλαδή τη html και μας έδωσε μία εικόνα της πλήρες ιστοσελίδας του iguru.
csff3

Εναλλακτικά, μπορείτε να χρησιμοποιήσετε την ενσωματωμένη εντολή screenshot. Στο συγκεκριμένο άρθρο, χρησιμοποιήσαμε την εντολή “screenshot” που είναι ενσωματωμένη στον Firefox, για να συλλάβουμε ολόκληρη τη σελίδα. Η ίδια εντολή μπορεί να χρησιμοποιηθεί για να πάρετε μία απεικόνιση ενός ειδικού στοιχείου της σελίδας.

1. Ανοίξτε το Firefox και πατήστε τα πλήκτρα Shift + F2 στο πληκτρολόγιο. Ο Firefox θα ανοίξει μια γραμμή ως κονσόλα εντολών στο κάτω μέρος της οθόνης.
2. Πληκτρολογήστε την ακόλουθη εντολή
screenshot –selector “όνομα”
Αντικαταστήστε το “όνομα” με το κατάλληλο όνομα στοιχείου. Στην περίπτωσή μας θέλοντας να πάρουμε μόνο το κομμάτι που αφορούσε την στο plugin του , είναι

screenshot --selector "ul.thumbnails:nth-child(4) > li:nth-child(1) > div:nth-child(1) > div:nth-child(1) > img:nth-child(1)"

csff4
Αυτή η δεύτερη μέθοδος είναι λίγο δύσκολη καθώς θα πρέπει να ξέρετε πως να βρείτε τη διαδρομή του στοιχείου. Ο μέσος χρήστης θα προτιμούσε προφανώς την πρώτη μέθοδο για να πάρει ένα στιγμιότυπο ενός συγκεκριμένου στοιχείου μίας ιστοσελίδας.

iGuRu.gr The Best Technology Site in Greecefgns

κάθε δημοσίευση, άμεσα στο inbox σας

Προστεθείτε στους 2.087 εγγεγραμμένους.

Written by Δημήτρης

O Δημήτρης μισεί τις Δευτέρες.....

Αφήστε μια απάντηση

Η ηλ. διεύθυνση σας δεν δημοσιεύεται. Τα υποχρεωτικά πεδία σημειώνονται με *

Το μήνυμα σας δεν θα δημοσιευτεί εάν:
1. Περιέχει υβριστικά, συκοφαντικά, ρατσιστικά, προσβλητικά ή ανάρμοστα σχόλια.
2. Προκαλεί βλάβη σε ανηλίκους.
3. Παρενοχλεί την ιδιωτική ζωή και τα ατομικά και κοινωνικά δικαιώματα άλλων χρηστών.
4. Διαφημίζει προϊόντα ή υπηρεσίες ή διαδικτυακούς τόπους .
5. Περιέχει προσωπικές πληροφορίες (διεύθυνση, τηλέφωνο κλπ).