Το Google Chrome δεν είναι μόνο ένα γρήγορο πρόγραμμα περιήγησης για τον καταναλωτή - αποκρύπτει επίσης μια σειρά από λειτουργίες προγραμματιστών κάτω από την κουκούλα του. Μπορείτε να αποκαλύψετε μέρος αυτής της ενέργειας με το εργαλείο "Επιθεώρηση". Ενώ αρχικά συντριπτική, το εργαλείο σας παρέχει τη διορατικότητα σχετικά με τον τρόπο κατασκευής των ιστοσελίδων και μπορεί να σας βοηθήσει να διορθώσετε τα δικά σας sites.

Πρόσβαση στο Εργαλείο επιθεώρησης

Το εργαλείο Επιθεώρηση μπορεί να βρεθεί στο μενού περιβάλλοντος του Chrome.

Κάντε δεξί κλικ σε οποιοδήποτε στοιχείο του προγράμματος περιήγησης και κάντε κλικ στο "Επιθεώρηση" στο μενού περιβάλλοντος.

Θα εμφανιστεί ένα παράθυρο από την πλευρά του προγράμματος περιήγησης Chrome, όπως φαίνεται παρακάτω. Αυτό ονομάζεται πάνελ DevTools. Εάν έχετε χρησιμοποιήσει ποτέ Firebug στον Firefox, μπορεί να αναγνωρίσετε κάποια μέρη του.

Υπάρχουν πολλά εδώ, οπότε ας εξετάσουμε τα μεμονωμένα κομμάτια.

Επιθεώρηση του επιθεωρητή

Ο πίνακας επιθεώρησης χωρίζεται σε πολλές διαφορετικές καρτέλες οι οποίες είναι ορατές στο επάνω μέρος του παραθύρου. Θα επικεντρωθούμε στην προεπιλεγμένη καρτέλα Στοιχεία.

Υπάρχουν δύο χρήσιμα κουμπιά δίπλα σε αυτές τις καρτέλες. Το πρώτο είναι το εργαλείο Inspect Element.

Αυτό το εργαλείο σάς επιτρέπει να μετακινήσετε το ποντίκι και να επιλέξετε διαφορετικά στοιχεία DOM για επιθεώρηση.

Το δεύτερο κουμπί ενεργοποιεί τη λειτουργία Προεπισκόπηση συσκευής. Σε αυτήν τη λειτουργία μπορείτε να δείτε τι φαίνεται στην ιστοσελίδα σας σε διαφορετικές αναλύσεις και μεγέθη οθόνης.

Εάν κάνετε κλικ σε αυτό το κουμπί, θα δείτε την ιστοσελίδα σας σε μια νέα προβολή.

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

Προβολή HTML

Το μεγαλύτερο μέρος της καρτέλας DevTools καταλαμβάνεται από το παράθυρο HTML.

Αυτό το παράθυρο είναι σαν μια υπερπαραγωγική "Προβολή πηγής". Είναι δομημένη σύμφωνα με το DOM, με στοιχεία ένθετα μέσα στα γονικά στοιχεία τους.

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

Αλλά πού είναι η εικόνα μου; Μπορώ να αποκαλύψω οποιαδήποτε στοιχεία DOM ένθετα στην ετικέτα αγκύρωσης κάνοντας κλικ στο τρίγωνο αποκάλυψης δίπλα στο. Σε αυτή την περίπτωση το βέλος αποκαλύπτει το ετικέτα που περίμενα να βρω.

Θα δείτε επίσης μια μικρή μπάρα μενού στο κάτω μέρος του παραθύρου HTML.

Αυτό ονομάζεται μονοπάτι ψωμιού και σας δείχνει όλα τα γονικά στοιχεία του επιλεγμένου στοιχείου. Για να πλοηγηθείτε σε ένα από αυτά τα στοιχεία, απλά κάντε κλικ σε αυτό.

Στυλ

Κάτω από την προβολή HTML βλέπουμε επίσης ένα παράθυρο που εμφανίζει τους κανόνες CSS που ισχύουν για το στοιχείο μας. Αυτό ονομάζεται παράθυρο Στυλ και στην περίπτωση αυτή βλέπουμε όλους τους κανόνες που ισχύουν για την ετικέτα αγκύρωσης που προηγουμένως επιθεώρησα.

Μπορείτε να ενεργοποιήσετε και να απενεργοποιήσετε έναν κανόνα, τοποθετώντας το δείκτη του ποντικιού πάνω του και κάνοντας κλικ στο πλαίσιο ελέγχου δίπλα του.

Αυτή η αλλαγή θα εμφανιστεί αμέσως στην προεπισκόπηση της σελίδας. Και αν κάνετε κλικ απευθείας σε έναν κανόνα, μπορείτε να αλλάξετε το όνομα και την αξία του.

Μπορείτε επίσης να αναζητήσετε συγκεκριμένους κανόνες χρησιμοποιώντας το πλαίσιο αναζήτησης φίλτρου.

Το παράθυρο Στυλ μπορεί να είναι πολύ περισσότερο από αυτό. Ανατρέξτε στην τεκμηρίωση της Google για μια πλήρη επεξήγηση των πολλών λειτουργιών του τμήματος στυλ.

Μοντέλο κιβωτίου και υπολογισμένο στυλ

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

Σε αυτή την περίπτωση μπορώ να δω το στοιχείο μου έχει ένα βασικό μέγεθος 461 x 209 pixels. Δεν περιέχει κανόνες περιθωρίων, περιθωρίων ή παραγεμισμάτων, επομένως τα πλαίσια είναι κενά.

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

Μπορείτε επίσης να δείτε ένα in situ μοντέλο κουτιού εάν έχετε ενεργοποιήσει το ποντίκι πάνω από στοιχεία DOM με το εργαλείο Inspect Element.

Κάτω από το μοντέλο πλαισίου είναι μια λίστα με όλους τους κανόνες στυλ που ισχύουν για αυτό το συγκεκριμένο στοιχείο. Αυτό είναι ελαφρώς διαφορετικό από το παράθυρο Στυλ. Δεν εμφανίζει τις πραγματικές γραμμές του CSS - μόνο τα αποτελέσματα αυτών των κανόνων. Αυτό ονομάζεται "υπολογιζόμενο στυλ" του αντικειμένου και είναι το συνδυασμένο αποτέλεσμα του CSS.

Τέλος, μπορείτε να αναζητήσετε συγκεκριμένους κανόνες πληκτρολογώντας στο πλαίσιο Φίλτρο.

συμπέρασμα

Αν εργάζεστε συχνά με ιστοσελίδες, αξίζει να εξερευνήσετε το εργαλείο ελέγχου του Chrome. Και οι άλλες καρτέλες στο DevTools, όπως η κονσόλα και το δίκτυο, μπορούν να είναι ανεκτίμητες για τους προγραμματιστές. Υπάρχουν περισσότερα από αυτά που μπορούμε να καλύψουμε αυτήν τη στιγμή, αλλά η τεκμηρίωση της Google είναι διεξοδική και χρήσιμη.