Το εργαλείο CSS Inspector είναι ένα ισχυρό εργαλείο προγραμματιστή που σας επιτρέπει να βλέπετε όλες τις ιδιότητες CSS οποιουδήποτε στοιχείου, απλώς μετακινώντας το ποντίκι πάνω του. Κάντε κλικ για να κλειδώσετε τα στυλ, επεξεργαστείτε τα απευθείας και δείτε τις αλλαγές να εφαρμόζονται αμέσως στη σελίδα.
Είτε αποσφαλματώνετε ένα πρόβλημα διάταξης, είτε κάνετε reverse-engineering σε ένα design που θαυμάζετε, είτε απλώς θέλετε να ελέγξετε γρήγορα τιμές spacing και typography, το CSS Inspector σας δίνει όλα όσα χρειάζεστε σε ένα καθαρό, αιωρούμενο (floating) panel. Σε αντίθεση με τα DevTools του browser, δεν μπαίνει στη μέση σας — χωρίς προσαρτημένα panels, χωρίς αλλαγή μεγέθους στο viewport. Απλώς κάντε hover, κλικ, και επιθεωρήστε. Το εργαλείο εμφανίζει τα computed styles (αυτό που πραγματικά αποδίδει ο browser), όχι απλώς το CSS όπως γράφτηκε. Αυτό σημαίνει ότι βλέπετε τις πραγματικές τιμές αφού έχουν επιλυθεί η κληρονομικότητα (inheritance), η ειδικότητα (specificity) και η διαδοχική εφαρμογή (cascading) — τις ίδιες τιμές που επηρεάζουν αυτό που βλέπουν οι χρήστες στην οθόνη.
Η επιθεώρηση ενός στοιχείου δεν προκαλεί ποτέ reflow ή repaint της ίδιας της σελίδας, οπότε μπορείτε να εξερευνήσετε ελεύθερα χωρίς να ανησυχείτε μήπως διαταράξετε τη θέση κύλισης, τα animations ή την κατάσταση του JavaScript. Υποστηρίζονται επίσης τα pseudo-elements όπως τα ::before και ::after — κάντε hover στο γονικό στοιχείο και το panel εμφανίζει τα styles του generated content ξεχωριστά από αυτά του ίδιου του στοιχείου. Οι custom properties του CSS (μεταβλητές) επιλύονται στην τελική computed τιμή τους, αλλά το panel σας δείχνει επίσης το όνομα της μεταβλητής που την παρήγαγε, ώστε να μπορείτε να εντοπίσετε μια τιμή χρώματος ή spacing πίσω στην πηγή του design-token της, αντί να βλέπετε απλώς έναν ακατέργαστο αριθμό pixel.
Στην καθημερινή χρήση, οι περισσότεροι προγραμματιστές ανοίγουν το CSS Inspector δεκάδες φορές σε μία συνεδρία — για να ελέγξουν γιατί κατέρρευσε ένα margin, να επιβεβαιώσουν έναν κωδικό hex πριν τον αντιγράψουν σε ένα stylesheet, ή να επαληθεύσουν ότι ένα media query breakpoint όντως εφάρμοσε τα styles που έπρεπε. Επειδή πρόκειται για ένα floating panel και όχι για μια λειτουργία που καταλαμβάνει όλο τον browser, μπορείτε να το κρατήσετε ανοιχτό ενώ αλλάζετε καρτέλες για να ελέγξετε τον δικό σας code editor ή ένα αρχείο design, και μετά να επιστρέψετε κατευθείαν στο ίδιο στοιχείο πάνω από το οποίο κάνατε hover, χωρίς να χάσετε το σημείο όπου βρισκόσασταν.
Δείτε γραμματοσειρές, μεγέθη, χρώματα, διαστήματα και άλλα αμέσως κατά την τοποθέτηση του κέρσορα.
Κάντε κλικ στο στοιχείο για να κλειδώσετε το πλαίσιο ώστε να μην εξαφανιστεί, επιτρέποντας λεπτομερή επιθεώρηση.
Κάντε διπλό κλικ στις τιμές για να τις αλλάξετε απευθείας. Οι επεξεργασίες σας θα αντικατοπτρίζονται αμέσως στη σελίδα.
Αντιγράψτε μεμονωμένες ιδιότητες ή ολόκληρο το μπλοκ στυλ σχεδίασης στο πρόχειρό σας με ένα κλικ.
Δείτε τις τιμές margin, border και padding οπτικά.
Εμφανίζει το πλάτος, το ύψος και τη θέση του στοιχείου στη σελίδα.
Το CSS Inspector εμφανίζει πάνω από 40 ιδιότητες:
font-familyfont-sizefont-weightline-heightletter-spacingtext-aligntext-transformcolorwidthheightpaddingmarginborderborder-radiusbox-sizingdisplaypositiontoprightbottomleftz-indexfloatoverflowbackground-colorbackground-imagebackground-sizebackground-positionopacitybox-shadowtext-shadowtransformtransitioncursorΕπιθεωρήστε στοιχεία με κακή ευθυγράμμιση με ακρίβεια.
Μελετήστε τα στυλ των αγαπημένων σας ιστότοπων.
Δοκιμάστε αλλαγές πριν γράψετε κώδικα.
Εμφανίστε ζωντανές αλλαγές κατά τη διάρκεια συναντήσεων.
Λάβετε εύκολα τον κώδικα CSS για νέα στοιχεία.
Κάντε κλικ στο εικονίδιο CSS Inspector στη γραμμή εργαλείων DevSuite Pro.
Μετακινήστε τον κέρσορα πάνω από οποιοδήποτε στοιχείο για να δείτε τις ιδιότητές του.
Κάντε κλικ στο στοιχείο για να καρφιτσώσετε το πλαίσιο πληροφοριών.
Κάντε διπλό κλικ στις τιμές για να τις προσαρμόσετε.
Αντιγράψτε τον ενημερωμένο κώδικα και χρησιμοποιήστε τον στο έργο σας.
Εγκαταστήστε το DevSuite Pro δωρεάν και ξεκλειδώστε 64+ εργαλεία προγραμματιστή για το πρόγραμμα περιήγησής σας.