CRX id
begcddgpiamjkanbgdcihlbfdmogcloo
begcddgpiamjkanbgdcihlbfdmogcloo
Description from extension meta
Συγκρίνετε οπτικές αλλαγές πριν και μετά την ενημέρωση ιστοσελίδων με λεπτομερείς αναφορές και ανάλυση DOM.
Image from store
Description from store
Κουρασμένοι από τον χειροκίνητο έλεγχο οπτικών σφαλμάτων μετά από κάθε αλλαγή κώδικα; Το UI Testing Inspector είναι το αξιόπιστο εργαλείο ελέγχου οπτικών διαφορών με ανάλυση DOM.
Γιατί να το χρησιμοποιήσετε;
⚡️ 100% Τοπικό και Ιδιωτικό: όλα τα στιγμιότυπα οθόνης και τα δεδομένα σύγκρισης παραμένουν στον υπολογιστή σας. Δεν υπάρχουν υπηρεσίες cloud, δεν υπάρχει κοινή χρήση δεδομένων
⚡️ Άμεση Ανάδραση: εγκαταστήστε την επέκταση, δημιουργήστε baseline, κάντε τις αλλαγές κώδικα και δείτε τις διαφορές αμέσως. Ιδανικό για γρήγορες δοκιμές παλινδρόμησης
⚡️ Pixel-τέλεια Ανίχνευση: πιάστε ακόμα και τις μικρότερες οπτικές αλλαγές που το ανθρώπινο μάτι θα μπορούσε να χάσει
Κύρια Χαρακτηριστικά:
🔸 Baseline με Ένα Κλικ: καταγράψτε την κατάσταση "πριν" οποιασδήποτε ιστοσελίδας με ένα κλικ
🔸 Pixel-τέλεια Οπτική Διαφορά: λάβετε μια σαφή αναφορά που δείχνει το baseline, την τρέχουσα κατάσταση και μια εικόνα που επισημαίνει τις ακριβείς διαφορές
🔸 Επιθεώρηση Στοιχείων: προχωρήστε πέρα από τον βασικό επιθεωρητή. Δείτε όχι μόνο τον κώδικα, αλλά και τι έχει αλλάξει στο DOM και CSS
🔸 Καταγραφή Πλήρους Σελίδας και Viewport: επιλέξτε μεταξύ καταγραφής της ορατής περιοχής ή ολόκληρης της σελίδας με δυνατότητα κύλισης
🔸 Ιστορικό Αναφορών: αποθηκεύστε και ελέγξτε έως 15 προηγούμενες αναφορές σύγκρισης
🔸 Φωτεινά και Σκοτεινά Θέματα: για άνετη προβολή, μέρα ή νύχτα
Μέσα στη Λεπτομερή Αναφορά
🔍 Μετά από κάθε σύγκριση, λαμβάνετε μια ολοκληρωμένη αναφορά που σας δίνει την πλήρη εικόνα:
✔️ Σύνοψη: ποσοστό οπτικών διαφορών και αριθμός στοιχείων που προστέθηκαν, αφαιρέθηκαν και τροποποιήθηκαν
✔️ Πλάγια Προβολή: συγκρίνετε τα στιγμιότυπα οθόνης "Πριν" και "Μετά" δίπλα στην επισημασμένη εικόνα "Διαφορές"
✔️ Λίστα Αλλαγών DOM και CSS: προσδιορίστε ακριβώς ποια στοιχεία έχουν αλλάξει. Δεν υπάρχει άλλη εικασία γιατί ένα pixel μετακινήθηκε - δείτε τις αλλαγές σε επίπεδο κώδικα όπως χρώμα, μέγεθος γραμματοσειράς ή περιθώριο
✔️ Τεχνικές Λεπτομέρειες: ολοκληρωμένη ανάλυση αλλαγών διάταξης, τροποποιήσεων περιεχομένου και δομικών ενημερώσεων
Τι Θα Πιάσετε:
➤ Μετατοπίσεις διάταξης και σφάλματα στοίχισης
➤ Αλλαγές χρώματος και στυλ
➤ Στοιχεία που λείπουν ή μετακινήθηκαν
➤ Τροποποιήσεις γραμματοσειράς και κειμένου
➤ Διαφορές εικόνων
Πώς Λειτουργεί:
1️⃣ Ορίστε Οπτικό Baseline: πλοηγηθείτε στη σελίδα που θέλετε να δοκιμάσετε και κάντε κλικ "Ορισμός Baseline" στο popup της επέκτασης. Αυτή είναι η πηγή αλήθειας σας.
2️⃣ Κωδικοποιήστε με Εμπιστοσύνη: κάντε αλλαγές στο CSS σας, ενημερώστε το περιεχόμενο ή αναδιοργανώστε τα στοιχεία.
3️⃣ Ελέγξτε τις Αλλαγές Αμέσως: κάντε κλικ "Σύγκριση με Baseline". Θα ανοίξει μια νέα καρτέλα με λεπτομερή οπτική αναφορά.
4️⃣ Αναλύστε τις Διαφορές: χρησιμοποιήστε την πλάγια προβολή και τη λίστα των ανιχνευμένων αλλαγών για να προσδιορίσετε κάθε πρόβλημα.
5️⃣ Ενημερώστε το Baseline: ικανοποιημένοι με τη νέα έκδοση; Απλά κάντε κλικ "Ορισμός Baseline" ξανά για να αποθηκεύσετε τη νέα εμφάνιση ως αναφορά σας.
Επαγγελματικές Συμβουλές
✨ Περιμένετε τις σελίδες να φορτώσουν πλήρως πριν από την καταγραφή των baselines
✨ Χρησιμοποιήστε καταγραφή πλήρους σελίδας για ολοκληρωμένη δοκιμή
✨ Βγάλτε στιγμιότυπα οθόνης στο ίδιο μέγεθος παραθύρου προγράμματος περιήγησης για ακριβείς συγκρίσεις
✨ Καταγράψτε baselines όταν το περιεχόμενο είναι σταθερό
✨ Δοκιμάστε μία αλλαγή κάθε φορά για σαφέστερα αποτελέσματα διαφορών
✨ Αποθηκεύστε σημαντικά baselines πριν από μεγάλες αναδιοργανώσεις κώδικα
✨ Συγκρίνετε παρόμοιες καταστάσεις σελίδων (ίδια κατάσταση σύνδεσης χρήστη, φορτωμένα δεδομένα)
Περιπτώσεις Χρήσης
✅ Οπτικός Έλεγχος Παλινδρόμησης: η κύρια περίπτωση χρήσης. Μετά από αλλαγές, εκτελέστε σύγκριση για να πιάσετε τυχόν ακούσια οπτικά σφάλματα.
✅ Επαλήθευση UI/Σχεδιασμού: εξασφαλίστε pixel-τέλεια υλοποίηση και συνέπεια μάρκας έναντι σχεδιαστικών mockups.
✅ Αναδιοργάνωση CSS: αναδιοργανώστε παλαιό CSS χωρίς φόβο. Μια γρήγορη δοκιμή οπτικής διαφοράς θα σας πει αμέσως εάν οι αλλαγές σας είχαν απροσδόκητες παρενέργειες.
✅ Δοκιμή Frontend: βασικό εργαλείο για οποιαδήποτε ροή εργασίας δοκιμής frontend, παρέχοντας άμεση οπτική ανάδραση.
Για Ποιον Κατασκευάστηκε;
➡️ Προγραμματιστές Frontend: πιάστε προβλήματα διάταξης πριν κάνετε commit τον κώδικά σας
➡️ Μηχανικοί QA: βελτιώστε τις χειροκίνητες δοκιμές UI σας με ένα αξιόπιστο βήμα οπτικής επαλήθευσης
➡️ Σχεδιαστές UI/UX: επαληθεύστε γρήγορα ότι η ζωντανή υλοποίηση ταιριάζει με τα σχέδιά σας
➡️ Ελεύθεροι Επαγγελματίες και Μικρές Ομάδες: ένα εργαλείο οπτικής δοκιμής χωρίς την εταιρική ετικέτα τιμής
Γιατί Ξεχωρίζει
🖼️ Καλύτερο από Χειροκίνητα Στιγμιότυπα Οθόνης: σταματήστε να παλεύετε με εικόνες πριν και μετά στους φακέλους της επιφάνειας εργασίας σας
📝 Μηδενική Καμπύλη Μάθησης: αν μπορείτε να περιηγηθείτε, μπορείτε να χρησιμοποιήσετε αυτό το εργαλείο
Συχνές Ερωτήσεις
❓Πώς ανιχνεύει τις αλλαγές;
💬 Χρησιμοποιεί μια διπλή μεθοδολογική προσέγγιση: σύγκριση pixel-προς-pixel για την οπτική διαφορά και δομική σάρωση για τη λίστα αλλαγών DOM/CSS.
❓Είναι τα δεδομένα μου ασφαλή;
💬 Ναι. Όλα επεξεργάζονται και αποθηκεύονται 100% τοπικά στον περιηγητή σας.
❓Μπορώ να το χρησιμοποιήσω στο localhost;
💬 Απολύτως! Λειτουργεί τέλεια κατά τη διάρκεια της τοπικής ανάπτυξης.
❓Τι γίνεται με το δυναμικό περιεχόμενο;
💬 Το εργαλείο σχεδιάστηκε για σύγκριση στατικών καταστάσεων. Για καλύτερα αποτελέσματα, τραβήξτε τα στιγμιότυπα οθόνης σας όταν οι κινήσεις ολοκληρωθούν και οι διαφημίσεις είναι σταθερές.
Latest reviews
- (2025-07-09) Дарья Петрова: Creates a full and detailed report of differences between two versions of web pages. Waiting for Visual comparison of whole page, not just viewport visible parts.