Το Responsive Inspector For Chrome είναι ένα εξαιρετικό εργαλείο εκμάθησης για την απόκριση σχεδίασης

Το Chrome δεν είναι πολύ μεγάλο στα εργαλεία προγραμματιστών και αυτός είναι ένας από τους λόγους για τους οποίους ο Firefox είναι το πρόγραμμα περιήγησης για τους περισσότερους προγραμματιστές. Ωστόσο, για όσους χρησιμοποιούν το Chrome, υπάρχουν πολλές διαθέσιμες επεκτάσεις για να τους βοηθήσουν από αυτή την άποψη. Αποκριτικός επιθεωρητής είναι μια επέκταση Chrome που μπορεί σωστά να ανταγωνιστεί την Responsive Design View στην οποία η Mozilla παρουσίασε Firefox 15. Το Responsive Inspector είναι ένα εργαλείο δύο σε ένα. Σας δείχνει τα μεγέθη οθόνης για τα οποία έχει βελτιστοποιηθεί ένας ιστότοπος και σας επιτρέπει γρήγορα να μεταβείτε σε διαφορετικό από το αναδυόμενο παράθυρο. Επιπλέον, μπορεί να τραβήξει στιγμιότυπα οθόνης μιας ιστοσελίδας προσαρμοσμένη σε οποιοδήποτε από αυτά τα μεγέθη. Για ιστότοπους που έχουν ήδη βελτιστοποιηθεί για συγκεκριμένα μεγέθη οθόνης, μπορείτε να προβάλετε τον κώδικα CSS που είναι υπεύθυνος για αυτό, καθιστώντας το ένα εξαιρετικό εργαλείο εκμάθησης για προγραμματιστές σχεδιασμού που ανταποκρίνονται.

Το Responsive Inspector προσθέτει ένα τετράγωνο κουμπί δίπλα στη γραμμή διευθύνσεων URL που ανοίγει ένα αναδυόμενο παράθυρο. Η επέκταση σας δείχνει όλα τα μεγέθη οθόνης για τα οποία ο ιστότοπος που έχει φορτωθεί βελτιστοποιείται μέσω γραμμών. Το μέγεθος της οθόνης είναι γραμμένο στο τέλος κάθε ράβδου και μια κλίμακα pixel στην κορυφή σας δείχνει διαφορετικά μεγέθη οθόνης. Μετακινήστε το ποντίκι σας πάνω από την κλίμακα και για κάθε γραμμή βαθμονόμησης, θα εμφανιστεί ένα ποπ για να σας δείξει το μέγεθος της οθόνης που αντιπροσωπεύει. Σε αυτό το ίδιο αναδυόμενο παράθυρο, υπάρχει ένα κουμπί αλλαγής μεγέθους καθώς και ένα κουμπί κάμερας. Κάνοντας κλικ στο πρώτο θα αλλάξει αυτόματα το παράθυρο του προγράμματος περιήγησής σας σε αυτό το πλάτος. Στη συνέχεια, μπορείτε να κάνετε κλικ στο κουμπί της κάμερας για να τραβήξετε ένα στιγμιότυπο οθόνης, αν θέλετε. Το στιγμιότυπο οθόνης μπορεί να αποθηκευτεί στην τοπική μονάδα δίσκου ή να μεταφορτωθεί στο Behance.net. Εάν αισθάνεστε την ανάγκη για λεπτότερη κλίμακα pixel, κάντε κλικ στο κουμπί μεγέθυνσης για μεγέθυνση.

Για να δείτε το CSS που χρησιμοποιείται για τον κώδικα των επιλογών προβολής, τοποθετήστε το δείκτη του ποντικιού πάνω από μία από τις γραμμές που αντιπροσωπεύουν το μέγεθος της οθόνης για τον οποίο έχει βελτιστοποιηθεί ο ιστότοπος και θα δείτε ένα κουμπί {} στο τέλος. Κάντε κλικ για να δείτε τον κώδικα CSS σε μια νέα καρτέλα. Ο κωδικός δεν είναι άμεσα επεξεργάσιμος, αλλά μπορείτε να τον αντιγράψετε ή να χρησιμοποιήσετε το εργαλείο επιθεώρησης για να κάνετε αλλαγές. Ο Αποκριτικός Επιθεωρητής μιμείται αρκετά καλά την Προβολή Σχεδιασμού Απόκρισης στον Firefox. Στην πραγματικότητα, δεν θα ήταν λάθος να πούμε ότι η επέκταση είναι μια περικοπή πάνω από το εργαλείο. Όπου ο Firefox σας δίνει προεπιλογές μεγέθους οθόνης, το Responsive Inspector σάς προσφέρει μια ολόκληρη κλίμακα και μεγάλη ελευθερία και, στη συνέχεια, υπάρχει το εργαλείο οθόνης. Οι προεπιλογές θα κάνουν το Responsive Inspector πολύ πιο χρήσιμο, και θα πρέπει να προστεθεί. Αν και χωρίς αυτά, η επέκταση λειτουργεί εξαιρετικά καλά.

Εγκαταστήστε το Responsive Inspector από το Chrome Web Store