Κατά την πλοήγηση σας στο διαδίκτυο, μερικές φορές θέλετε να δείξετε στους φίλους σας ένα screenshot από μία ιστοσελίδα που είδατε.
Η συνήθης τρόπος είναι να πατήσετε τα πλήκτρα Win και Print Screen, αλλά έτσι θα πάρετε μία εικόνα όλης της οθόνης σας. Η εικόνα θα είναι μεγάλη σε όγκο, θα αναγκαστείτε να την περικόψετε για να τους δείξετε μόνο το στοιχείο που θέλετε και γενικά θα κάνετε πολλά κλικς. Ας δούμε ένα καλύτερο τρόπο πώς να πάρετε άμεσα ένα screenshot από ένα συγκεκριμένο στοιχείο μιας ιστοσελίδας, μέσω του Firefox και χωρίς τη χρήση add-ons.
Όταν φορτώνεται μια ιστοσελίδα, ο web browser σας δημιουργεί ένα Document Object Model της σελίδας. Το DOM είναι διαμορφωμένο ως δομή δέντρου όπου κάθε κόμβος είναι ένα αντικείμενο που αντιπροσωπεύει ένα τμήμα του εγγράφου.
Ας δούμε πώς μπορείτε να χρησιμοποιήσετε αυτή την λειτουργία για να συλλάβετε μόνο ένα συγκεκριμένο στοιχείο στο screenshot σας:
1. Ανοίξτε τη σελίδα που επιθυμείτε στο Firefox και κάντε δεξί κλικ στο στοιχείο που θέλετε να καταγράψετε.
2. Από το μενού, επιλέξτε “Έλεγχος αντικειμένου”
3. Το εργαλείο Inspector θα ανοίξει. Παρατηρήστε ότι έχει την βηματική ανάλυση των κόμβων του δέντρου DOM
4. Εκεί επιλέξτε από το αναδυόμενο μενού το “Screenshot Node”
5. Η εντολή σας θα εκτελεστεί αυτόματα και μία απεικόνιση του στοιχείου θα αποθηκευτεί ως εικόνα στο φάκελο αποθήκευσης του Firefox.
Το ατού αυτής της μεθόδου είναι ότι συλλαμβάνει επίσης μακρυά στοιχεία, συμπεριλαμβανομένων και αυτών που απαιτούν κύλιση. Στην περίπτωσή μας, ζητήσαμε το αρχικό στοιχείο της σελίδας, δηλαδή τη html και μας έδωσε μία εικόνα της πλήρες ιστοσελίδας του iguru.
Εναλλακτικά, μπορείτε να χρησιμοποιήσετε την ενσωματωμένη εντολή screenshot. Στο συγκεκριμένο άρθρο, χρησιμοποιήσαμε την εντολή “screenshot” που είναι ενσωματωμένη στον Firefox, για να συλλάβουμε ολόκληρη τη σελίδα. Η ίδια εντολή μπορεί να χρησιμοποιηθεί για να πάρετε μία απεικόνιση ενός ειδικού στοιχείου της σελίδας.
1. Ανοίξτε το Firefox και πατήστε τα πλήκτρα Shift + F2 στο πληκτρολόγιο. Ο Firefox θα ανοίξει μια γραμμή ως κονσόλα εντολών στο κάτω μέρος της οθόνης.
2. Πληκτρολογήστε την ακόλουθη εντολή
screenshot –selector “όνομα”
Αντικαταστήστε το “όνομα” με το κατάλληλο όνομα στοιχείου. Στην περίπτωσή μας θέλοντας να πάρουμε μόνο το κομμάτι που αφορούσε την ευπάθεια στο plugin του WordPress, είναι
screenshot --selector "ul.thumbnails:nth-child(4) > li:nth-child(1) > div:nth-child(1) > div:nth-child(1) > img:nth-child(1)"
Αυτή η δεύτερη μέθοδος είναι λίγο δύσκολη καθώς θα πρέπει να ξέρετε πως να βρείτε τη διαδρομή του στοιχείου. Ο μέσος χρήστης θα προτιμούσε προφανώς την πρώτη μέθοδο για να πάρει ένα στιγμιότυπο ενός συγκεκριμένου στοιχείου μίας ιστοσελίδας.
