Ο Επιθεωρητής Κινήσεων σας δίνει πλήρη έλεγχο σε κάθε κίνηση και μετάβαση CSS που εκτελείται σε οποιαδήποτε ιστοσελίδα. Παύστε όλες τις κινήσεις ταυτόχρονα, επιβραδύνετέ τες για επιθεώρηση ανά καρέ, επιταχύνετέ τες για δοκιμή απόδοσης ή πλοηγηθείτε χειροκίνητα στο χρονολόγιο — όλα από ένα μόνο πλαίσιο χωρίς να ανοίξετε τα DevTools.
Οι κινήσεις CSS είναι δύσκολες στον εντοπισμό σφαλμάτων. Γίνονται γρήγορα, επικαλύπτονται και τα DevTools σας αναγκάζουν να ψάχνετε μέσα σε υπολογισμένα στυλ. Ο Επιθεωρητής Κινήσεων λύνει αυτό εντοπίζοντας αυτόματα κάθε κίνηση @keyframes και μετάβαση CSS, παραθέτοντάς τες με την πλήρη διαμόρφωσή τους (διάρκεια, easing, καθυστέρηση, αριθμός επανάληψης) και δίνοντάς σας κουμπιά αναπαραγωγής που λειτουργούν καθολικά ή ανά κίνηση. Είτε εντοπίζετε σφάλματα σε τρεμάμενα εφέ hover, είτε ρυθμίζετε τον χρονισμό μιας ακολουθίας εισόδου σελίδας, αυτό το εργαλείο σας δίνει τον έλεγχο.
Παγώστε αμέσως κάθε κίνηση στη σελίδα με ένα κλικ. Όλες οι κινήσεις παύουν στην τρέχουσα θέση τους — όχι επαναφορά στην αρχή. Κάντε κλικ στην αναπαραγωγή για συνέχιση ακριβώς από εκεί που σταμάτησαν.
Ρυθμίστε την ταχύτητα αναπαραγωγής όλων των κινήσεων ταυτόχρονα. Επιλέξτε από 0,25x (τέταρτη ταχύτητα), 0,5x, 1x (κανονική), 2x ή 4x. Η εκτέλεση στα 0,25x κάνει ακόμα και τις πιο γρήγορες μεταβάσεις 200ms εύκολες να παρατηρηθούν.
Κάθε κίνηση CSS και μετάβαση στη σελίδα εντοπίζεται αυτόματα και εμφανίζεται σε λίστα. Κάθε καταχώρηση δείχνει το όνομα κίνησης, διάρκεια, συνάρτηση χρονισμού, καθυστέρηση, αριθμό επανάληψης και τρέχουσα κατάσταση.
Σύρετε τον δρομέα χρονολογίου για να μετακινηθείτε χειροκίνητα σε μια κίνηση καρέ προς καρέ. Δείτε τι ακριβώς συμβαίνει στο 25%, 50% ή σε οποιοδήποτε σημείο του κύκλου κίνησης. Η σελίδα ενημερώνεται σε πραγματικό χρόνο.
Παύστε, παίξτε ή ρυθμίστε την ταχύτητα για μεμονωμένες κινήσεις ανεξάρτητα. Απομονώστε μια κίνηση για εντοπισμό σφαλμάτων χωρίς να αποσπαστείτε από άλλα κινούμενα στοιχεία.
Κάντε κλικ σε οποιαδήποτε κίνηση για να δείτε την πλήρη δήλωση CSS — ορισμό @keyframes, ανάλυση σύντμησης κίνησης, υπολογισμένες αρχικές και τελικές καταστάσεις και σε ποια στοιχεία εφαρμόζεται.
Επιθεωρητής Κινήσεων covers the following, organized by category:
animation-nameanimation-durationanimation-timing-functionanimation-delayanimation-iteration-countanimation-directionanimation-fill-modeanimation-play-statetransition-propertytransition-durationtransition-timing-functiontransition-delayeaseease-inease-outease-in-outlinearcubic-bezier()steps()transformtransform-origintranslaterotatescaleskewΕπιβραδύνετε μια κίνηση στα 0,25x για να εντοπίσετε ακριβώς πού εμφανίζεται ένα τρεμόπαιγμα. Ελέγξτε αν το πρόβλημα οφείλεται σε layout thrashing, λανθασμένο easing ή αντικρουόμενες κινήσεις στο ίδιο στοιχείο.
Χρησιμοποιήστε τη σάρωση χρονολογίου για να δείτε πώς φαίνεται η καμπύλη cubic-bezier στην πράξη. Συγκρίνετε τη συμπεριφορά ease-in vs ease-out σε συγκεκριμένα ποσοστά.
Επισκεφθείτε έναν ιστότοπο με εντυπωσιακές κινήσεις και επιθεωρήστε πώς ακριβώς είναι φτιαγμένες. Δείτε τους ορισμούς @keyframes, τιμές χρονισμού και στόχευση στοιχείων.
Επαληθεύστε ότι τα εφέ hover, τα spinners φόρτωσης, οι σκελετικές οθόνες και οι μεταβάσεις σελίδας συμπεριφέρονται σωστά. Παύστε σε ενδιάμεσες καταστάσεις για έλεγχο οπτικών ελαττωμάτων.
Εντοπίστε κινήσεις που ενδέχεται να δημιουργήσουν προβλήματα σε χρήστες με αιθουσαίες διαταραχές. Ελέγξτε αν το prefers-reduced-motion τηρείται σωστά.
Ανοίξτε το πλαίσιο DevSuite Pro και κάντε κλικ στο εικονίδιο Επιθεωρητή Κινήσεων. Το εργαλείο σαρώνει αμέσως τη σελίδα και εντοπίζει όλες τις εκτελούμενες κινήσεις CSS.
Εμφανίζεται ένα πλαίσιο που παραθέτει κάθε κίνηση. Κάθε καταχώρηση δείχνει το όνομα, διάρκεια, συνάρτηση easing και αν εκτελείται ή έχει παυτεί. Ο μετρητής δείχνει τον συνολικό αριθμό κινήσεων.
Κάντε κλικ στο καθολικό κουμπί Παύσης για να παγώσετε όλες τις κινήσεις. Τα στοιχεία παραμένουν στην τρέχουσα κατάστασή τους, επιτρέποντάς σας να επιθεωρήσετε ιδιότητες CSS ή να τραβήξετε στιγμιότυπα.
Χρησιμοποιήστε τον επιλογέα ταχύτητας για να επιβραδύνετε τις κινήσεις στα 0,25x για λεπτομερή παρατήρηση ή να τις επιταχύνετε στα 4x. Οι αλλαγές ταχύτητας ισχύουν αμέσως χωρίς επανεκκίνηση.
Σύρετε τον δρομέα χρονολογίου αριστερά και δεξιά για να προχωρήσετε χειροκίνητα σε μια κίνηση. Η σελίδα ενημερώνεται σε πραγματικό χρόνο. Ιδανικό για εντοπισμό σφαλμάτων ή επαλήθευση καμπυλών easing.
Εγκαταστήστε το DevSuite Pro δωρεάν και ξεκλειδώστε 39+ εργαλεία προγραμματιστή για το πρόγραμμα περιήγησής σας.