Εμφάνιση πλέγματος στο πρόγραμμα εντοπισμού σφαλμάτων του προγράμματος περιήγησης

Όταν εργάζεστε με πλέγματα κατά τη δημιουργία ιστοτόπων, μπορεί να χρειαστεί να ελέγξετε εάν η τοποθέτηση των στοιχείων στο πλέγμα είναι σωστή. Επιπλέον, εάν έχει γίνει κάποιο λάθος, πρέπει να καταλάβουμε από ποιο στοιχείο ξεκινά η λανθασμένη τοποθέτηση. Για το σκοπό αυτό μπορούμε να χρησιμοποιήσουμε το πρόγραμμα εντοπισμού σφαλμάτων στο πρόγραμμα περιήγησης.

Ας εξετάσουμε ένα πλέγμα χρησιμοποιώντας το πρόγραμμα εντοπισμού σφαλμάτων του Chrome. Πρώτα, επιλέγουμε το αντικείμενο που μας ενδιαφέρει με grid, κάνουμε δεξί κλικ και επιλέγουμε από τη λίστα την επιλογή 'Επιθεώρηση στοιχείου':

Τώρα, στον πίνακα που άνοιξε στα δεξιά του προγράμματος περιήγησης, τοποθετούμε τον δρομέα πάνω στο αντικείμενό μας με grid και παρατηρούμε ότι στη γραμμή δίπλα στο γονικό στοιχείο βρίσκεται το κουμπί grid:

Αφού πατήσουμε το κουμπί grid, θα δούμε ότι το αντικείμενό μας εμφανίζεται σε ένα οπτικά κατανοητό σύστημα πλέγματος, με αρίθμηση όλων των στηλών και των γραμμών:

Τώρα δώστε προσοχή στον πίνακα στο πρόγραμμα εντοπισμού σφαλμάτων. Σε αυτόν υπάρχουν οι καρτέλες Styles, Computed, Layout και άλλες. Αλλάξτε από την καρτέλα Styles, που είναι ενεργή από προεπιλογή, στην καρτέλα Layout. Θα δείτε μια λίστα ρυθμίσεων για το πλέγμα σας:

Ας επιλέξουμε για εμφάνιση την πρώτη επιλογή Show track sizes, που δείχνει το μέγεθος των tracks:

Με τη βοήθεια της επιλογής Show area names μπορούμε να εμφανίσουμε τα ονόματα των περιοχών του πλέγματος, εάν έχουν οριστεί. Και επιλέγοντας την επιλογή Extend grid lines θα δούμε τις γραμμές των tracks να επεκτείνονται πέρα από τα όρια του πλέγματος: