Το Περίγραμμα Σελίδας αποδίδει την πλήρη δομή DOM οποιασδήποτε ιστοσελίδας ως οπτική επικάλυψη δέντρου — απευθείας στη σελίδα. Κάθε στοιχείο HTML λαμβάνει μια έγχρωμη ετικέτα που δείχνει το όνομα ετικέτας του, και το βάθος φωλιάσματος αποκαλύπτεται μέσω εσοχής και γραμμών σύνδεσης. Είναι σαν να βλέπετε τον πίνακα Elements του DevTools, αλλά προβαλλόμενο στη ζωντανή σελίδα.
Τα DevTools του browser εμφανίζουν το DOM ως δέντρο κειμένου σε πλαϊνό πίνακα, αποσυνδεδεμένο από την οπτική διάταξη. Το Περίγραμμα Σελίδας γεφυρώνει αυτό το χάσμα προβάλλοντας τη δομή DOM απευθείας στη σελίδα. Κάθε στοιχείο λαμβάνει ένα μικρό έγχρωμο σήμα που δείχνει το όνομα ετικέτας του (div, section, nav, h1, p, button κ.λπ.), τοποθετημένο στην πάνω αριστερή γωνία του στοιχείου. Τα φωλιασμένα στοιχεία έχουν οπτική εσοχή και η δομή δέντρου γίνεται αμέσως αντιληπτή. Αυτό καθιστά εξαιρετικά εύκολη την κατανόηση του τρόπου κατασκευής μιας σελίδας με μια ματιά — μπορείτε να δείτε ότι το header περιέχει nav με πέντε anchor tags, το κύριο περιεχόμενο έχει τρία section elements με articles, και το footer περικλείει ένα logo div και μια λίστα συνδέσμων. Όλα χωρίς να ανοίξετε DevTools ή να διαβάσετε πηγαίο κώδικα HTML.
Κάθε ορατό στοιχείο στη σελίδα λαμβάνει μια έγχρωμη επικάλυψη σήματος ετικέτας που δείχνει το όνομα ετικέτας HTML. Από τα εξωτερικά στοιχεία html και body μέχρι μεμονωμένα spans, συνδέσμους και κουμπιά — τίποτα δεν αποκρύπτεται. Η επικάλυψη αποδίδει την πλήρη ιεραρχία στοιχείων ως οπτικό χάρτη.
Κάθε τύπος στοιχείου λαμβάνει ξεχωριστό χρώμα φόντου για το σήμα του. Δομικά στοιχεία (header, main, footer) σε μπλε, πλοήγηση σε κεχριμπαρί, επικεφαλίδες σε μωβ, παράγραφοι σε γκρι, σύνδεσμοι σε κίτρινο, κουμπιά σε κυανό, εικόνες σε ροζ. Αναγνωρίστε τύπους στοιχείων από το χρώμα χωρίς να διαβάζετε το κείμενο.
Τοποθετήστε τον δείκτη πάνω από οποιοδήποτε σήμα ετικέτας για να επισημάνετε το αντίστοιχο στοιχείο με μια ημιδιαφανή επικάλυψη που δείχνει τις ακριβείς διαστάσεις του (πλάτος × ύψος σε pixels). Το όριο του στοιχείου περιγράφεται και το σήμα γίνεται πιο εμφανές.
Τα βαθιά φωλιασμένα στοιχεία έχουν μεγαλύτερη εσοχή από την αριστερή άκρη, κάνοντας τις σχέσεις φωλιάσματος αμέσως ορατές. Δείτε με μια ματιά αν μια σελίδα έχει πάρα πολλά wrapper divs (5+ επίπεδα βάθους) ή καθαρή, ρηχή δομή.
Οι επικαλύψεις τοποθετούνται απόλυτα και δεν επηρεάζουν τη διάταξη σελίδας, την κύλιση ή τη συμπεριφορά JavaScript. Οι ετικέτες σημάτων είναι μικρές και ημιδιαφανείς ώστε να μπορείτε ακόμα να βλέπετε το περιεχόμενο από κάτω. Απενεργοποίηση άμεσα για επιστροφή στο κανονικό.
Κάντε κλικ στο σήμα οποιουδήποτε container element για σύμπτυξη των παιδιών του, αποκρύπτοντας τα φωλιασμένα σήματα. Χρήσιμο για εστίαση σε συγκεκριμένη ενότητα χωρίς να κατακλύζεστε από ολόκληρο το δέντρο DOM της σελίδας.
Βρεθήκατε σε μια σύνθετη ιστοσελίδα και χρειάζεστε να καταλάβετε πώς είναι κατασκευασμένη; Το Περίγραμμα Σελίδας σας δείχνει ολόκληρη την ιεραρχία DOM με μια ματιά — ποιες ενότητες περιέχουν ποιο περιεχόμενο, πώς είναι δομημένη η πλοήγηση, και πού αρχίζει και τελειώνει η κύρια περιοχή περιεχομένου.
Η υπερβολική φωλιά div κάνει το CSS δυσκολότερο να γραφτεί και τις σελίδες πιο αργές στην απόδοση. Αν βλέπετε 6+ επίπεδα έγχρωμων σημάτων στοιβαγμένα για ένα απλό μπλοκ κειμένου, η σήμανση χρειάζεται απλοποίηση.
Χρησιμοποιεί η σελίδα κατάλληλα σημαντικά στοιχεία; Αναζητήστε σήματα header, nav, main, article, section και footer. Αν τα πάντα είναι απλώς div elements, η σελίδα δεν έχει σημαντική δομή — κάτι που βλάπτει την προσβασιμότητα, το SEO και τη συντηρησιμότητα.
Επισκεφτείτε οποιοδήποτε καλοκατασκευασμένο ιστότοπο (Stripe, Linear, Vercel) και ενεργοποιήστε το Περίγραμμα Σελίδας για να δείτε πώς οι frontend ομάδες τους δομούν το HTML. Μάθετε μοτίβα διάταξης βλέποντας πραγματικές δομές DOM σε σελίδες παραγωγής.
Χρησιμοποιήστε πρώτα το Περίγραμμα Σελίδας για να εντοπίσετε ποια στοιχεία υπάρχουν και πού βρίσκονται, στη συνέχεια μεταβείτε στο CSS Inspector ή τη Μέτρηση Απόστασης για βαθύτερη ανάλυση συγκεκριμένων στοιχείων.
Ανοίξτε το floating dock του DevSuite Pro και κάντε κλικ στο εικονίδιο Περιγράμματος Σελίδας. Το εργαλείο σαρώνει αμέσως το DOM της σελίδας και αποδίδει σήματα ετικετών σε κάθε ορατό στοιχείο.
Έγχρωμα σήματα εμφανίζονται στην πάνω αριστερή γωνία κάθε στοιχείου δείχνοντας το όνομα ετικέτας (div, section, h1, p κ.λπ.). Η δομή φωλιάσματος είναι ορατή μέσω εσοχής και τοποθέτησης σημάτων.
Μετακινήστε τον δείκτη πάνω από οποιοδήποτε σήμα για επισήμανση του αντίστοιχου στοιχείου. Μια ημιδιαφανής επικάλυψη δείχνει τα όρια και τις διαστάσεις του στοιχείου. Αυτό συνδέει το αφηρημένο όνομα ετικέτας με την οπτική του θέση στη σελίδα.
Κάντε κλικ στο σήμα ενός container για σύμπτυξη των σημάτων των παιδιών του. Αυτό σας επιτρέπει να εστιάσετε σε συγκεκριμένες περιοχές σελίδας χωρίς οπτική φασαρία από βαθιά φωλιασμένα στοιχεία.
Κάντε κλικ στο εικονίδιο Περιγράμματος Σελίδας στο dock για αφαίρεση όλων των επικαλύψεων και επιστροφή στην κανονική προβολή σελίδας. Δεν αφήνει ίχνη πίσω.
Εγκαταστήστε το DevSuite Pro δωρεάν και ξεκλειδώστε 39+ εργαλεία προγραμματιστή για το πρόγραμμα περιήγησής σας.
