CRX id
pmkbdhlmjbnmmpeecekhplejmlmeapog
pmkbdhlmjbnmmpeecekhplejmlmeapog
Description from extension meta
Μετρήστε αποστάσεις και πλέγματα τέλειων pixel σε οποιαδήποτε ιστοσελίδα.
Image from store
Description from store
Η ακρίβεια των pixel είναι ο ήρωας του εξαιρετικού σχεδιασμού. Μια κακή στοίχιση ενός pixel μπορεί να διαταράξει τον ρυθμό ενός πλέγματος, να κάνει το κείμενο να φαίνεται εκτός κέντρου ή να κάνει ένα ολόκληρο στοιχείο να φαίνεται "σχεδόν σωστό" αλλά όχι ακριβώς. Το Grid Ruler Lite προσφέρει σε προγραμματιστές front-end, σχεδιαστές UI/UX, δοκιμαστές QA και σε όποιον ενδιαφέρεται για την οπτική βελτίωση, ένα άμεσο κιτ εργαλείων μέτρησης εντός προγράμματος περιήγησης - χωρίς βαρύ λογισμικό σχεδίασης, χωρίς ακατάστατα πάνελ DevTools και χωρίς στιγμιότυπα οθόνης που αναμειγνύονται σε εξωτερικές εφαρμογές. Με ένα μόνο κλικ, η επέκταση επικαλύπτει έναν χάρακα με δυνατότητα αλλαγής μεγέθους, οδηγούς snap-to-grid και προαιρετικά πλέγματα γραμμής βάσης πάνω από οποιαδήποτε ιστοσελίδα, ώστε να μπορείτε να ελέγχετε την απόσταση, να επαληθεύετε πλέγματα 8 σημείων και να καταγράφετε ενδείξεις σφαλμάτων διάταξης σε δευτερόλεπτα.
Τι κάνει το Grid Ruler Lite να ξεχωρίζει;
Ενεργοποίηση με ένα κλικ, Απόρριψη με ένα κλικ
Κάντε κλικ στο εικονίδιο της γραμμής εργαλείων (ή καλέστε τη συντόμευση που ορίσατε στις ρυθμίσεις πληκτρολογίου του προγράμματος περιήγησης) και η επέκταση θα εισάγει ένα ελαφρύ<canvas> Η επικάλυψη ενθυλακώνεται στο δικό της Shadow-DOM. Το CSS της σελίδας σας δεν μπορεί να παρέμβει και η επικάλυψη δεν αλλάζει ποτέ το δέντρο DOM που δοκιμάζετε. Κάντε ξανά κλικ και κάθε οδηγός, πλέγμα και ετικέτα εξαφανίζεται—δεν υπάρχει επαναφόρτωση σελίδας, δεν υπάρχουν καθυστερημένοι ακροατές συμβάντων.
Γιατί θα το θέλετε στην εργαλειοθήκη σας
Εξοικονόμηση Χρόνου: Η μέτρηση των παραγεμισμάτων στο DevTools απαιτεί εμβάθυνση σε ένθετα πλαίσια και νοερή προσθήκη τιμών περιθωρίου και ορίων. Το Grid Ruler Lite δείχνει οπτικά τις αποστάσεις με ένα σύρσιμο.
Μείωση σφαλμάτων: Εντοπίστε μικροσκοπικές παλινδρομήσεις απόστασης πριν φτάσουν στο στάδιο της σταδιοποίησης ή, χειρότερα, στην παραγωγή—ειδικά σε σημεία απόκρισης όπου τα μάτια του ελέγχου ποιότητας δεν εντοπίζονται πάντα.
Βελτίωση της συνεργασίας: Οι σχεδιαστές μπορούν να επικαλύψουν το πλέγμα 8 σημείων απευθείας σε μια ανεπτυγμένη έκδοση και να μοιραστούν ένα στιγμιότυπο οθόνης, δίνοντας στους προγραμματιστές ακριβή σχόλια pixel χωρίς σχόλια Figma.
Μείνετε συγκεντρωμένοι: Δεν χρειάζεται να πατάτε alt-tab στο Photoshop ή να ανοίγετε αρχεία Sketch απλώς για να μετρήσετε ένα κουμπί. Όλα συμβαίνουν στη σελίδα που εμφανίζεται, ακριβώς όπως τα βλέπουν οι τελικοί χρήστες.
Εκπαίδευση & Τεκμηρίωση: Οι υπεύθυνοι προϊόντων και οι τεχνικοί συγγραφείς μπορούν να επιδείξουν τη συμπεριφορά διάταξης με στιγμιότυπα οθόνης χάρακα, καθιστώντας τα έγγραφα προδιαγραφών πιο σαφή για όλα τα ενδιαφερόμενα μέρη.
Ομάδες χρηστών-στόχων
Ομάδα χρηστών
Προγραμματιστές Front-End
Ανάγκη επαλήθευσης της απόστασης CSS, των κενών flexbox και της ευθυγράμμισης των στοιχείων σε όλα τα σημεία διακοπής. Σύρσιμο χάρακα, συγκράτηση στις άκρες, κλείδωμα οδηγών, εξαγωγή στιγμιότυπων οθόνης για αξιολογήσεις PR.
Σχεδιαστές UI/UX
Πρέπει να επιβεβαιωθεί ότι οι κατασκευές προγραμματιστών σέβονται τα συστήματα σχεδίασης 8 ή 10 σημείων. Επικάλυψη πλεγμάτων γραμμής βάσης, μέτρηση συμπληρώσεων, κοινή χρήση σχολιασμένων PNG.
Ελεγκτές Διασφάλισης Ποιότητας
Αναφέρετε σφάλματα άψογα σε pixel με σαφή στοιχεία
Οι γρήγορες μετρήσεις και η λήψη στιγμιότυπων οθόνης με ένα πλήκτρο μεταφέρονται απευθείας σε προγράμματα παρακολούθησης σφαλμάτων
Επεξεργαστές Περιεχομένου & Προσωπικοί Συνεργάτες
Ελέγξτε την αναδίπλωση των επικεφαλίδων, την απόσταση μεταξύ των θέσεων υποδοχής διαφημίσεων και τις διατάξεις καρτών σε σελίδες που βασίζονται σε CMS. Η μη τεχνική επικάλυψη αποφεύγει την πολυπλοκότητα των DevTools.
Εκπαιδευτικοί & Φοιτητές
Διδάξτε αρχές σχεδιασμού, θεωρία πλέγματος και responsive layouts ζωντανά στο πρόγραμμα περιήγησης. Οπτικές επιδείξεις σε πραγματικό χρόνο χωρίς εξωτερικά εργαλεία.