Το Code Coverage ελέγχει κάθε επιλογέα σε κάθε αναγνώσιμο φύλλο στυλ σε σχέση με τη ζωντανή σελίδα, ώστε να μπορείτε να δείτε ποιοι κανόνες CSS δεν ταιριάζουν αυτήν τη στιγμή σε τίποτα, πόσα byte σπαταλά κάθε αρχείο και ποια σενάρια συγκρατούν την πρώτη ζωγραφική.
Τα φύλλα στυλ μεγαλώνουν μόνο. Φτάνει ένα θέμα με κανόνες για σελίδες που δεν έχετε, ένα πλαίσιο αποστέλλει στοιχεία που δεν χρησιμοποιείτε ποτέ και τρεις επανασχεδιασμούς αργότερα κανείς δεν είναι σίγουρος ποιο μισό αρχείο φέρει φορτίο. Το αποτέλεσμα είναι το CSS που κοστίζει σε κάθε επισκέπτη το εύρος ζώνης και το χρόνο απόδοσης για την παράδοση κανόνων που η σελίδα δεν μπορεί να χρησιμοποιήσει.
Κώδικας Κάλυψη μέτρα που άμεσα. Περιγράφει κάθε κανόνα σε κάθε φύλλο στυλ που το πρόγραμμα περιήγησης θα το αφήσει να διαβάσει — συμπεριλαμβανομένων κανόνων που είναι ένθετα μέσα σε ερωτήματα πολυμέσων, @supports και @layer block — και δοκιμάζει κάθε επιλογέα σε σχέση με το ζωντανό DOM. Ένας κανόνας που δεν ταιριάζει με τίποτα αυτήν τη στιγμή αναφέρεται ως αχρησιμοποίητος, ανά αρχείο, με ένα ποσοστό, τα χαμένα byte και την πλήρη λίστα επιλογέων που μπορείτε να αναπτύξετε και να αντιγράψετε.
Προσέχει τις εμφανείς παγίδες. Τα ψευδο-στοιχεία και οι ψευδο-κλάσεις καταστάσεων αφαιρούνται πριν από την αντιστοίχιση, επομένως ένας κανόνας :hover ή ::before κρίνεται σχετικά με το αν υπάρχει ο βασικός επιλογέας του αντί να διαγραφεί λανθασμένα. Τα φύλλα στυλ που προβάλλονται χωρίς κεφαλίδες CORS δεν μπορούν να διαβαστούν από κανένα σενάριο, επομένως επισημαίνονται ως μη αναγνώσιμα αντί να υπολογίζονται σιωπηλά ως τέλεια. Και επειδή η σάρωση αντικατοπτρίζει τη σελίδα όπως είναι εκείνη τη στιγμή, οι κανόνες για τα μενού, τις καρτέλες και τα modals που δεν είναι ακόμη ανοιχτά θα φαίνονται αχρησιμοποίητοι — επομένως ανοίξτε τους και πατήστε Επανάληψη σάρωσης προτού διαγράψετε οτιδήποτε.
Η καρτέλα JavaScript απαντά σε μια διαφορετική ερώτηση: βάρος και αποκλεισμός. Καταγράφει κάθε σενάριο που φορτώνει η σελίδα με το μέγεθος μεταφοράς, τον χρόνο λήψης και το αν είναι ασύγχρονο, αναβληθέν, άρθρωμα, φορτωμένο δυναμικά ή κρατά την πρώτη ζωγραφική και, στη συνέχεια, υπολογίζει πόσα byte μπλοκάρει. Δεν πωλείται σκόπιμα ως κάλυψη εκτέλεσης — το να γνωρίζουμε ποιες γραμμές JavaScript εκτελούνται απαιτεί το API εντοπισμού σφαλμάτων του Chrome, το οποίο δεν ζητά το DevSuite Pro, επομένως τίποτα εδώ δεν προσποιείται ότι είναι αναφορά σε επίπεδο γραμμής.
Κάθε κανόνας σε κάθε αναγνώσιμο φύλλο στυλ δοκιμάζεται σε σχέση με το ζωντανό DOM, συμπεριλαμβανομένων κανόνων μέσα σε ερωτήματα πολυμέσων, @supports και μπλοκ επιπέδου @ — δεν υπολογίζεται από ονόματα αρχείων ή μεγέθη.
Κάθε φύλλο στυλ λαμβάνει ένα αχρησιμοποίητο ποσοστό, έναν αριθμό κανόνων χρησιμοποιημένων έναντι αχρησιμοποίητων και τον αριθμό των χαμένων byte, ταξινομημένα έτσι ώστε ο χειρότερος παραβάτης να βρίσκεται στην κορυφή.
Αναπτύξτε οποιοδήποτε αρχείο για να διαβάσετε τους επιλογείς που δεν ταιριάζουν σε τίποτα και, στη συνέχεια, αντιγράψτε τους ως μπλοκ CSS για να το επεξεργαστείτε στον επεξεργαστή σας ή να το δώσετε σε έναν συμπαίκτη σας.
Τα ψευδοστοιχεία και οι ψευδοκλάσεις κατάστασης όπως :hover και :focus-within αφαιρούνται πριν από την αντιστοίχιση, επομένως οι διαδραστικοί κανόνες κρίνονται δίκαια αντί να διαγράφονται.
Κάθε σενάριο που αναφέρεται με το μέγεθός του, τον χρόνο λήψης και το αν είναι ασύγχρονο, αναβληθέν, λειτουργικό στοιχείο, φορτωμένο δυναμικά ή αποκλεισμό της πρώτης βαφής — συν τα συνολικά byte αποκλεισμού.
Τα μη αναγνώσιμα φύλλα στυλ διασταυρούμενης προέλευσης επισημαίνονται αντί να βαθμολογούνται και η καρτέλα JS λέει ξεκάθαρα ότι μετρά το βάρος, όχι ποιες γραμμές εκτελούνται. Δεν υπάρχουν επινοημένοι αριθμοί.
Ένα αγορασμένο θέμα αποστέλλει το CSS για δεκάδες διατάξεις επίδειξης. Δείτε πόσα από αυτά δεν χρησιμοποιεί ποτέ ο ιστότοπός σας και κόψτε το αρχείο με στοιχεία και όχι εικασίες.
Ελέγξτε πόσο μεγάλο μέρος ενός πλαισίου CSS επιβιώνει σε ένα πραγματικό πρότυπο και εάν η διαμόρφωση εκκαθάρισης ή ανακίνησης δέντρων κάνει αυτό που νομίζετε ότι είναι.
Καταγράψτε τα σενάρια που αναστέλλουν την απόδοση, με τα μεγέθη τους και αποφασίστε τι να αναβάλετε, να χωρίσετε ή να αποθέσετε για να εμφανιστεί το περιεχόμενο στην οθόνη νωρίτερα.
Πηγαίνετε με αριθμούς: ποια αρχεία χάνουν τα περισσότερα byte, πόσα JavaScript μπλοκάρει και πού αποδίδει περισσότερο η πρώτη ώρα εργασίας.
Αναλαμβάνοντας έναν ιστότοπο που δεν δημιουργήσατε, διαβάστε γρήγορα πόσο από το CSS και το JavaScript του εξακολουθεί να κερδίζει τη θέση του.
Κάντε κλικ στο εικονίδιο Code Coverage στο dock του DevSuite Pro. Η σάρωση εκτελείται αμέσως και αναφέρει πόσους κανόνες έλεγξε και ποιο μερίδιο από αυτούς δεν έχει χρησιμοποιηθεί.
Η επάνω σειρά σάς δίνει τον αριθμό των φύλλων στυλ, τους συνολικούς κανόνες, το ποσοστό που δεν χρησιμοποιείται και τα χαμένα byte. Τα παρακάτω αρχεία ταξινομούνται με βάση το πόσο σπαταλούν.
Κάντε κλικ στην εμφάνιση μη χρησιμοποιημένων επιλογέων σε οποιοδήποτε αρχείο για να διαβάσετε ακριβώς ποιοι κανόνες δεν ταιριάζουν σε τίποτα σε αυτήν τη σελίδα.
Ανοίξτε μενού, καρτέλες, ακορντεόν και μοντάλ και, στη συνέχεια, πατήστε Επανάληψη σάρωσης. Οι κανόνες των οποίων τα στοιχεία υπάρχουν μόνο σε αυτές τις καταστάσεις θα μετακινηθούν από αχρησιμοποίητο σε χρησιμοποιούμενο — να το κάνετε πάντα πριν από τη διαγραφή.
Η αντιγραφή αχρησιμοποίητων επιλογέων σάς δίνει ένα μπλοκ CSS για να επεξεργαστείτε. Το Export JSON αντιγράφει την πλήρη αναφορά, συμπεριλαμβανομένου του αποθέματος JavaScript, για ένα εισιτήριο ή ένα έγγραφο ελέγχου.
Εγκαταστήστε το DevSuite Pro δωρεάν και ξεκλειδώστε 71+ εργαλεία προγραμματιστή για το πρόγραμμα περιήγησής σας.
