Τραβήξτε ένα στιγμιότυπο οθόνης ενός συγκεκριμένου στοιχείου ιστοσελίδας στον Firefox

Θα ήθελα να μοιραστώ μαζί σας ένα ωραίο κόλπο για το Mozilla Firefox που μπορεί να αυξήσει την παραγωγικότητά σας και να εξοικονομήσει χρόνο. Ενώ σερφάρετε στο διαδίκτυο, μερικές φορές θέλετε να μοιραστείτε κάτι με τους φίλους σας τραβώντας ένα στιγμιότυπο οθόνης. Αλλά χρειάζονται αρκετά βήματα για να τραβήξετε ένα στιγμιότυπο οθόνης ολόκληρης της σελίδας, να την αποθηκεύσετε, να την περικόψετε κ.λπ. Σε αυτό το άρθρο, θα δούμε πώς να τραβήξετε απευθείας ένα στιγμιότυπο οθόνης ενός συγκεκριμένου στοιχείου σε μια ιστοσελίδα χωρίς τη χρήση πρόσθετων.

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

Ας δούμε πώς μπορείτε να το χρησιμοποιήσετε για να καταγράψετε μόνο ένα συγκεκριμένο στοιχείο στο στιγμιότυπο οθόνης σας.

Προς το τραβήξτε ένα στιγμιότυπο οθόνης ενός συγκεκριμένου στοιχείου ιστοσελίδας στον Firefox, κάντε τα παρακάτω βήματα:

1. Ανοίξτε την επιθυμητή σελίδα στον Firefox και κάντε δεξί κλικ στο στοιχείο που θέλετε να καταγράψετε.
2. Από το μενού περιβάλλοντος, επιλέξτε "Επιθεώρηση στοιχείου":
3. Το εργαλείο επιθεωρητή θα ανοίξει. Σημειώστε ότι διαθέτει έλεγχο ψίχουλας για τους κόμβους δέντρου DOM:
4. Εκεί, μπορείτε να κάνετε δεξί κλικ σε οποιοδήποτε στοιχείο και να επιλέξετε Κόμβος στιγμιότυπου οθόνης από το μενού περιβάλλοντος:Αυτό ακριβώς χρειαζόμαστε.

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

Εναλλακτικά, μπορείτε να χρησιμοποιήσετε το ενσωματωμένο στιγμιότυπο οθόνης εντολή. Νωρίτερα, έγραψα Πώς να τραβήξετε ένα στιγμιότυπο οθόνης της ανοιχτής σελίδας στον Firefox. Στο αναφερόμενο άρθρο, χρησιμοποιήσαμε την ενσωματωμένη εντολή "screenshot" του Firefox για να καταγράψουμε ολόκληρη τη σελίδα. Η ίδια λειτουργία μπορεί να χρησιμοποιηθεί για στιγμιότυπο οθόνης ενός συγκεκριμένου στοιχείου στην ανοιχτή σελίδα.

1. Ανοίξτε τον Firefox και πατήστε Shift + F2 στο πληκτρολόγιο. Ο Firefox θα ανοίξει μια κονσόλα / γραμμή εντολών στο κάτω μέρος της οθόνης.
2. Πληκτρολογήστε την ακόλουθη εντολή μέσα σε αυτό:

   στιγμιότυπο οθόνης --επιλογέας "όνομα"

   Αντικαταστήστε το όνομα "μερίδα" με το κατάλληλο όνομα επιλογής. Στην περίπτωσή μου, θα έπρεπε να είναι

   στιγμιότυπο οθόνης --επιλογέας "#widget-apps > .iconlist > .iconlist-content > ul"

Η δεύτερη μέθοδος είναι χρήσιμη για προγραμματιστές ιστού που γνωρίζουν την ακριβή διαδρομή του στοιχείου DOM. Ο μέσος χρήστης προφανώς θα προτιμήσει την πρώτη μέθοδο λήψης στιγμιότυπου οθόνης ενός συγκεκριμένου στοιχείου ιστοσελίδας.