Η Λειτουργία Μόνο Περιγράμματος προσθέτει χρωματικά κωδικοποιημένα πλαίσια σε κάθε στοιχείο HTML, δίνοντάς σας άμεση X-ray εικόνα της δομής διάταξης. Δείτε ακριβώς πού βρίσκεται κάθε div, section, header, παράγραφος και κουμπί — συμπεριλαμβανομένων των padding, margins και σχέσεων φωλιάσματος.
Η κατανόηση της διάταξης μιας σελίδας είναι συχνά το πρώτο βήμα στον εντοπισμό σφαλμάτων CSS. Οφείλεται το επιπλέον κενό σε padding ή margin; Η Λειτουργία Μόνο Περιγράμματος απαντά αμέσως σε αυτές τις ερωτήσεις σχεδιάζοντας χρωματιστά πλαίσια γύρω από κάθε στοιχείο. Σε αντίθεση με τα DevTools (που επισημαίνουν μόνο ένα στοιχείο τη φορά), αυτό το εργαλείο περιγράφει τα πάντα ταυτόχρονα. Κάθε τύπος στοιχείου HTML λαμβάνει διακριτό χρώμα: οι headers μπλε, τα nav κίτρινα, το κύριο περιεχόμενο πράσινο, οι παράγραφοι ροζ, τα κουμπιά κυανά.
Εναλλαγή περιγραμμάτων σε κάθε στοιχείο με ένα κλικ — χωρίς διαμόρφωση. Κάντε κλικ για να δείτε όλα τα πλαίσια, ξανακλικ για να τα αφαιρέσετε. Ο γρηγορότερος τρόπος οπτικοποίησης δομής διάταξης.
Διαφορετικά στοιχεία HTML λαμβάνουν διαφορετικά χρώματα περιγράμματος. Headers σε μπλε, πλοήγηση κίτρινη, κύριο περιεχόμενο πράσινο, τίτλοι μοβ, παράγραφοι ροζ, κουμπιά κυανά, divs γκρι.
Τα περιγράμματα κάνουν ορατά τα αόρατα προβλήματα CSS. Εντοπίστε απροσδόκητα margins, padding που ωθεί στοιχεία πλατύτερα, overflow που προκαλεί οριζόντιες γραμμές κύλισης ή στοιχεία με μηδενικό ύψος.
Τα φωλιασμένα περιγράμματα αποκαλύπτουν τη δομή γονέα-παιδιού του DOM. Δείτε πόσο βαθιά φωλιάζουν τα στοιχεία και ποιο container τυλίγει ποιο περιεχόμενο.
Ενεργοποιήστε σε οποιαδήποτε ιστοσελίδα — δικά σας έργα, ιστότοποι πελατών, σελίδες ανταγωνιστών. Τα περιγράμματα εφαρμόζονται μέσω CSS και δεν τροποποιούν τη δομή DOM.
Τα περιγράμματα σχεδιάζονται χρησιμοποιώντας CSS outline (όχι border), που σημαίνει ότι δεν προσθέτουν στις διαστάσεις box model. Η διάταξη παραμένει ακριβώς όπως ήταν.
Λειτουργία Μόνο Περιγράμματος covers the following, organized by category:
htmlbodyheaderfootermainsectionarticleasidenavh1–h6 headingsp paragraphsspana linksblockquoteprecodebuttoninputtextareaselectformlabeldivul / ol / litable / tr / tdfiguredetailsΑυτό το μυστηριώδες κενό μεταξύ ενοτήτων; Ενεργοποιήστε τα περιγράμματα και θα δείτε αμέσως αν οφείλεται σε margin, padding ή κενό div που δεν γνωρίζατε.
Αλλάξτε το μέγεθος του παραθύρου με ενεργά περιγράμματα για να παρακολουθήσετε πώς ανασυντάσσεται η διάταξη σε breakpoints. Δείτε ποια στοιχεία στοιβάζονται και ποια overflow.
Πολλά φωλιασμένα divs; Περιττά wrapper στοιχεία; Η Λειτουργία Περιγράμματος κάνει οπτικά εμφανή την υπερβολική φωλίαση. Εξαιρετικό για αναθεώρηση κώδικα frontend.
Ενεργοποιήστε περιγράμματα στην αρχική σελίδα, μετά σε υποσελίδα. Μοιράζονται την ίδια δομή διάταξης; Τα περιγράμματα κάνουν τη δομική συνέπεια αμέσως ορατή.
Δείξτε στους μαθητές πώς τα στοιχεία HTML δημιουργούν κουτιά, πώς λειτουργεί το μοντέλο κουτιού με padding και margins. Η Λειτουργία Περιγράμματος μετατρέπει αφηρημένες έννοιες σε ορατές επιδείξεις.
Ανοίξτε το πλαίσιο DevSuite Pro και κάντε κλικ στο εικονίδιο Λειτουργία Μόνο Περιγράμματος. Αμέσως, κάθε στοιχείο HTML λαμβάνει χρωματιστό πλαίσιο.
Κάθε τύπος στοιχείου έχει διακριτό χρώμα. Μπλε για δομικά στοιχεία, πράσινο για περιοχές κύριου περιεχομένου, μοβ για τίτλους, ροζ για παραγράφους, κυανό για κουμπιά, κίτρινο για πλοήγηση.
Αναζητήστε απροσδόκητα κενά (από margins), στοιχεία που εκτείνονται πέρα από τα containers τους (overflow), ασύμμετρη απόσταση (ασυνεπές padding) ή βαθιά φωλιασμένους wrapper.
Χρησιμοποιήστε τη Λειτουργία Περιγράμματος ως αφετηρία, μετά μεταβείτε στον Επιθεωρητή CSS για συγκεκριμένες τιμές ή Μέτρηση Απόστασης για επαλήθευση αποστάσεων.
Κάντε ξανά κλικ στο εικονίδιο για να αφαιρέσετε όλα τα περιγράμματα. Δεν απαιτείται καθαρισμός — είναι καθαρή εναλλαγή.
Εγκαταστήστε το DevSuite Pro δωρεάν και ξεκλειδώστε 39+ εργαλεία προγραμματιστή για το πρόγραμμα περιήγησής σας.