Αναλύστε τους κωδικούς κάθε ιστοτόπου με την επέκταση του Chrome CSS Dig

Υπάρχουν πολλά που μπορείτε να κάνετε με Chrome DevTools από την επεξεργασία ζωντανών ιστότοπων έως τη μελέτη λεπτομερών αιτημάτων HTTP. Αλλά το ικανότητα να αναλύει τα πρότυπα CSS δεν ψήνεται στην κονσόλα.

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

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

Για να ξεκινήσετε απλά εγκαταστήστε το πρόσθετο και ανοίξτε το παράθυρο της κονσόλας. Θα βρεις δύο καρτέλες στο παράθυρο CSS Dig: Ιδιότητες και Επιλογείς.

Μπορείτε να περιηγηθείτε στα αποτελέσματα οργανωμένη από ιδιότητες (χρώμα, περίγραμμα, παραγεμίδα), ή από τους επιλογείς (τάξεις, αναγνωριστικά). Θεωρώ ότι το παράθυρο Ιδιότητες είναι το πιο πολύτιμο, καθώς σας επιτρέπει να μελετήσετε ποιες γραμματοσειρές και χρώματα χρησιμοποιείτε.

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

Πιθανώς η πιο συνηθισμένη περίπτωση χρήσης για το CSS Dig είναι να σαφή διπλά χρώματα από την παλέτα χρωμάτων σας. Πόσες μοναδικές αποχρώσεις του πράσινου χρειάζεστε πραγματικά; Ή, πόσες διαφορετικές γραμματοσειρές sans-serif είναι απαραίτητες για μια σελίδα?

Το CSS Dig είναι απίστευτα απλό, οπότε μην περιμένετε δεκάδες λειτουργίες όπως το DevTools. Αντίθετα, αυτό το πρόσθετο είναι μάλλον προσανατολισμένη προς τους προγραμματιστές των frontend περιοχές ελέγχου για επαναληπτικούς επιλογείς ή διπλές ιδιότητες.

ο πηγαίου κώδικα του plugin είναι διαθέσιμο δωρεάν στο GitHub όπου θα βρείτε επίσης όλα τα τελευταίες ενημερώσεις.