Λεπτομερής επιθεώρηση CSS σε κάθε ιστό με το CSSPeeper για Chrome

Ο τακτικός πίνακας Chrome DevTools είναι τρελός ισχυρός. Επιτρέπει σε οποιονδήποτε να βουτήξει βαθιά σε οποιαδήποτε σελίδα για να μελετήσει τη διάταξη ενός ιστότοπου, το CSS και ακόμη και τις κεφαλίδες HTTP, αν χρειαστεί.

Μπορείτε να κάνετε πολλά με τον επιθεωρητή CSS των DevTools. Αλλά δεν έχει ένα σαφές πάνελ GUI και αυτό είναι ένα πράγμα που κάθε προγραμματιστής θα αγαπήσει.

Ελέγξτε το CSSPeeper, μια δωρεάν επέκταση του Chrome που προσθέτει αυτόν τον επιθεωρητή GUI στο πρόγραμμα περιήγησής σας. Σας επιτρέπει να μελετήσετε τις ιδιότητες CSS οποιουδήποτε στοιχείου σε οποιαδήποτε σελίδα, αν και είναι κατασκευασμένο μόνο για το Chrome αυτή τη στιγμή.

Μόλις εγκατασταθεί απλά επισκεφθείτε μια ιστοσελίδα και κάντε κλικ στο κύριο κουμπί της επέκτασης στη γραμμή πρόσθετων Chrome. Ένα νέο παράθυρο επιθεωρητή εμφανίζεται στην κορυφή της ιστοσελίδας με λεπτομέρειες για κάθε κύριο στοιχείο.

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

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

Το CSSPeeper σας επιτρέπει ακόμα επιλέξτε σχετικά χρώματα με έναν ενσωματωμένο επιλογέα χρωμάτων και γεννήτρια χρωμάτων. Μπορείτε να εξάγετε εικόνες από σελίδες, να δημιουργήσετε τα δικά σας σχέδια χρωμάτων και εφαρμόστε αυτά στα mockups σας με το Photoshop ή το Σκίτσο.

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

Αλλά αυτό το plugin μπορεί επίσης να βοηθήσει τους προγραμματιστές! Είναι πραγματικά α ισχυρό εργαλείο επιθεώρησης τόπου για όλους τους τύπους CSS.

Ρίξτε μια ματιά στην αρχική σελίδα του CSSPeeper για να μάθετε περισσότερα για το τι μπορεί να κάνει. Η κύρια σελίδα περιλαμβάνει επίσης ένα σύνδεσμο προς το κατάστημα Chrome, ώστε να μπορείτε να εγκαταστήσετε δωρεάν την επέκταση και να το διαγράψετε για δοκιμαστική λειτουργία.