Η Μέτρηση Απόστασης σάς επιτρέπει να κάνετε κλικ σε οποιαδήποτε δύο στοιχεία μιας ιστοσελίδας και να δείτε αμέσως την ακριβή απόσταση pixel μεταξύ τους — οριζόντια (X), κατακόρυφα (Y) και διαγώνια. Οπτικές γραμμές σύνδεσης με επισημασμένες μετρήσεις εμφανίζονται μεταξύ των στοιχείων και μια γραμμή πληροφοριών δείχνει τις διαστάσεις και τις αποστάσεις και στις τρεις κατευθύνσεις.
Ο έλεγχος αποστάσεων μεταξύ δύο στοιχείων στα DevTools browser απαιτεί hover σε κάθε στοιχείο ξεχωριστά, ανάγνωση τιμών margin/padding και νοητικά μαθηματικά για υπολογισμό της πραγματικής οπτικής απόστασης. Η Μέτρηση Απόστασης εξαλείφει τα πάντα αυτά. Κάντε κλικ στο Στοιχείο Α, κλικ στο Στοιχείο Β, και οι ακριβείς αποστάσεις pixel εμφανίζονται αμέσως — X (οριζόντια), Y (κατακόρυφη) και διαγώνια — εμφανιζόμενες ως επισημασμένες γραμμές που συνδέουν τα δύο στοιχεία απευθείας στη σελίδα. Το εργαλείο μετράει από τις άκρες στοιχείων (bounding boxes), οπότε οι τιμές αντιπροσωπεύουν το πραγματικό οπτικό κενό μεταξύ στοιχείων όπως το βλέπει ο χρήστης. Αυτό διαφέρει από την ανάγνωση τιμών margin/padding, που δεν λαμβάνουν υπόψη την αθροιστική επίδραση πολλαπλών ιδιοτήτων.
Κάντε κλικ στο πρώτο στοιχείο (επισημασμένο με μπλε περίγραμμα), στη συνέχεια κλικ στο δεύτερο στοιχείο (επισημασμένο με πράσινο περίγραμμα). Οι αποστάσεις μεταξύ των bounding boxes τους υπολογίζονται και εμφανίζονται αμέσως. Χωρίς drag, χωρίς χειροκίνητη εισαγωγή — μόνο δύο κλικ.
Δείτε την οριζόντια απόσταση (X), κατακόρυφη απόσταση (Y) και διαγώνια απόσταση ταυτόχρονα — κάθε μία εμφανίζεται με έγχρωμη γραμμή μέτρησης και ετικέτα. X σε κεχριμπαρί, Y σε κόκκινο, διαγώνια σε μωβ.
Διακεκομμένες γραμμές μέτρησης συνδέουν τα δύο επιλεγμένα στοιχεία απευθείας στη σελίδα, με ετικέτες απόστασης τοποθετημένες στο μέσο κάθε γραμμής. Η οπτική αναπαράσταση κάνει αμέσως σαφές τι μετράται.
Κάθε επιλεγμένο στοιχείο δείχνει τις δικές του διαστάσεις πλάτους × ύψους σε μικρή ετικέτα. Αυτό σάς επιτρέπει να βλέπετε τόσο τα μεγέθη στοιχείων όσο και τις αποστάσεις μεταξύ τους στην ίδια προβολή — χωρίς εναλλαγή εργαλείων.
Κάντε κλικ σε νέο ζεύγος στοιχείων για άμεση ενημέρωση μετρήσεων. Δεν χρειάζεται απενεργοποίηση και επανενεργοποίηση. Οι προηγούμενες γραμμές μέτρησης αντικαθίστανται από νέες για το νέο ζεύγος στοιχείων.
Μια σταθερή γραμμή πληροφοριών στο κάτω μέρος του viewport δείχνει συνοπτική περίληψη: ονόματα και διαστάσεις και των δύο στοιχείων, συν όλες τις τρεις τιμές απόστασης (X, Y, διαγώνια). Εύκολο για αντιγραφή σε αναφορές bugs ή σχόλια σχεδίασης.
Το mockup λέει ότι το κουμπί πρέπει να είναι 24px κάτω από την επικεφαλίδα. Κάντε κλικ στην επικεφαλίδα, κλικ στο κουμπί και επιβεβαιώστε ότι η Y απόσταση είναι ακριβώς 24px. Εντοπίζει μικρές ανακολουθίες αποστάσεων που είναι αόρατες στο μάτι αλλά καθορίζονται σε design tokens.
Μετρήστε την απόσταση μεταξύ Κάρτας 1 και Κάρτας 2, στη συνέχεια μεταξύ Κάρτας 2 και Κάρτας 3. Αν τα κενά δεν είναι ίδια, βρήκατε ασυνέπεια — πιθανόν από διαφορετικά margins ή ζήτημα flexbox gap.
Μετρήστε αποστάσεις στοιχείων σε πλάτος desktop, στη συνέχεια αλλάξτε μέγεθος browser και μετρήστε ξανά σε πλάτος κινητού. Επαληθεύστε ότι οι αποστάσεις κλιμακώνονται σωστά σε breakpoints και ότι οι responsive προσαρμογές margin/padding λειτουργούν όπως σχεδιάστηκαν.
Συμπεριλάβετε ακριβείς μετρήσεις στις αναφορές bugs σας: το κενό μεταξύ nav και hero είναι 47px, ενώ πρέπει να είναι 32px σύμφωνα με τις προδιαγραφές σχεδίασης. Οι τιμές γραμμής πληροφοριών μπορούν να αντιγραφούν απευθείας σε tickets Jira ή GitHub issues.
Κάντε κλικ σε δύο στοιχεία που πρέπει να είναι οριζόντια ευθυγραμμισμένα. Αν η Y απόσταση είναι 0px, είναι τέλεια ευθυγραμμισμένα. Οποιαδήποτε μη μηδενική τιμή Y υποδηλώνει κατακόρυφη αναντιστοιχία — ο ακριβής αριθμός σάς λέει πόσα pixels είναι εκτός.
Ανοίξτε το floating dock του DevSuite Pro και κάντε κλικ στο εικονίδιο Μέτρησης Απόστασης. Ο κέρσορας αλλάζει σε crosshair, δηλώνοντας ότι μπορείτε να επιλέξετε το πρώτο στοιχείο.
Κάντε κλικ σε οποιοδήποτε στοιχείο στη σελίδα. Επισημαίνεται με μπλε περίγραμμα και επισημαίνεται ως Στοιχείο Α με τις διαστάσεις του (πλάτος × ύψος σε pixels).
Κάντε κλικ σε δεύτερο στοιχείο. Επισημαίνεται με πράσινο περίγραμμα και επισημαίνεται ως Στοιχείο Β. Γραμμές μέτρησης εμφανίζονται αμέσως συνδέοντας τα δύο στοιχεία.
Εμφανίζονται τρεις γραμμές μέτρησης: οριζόντια (X) σε κεχριμπαρί, κατακόρυφη (Y) σε κόκκινο και διαγώνια σε μωβ. Κάθε γραμμή έχει ετικέτα που δείχνει την απόσταση pixel. Η γραμμή πληροφοριών στο κάτω μέρος συνοψίζει όλες τις τιμές.
Κάντε κλικ σε άλλο ζεύγος στοιχείων για άμεση μέτρηση νέας απόστασης. Κάντε κλικ στο εικονίδιο Μέτρησης Απόστασης στο dock για απενεργοποίηση όταν τελειώσετε.
Εγκαταστήστε το DevSuite Pro δωρεάν και ξεκλειδώστε 39+ εργαλεία προγραμματιστή για το πρόγραμμα περιήγησής σας.
