Αναμείνατε ολίγον τι
Web Devel

Screenshots ολόκληρων των σελίδων σε κάθε browser

tons of code

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

 

Ένα απλό print screen είναι αρκετά βολικό για να τραβήξουμε μια φωτογραφία όσα φαίνονται στην οθόνη, αλλά δεν είναι πάντα αρκετό. Είναι πολλές φορές χρήσιμο να τραβήξουμε μια φωτογραφία ολόκληρη την σελίδα. Μια “εύκολη” λύση είναι τα πολλά screenshots της οθόνης και το “κοψε – ράψε” σε photoshop/corel draw/paint shop pro/gimp, μια διαδικασία δύσκολη, επίπονη και σίγουρα χάσιμο χρόνου.

 

Και δεν χρειάζεται να σκεφτούμε τα fixed position elements, που έρχονται παρέα σε κάθε φωτογραφία.

 

Η λύση όμως έρχεται μέσα από τους ίδιους τους browsers και εδώ θα δούμε το πως, στους κυριότερους από αυτούς!

 

Chrome

chrome screenshot option

Απο την έκδοση 59 μαζί με τα DevTools έχει ενσωματομένη αυτή την λειτουργία. Χρησιμοποιώντας το «Responsive Design Mode», η λειτουργία βρίσκεται στο πάνω δεξιά μενού. Μπορείτε να δείτε και εδώ όλα όσα ισχύουν για τα εργαλεία αυτά:

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

 

Υπάρχει βέβαια και το Nimbus extension.

Firefox

Στα Firefox DevTools υπάρχει μια επιλογή σχετικά κρυμμένη. Πρέπει να ενεργοποιήσετε την επιλογή “Take a screenshot of the entire page” που βρίσκεται στα Available Toolbox Buttons. Μετά από αυτό θα έχετε στην διάθεση σας το κουμπί για να τραβήξετε όσα screenshots θέλετε.

 

Safari

Safari awesome screenshot options

Στον Safari υπάρχει η επιλογή File > Export as PDF, αλλά είναι κάπως περίεργα τα αποτελέσματα της. Δεν φαίνεται να έχει συγκεκριμένη συμπεριφορά για το τι εξάγει και πως θα φαίνεται, ειδικά όταν μιλάμε για πολλές σελίδες του pdf (φαίνεται να χρησιμοποιεί το print.css).

Βέβαια υπάρχει το extension Awesome Screenshot, που φαίνεται να κάνει πολύ καλή δουλειά.

Από την άλλη, υπάρχουν και apps BrowseShot και Paparazzi!.

 

Opera

Και για τον τελευταίο από τους πιο γνωστούς browsers, υπάρχουν διάφορα extensions, από τα πιο λειτουργικά είναι τα παρακάτω:

Άλλη εναλλακτική

Αν και με τα παραπάνω δεν νιώθετε άνετα ή δεν κάνουν αυτό που χρειάζεστε/θέλετε αλλά έχετε εγκατεστημένο κάποιο πρόγραμμα επεξεργασίας εικόνων, τότε είστε τυχεροί. Τα περισσότερα από αυτά, υποστηρίζουν την δημιουργία εικόνας βάση του συνδέσμου που θα εισάγετε. π.χ. στο gimp:

Πηγή

css-tricks.com

Μοιραστείτε το άρθρο

The following two tabs change content below.
agathan

agathan

Αποφοίτησα απο το τμήμα Εφαρμοσμένων Μαθηματικών του Πανεπιστημίου Κρήτης. Κάτα την διάρκεια εργάστηκα στην τεχνική υποστήριξη του τμήματος. Ακολούθησε το μεταπτυχιακό μου, Msc In Applied Mathematics at University Of Delaware. Ύστερα δούλεψα για μερικά χρόνια σαν web developer (CMS and what not) και SEO/Adwords engineer.
Και τώρα είμαστε στο GeekD, μια λέξη που περιγράφει όλα τα παραπάνω.

"All we have to decide is what to do with the time that is given us."
-Gandalf The Grey, JRR Tolkien

Αφήστε ένα σχόλιο

Επιλογές της ομάδας
Νέα εντυπωσιακά ευρήματα από το ναυάγιο των Αντικυθήρων
Μελέτη σε αρχαίο κείμενο αποκαλύπτει νέα στοιχεία για την προέλευση του μηδενός
Τα 10++ καλύτερα plugins αναζήτησης του Wordpress για το 2017
Ο «ανθρώπινος υπολογιστής» Katherine Johnson, τιμάται από τη NASA για το σπουδαίο έργο της στις διαστημικές αποστολές
Έξι επιστήμονες της NASA πέρασαν έναν χρόνο «αρειανής ζωής» στη Γη
tablet - smartphone
Flash player and Html 5 logos
cassini grand finale video still Science Breakthrough
Catan in Virtual Reaiity
Close

Συνεχίζοντας να χρησιμοποιείτε την ιστοσελίδα, συμφωνείτε με τη χρήση των cookies. Περισσότερες πληροφορίες.

Οι ρυθμίσεις των cookies σε αυτή την ιστοσελίδα έχουν οριστεί σε "αποδοχή cookies" για να σας δώσουμε την καλύτερη δυνατή εμπειρία περιήγησης. Εάν συνεχίσετε να χρησιμοποιείτε αυτή την ιστοσελίδα χωρίς να αλλάξετε τις ρυθμίσεις των cookies σας ή κάνετε κλικ στο κουμπί "Κλείσιμο" παρακάτω τότε συναινείτε σε αυτό.

Κλείσιμο