Πώς να χρησιμοποιήσετε το Google Chrome για τον εντοπισμό σφαλμάτων CSS

Το εργαλείο Inspect Element είναι εξαιρετικό όταν πρόκειται για τον εντοπισμό σφαλμάτων των ιστοσελίδων σας σε πραγματικό χρόνο. Μπορείτε να χρησιμοποιήσετε αυτό το εργαλείο για να κάνετε προεπισκόπηση και να αλλάξετε τη σχεδίαση ενός ιστότοπου. Σας επιτρέπει επίσης να το κάνετε χωρίς να χρειάζεται να φορτώσετε ξανά τη σελίδα, εμφανίζοντας αμέσως τις αλλαγές σας στο CSS.

Αυτό το άρθρο θα εξετάσει τον τρόπο προβολής των κλάσεων CSS και των εφαρμοσμένων στυλ τους στο παράθυρο Inspect Element. Θα καλύψει επίσης πώς μπορείτε να το χρησιμοποιήσετε για να κάνετε προεπισκόπηση των αλλαγών που κάνετε στο CSS σας σε πραγματικό χρόνο.

Άνοιγμα Inspect Element στο Google Chrome

Μπορείτε να επισκεφτείτε οποιονδήποτε ιστότοπο και να ανοίξετε το παράθυρο Inspect Element για να δείτε πώς μοιάζει ο κώδικας HTML ή CSS του. Αυτό το σεμινάριο θα χρησιμοποιήσει ένα δείγμα ιστότοπου να επιδείξουν.

Μπορείτε να ανοίξετε το παράθυρο Inspect Element στο Google Chrome πατώντας το F12 κλειδί. Μπορείτε επίσης να κάνετε δεξί κλικ οπουδήποτε στη σελίδα και να κάνετε κλικ στο Επιθεωρώ.

Το παράθυρο Inspect Element θα ανοίξει στον κώδικα HTML για το τμήμα του ιστότοπου όπου κάνατε δεξί κλικ. Εδώ μπορείτε επίσης επεξεργαστείτε το κείμενο του ιστότοπου χρησιμοποιώντας το Google Chrome.

Η καρτέλα Styles στο παράθυρο Inspect Element

Στο ίδιο το παράθυρο Inspect Element, κάτω από το Στοιχεία καρτέλα, υπάρχει ένα μέρος για να δείτε τον κώδικα HTML και CSS. Μπορείτε να δείτε τον κώδικα HTML στα αριστερά του παραθύρου Inspect Element. Μπορείτε να βρείτε τον κωδικό CSS στα δεξιά, κάτω από το Στυλ αυτί.

Ας υποθέσουμε ότι είχατε ένα στοιχείο HTML με μια κλάση που ονομάζεται "card-padding", με το δεξί και το αριστερό padding να εφαρμόζεται σε αυτό:

.card-padding {
 padding-right: 0vh;
 padding-αριστερά: 0vh;
}

Εάν κάνατε προεπισκόπηση αυτού του ιστότοπου στο πρόγραμμα περιήγησης, θα μπορούσατε να επιλέξετε το div στοιχείο με την κλάση "card-padding". Οποιοδήποτε στυλ εφαρμοστεί στην κατηγορία "card-padding" θα εμφανίζεται στα δεξιά, κάτω από το Στυλ αυτί.

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

Σε αυτήν την περίπτωση, θα δείτε το κοντέινερ div με τα ονόματα κλάσεων "row", "card-padding" και "pb-5" να επισημαίνονται στη σελίδα.

Πώς να κάνετε αλλαγές στο CSS σε πραγματικό χρόνο

Μπορείτε να αλλάξετε το CSS απευθείας από την καρτέλα Στυλ:

1. Χρησιμοποιώντας αυτόν τον ιστότοπο, κάντε δεξί κλικ στην πρώτη επικεφαλίδα.
2. Στη συγκεκριμένη επικεφαλίδα h4, θα δείτε μια κλάση που εφαρμόζεται σε αυτήν που ονομάζεται "text-grey" με χρώμα #8a8a8a.
3. Αλλάξτε το χρώμα σε κάτι άλλο, όπως πορτοκαλί. Θέλετε να αλλάξετε μόνο την ίδια την τιμή και όχι το όνομα της ιδιότητας, "χρώμα".
4. Θα δείτε την επικεφαλίδα να αλλάζει από σκούρο γκρι σε πορτοκαλί.
5. Εάν θέλετε να απενεργοποιήσετε ένα συγκεκριμένο στυλ CSS, καταργήστε την επιλογή του πλαισίου στα αριστερά του στυλ.
6. Μπορείτε επίσης να προσθέσετε περισσότερα στυλ στο αρχικό σύνολο. Κάντε κλικ ακριβώς κάτω ή στα δεξιά μιας ιδιοκτησίας για να ξεκινήσετε να προσθέτετε μια νέα. Θα πρέπει να χρησιμοποιείτε την ίδια σύνταξη όπως θα κάνατε σε ένα κανονικό αρχείο CSS όταν προσθέτετε νέα στυλ.
7. Εάν κάνετε προεπισκόπηση ενός τοπικού ιστότοπου, μπορείτε να συνεχίσετε να κάνετε αλλαγές CSS έως ότου πλησιάσετε την απαιτούμενη εμφάνιση και αίσθηση για τη διεπαφή χρήστη σας. Μετά από αυτό, μπορείτε να αντιγράψετε τις αλλαγές CSS που κάνατε ξανά στον τοπικό σας κώδικα.

Τρόπος τροποποίησης CSS από βιβλιοθήκες ή πλαίσια τρίτων

Μπορείτε επίσης να κάνετε αλλαγές σε στοιχεία HTML εάν χρησιμοποιείτε βιβλιοθήκες ή πλαίσια τρίτων κατασκευαστών όπως το Bootstrap.

1. Χρησιμοποιώντας αυτόν τον ιστότοπο, κάντε δεξί κλικ σε ένα από τα κουμπιά Bootstrap στη σελίδα.
2. Θα δείτε δύο κλάσεις που εφαρμόζονται στο κουμπί, "btn" και "btn-primary". Το Bootstrap έχει ήδη το δικό του στυλ που εφαρμόζεται και στις δύο αυτές κατηγορίες. Τα χρώματα που χρησιμοποιούνται ως χρώματα φόντου και περιγράμματος είναι #007bff. Αλλάξτε το σε κάτι άλλο, όπως το Violet.
3. Εάν κάνετε προεπισκόπηση ενός τοπικού ιστότοπου, μπορείτε στη συνέχεια να προσθέσετε τις νέες αλλαγές στον τοπικό σας κώδικα. Ανάλογα με τη σειρά του CSS σας, μπορεί να χρειαστεί χρησιμοποιήστε έναν πιο συγκεκριμένο επιλογέα CSS. Για παράδειγμα, προσθέστε πρόθεμα στον επιλογέα ".btn". Αυτό θα παρακάμψει το αρχικό στυλ Bootstrap.

   .btn.btn-πρωτοβάθμιο {
    Χρώμα φόντου: βιολετί;
    χρώμα περιγράμματος: βιολετί;
   }

Τι σημαίνει το element.style στην καρτέλα Styles;

Κάθε στοιχείο HTML που επισημαίνετε στο παράθυρο Inspect Element έχει ένα μπλοκ element.styles. Αυτό ισοδυναμεί με την προσθήκη ενσωματωμένου στυλ στο στοιχείο HTML, αντί να το στοχεύσετε χρησιμοποιώντας έναν επιλογέα.

1. Κάντε δεξί κλικ σε ένα στοιχείο HTML. Προσθέστε οποιοδήποτε στυλ στην ενότητα element.style, όπως:

   χρώμα: whitesmoke;

2. Θα δείτε ότι ο κώδικας για το στοιχείο HTML έχει επίσης αλλάξει. Ο κώδικας μέσα στο στοιχείο HTML έχει τώρα τη νέα γραμμή:

   στυλ="χρώμα: whitesmoke;"

Πώς τα παιδικά στοιχεία HTML κληρονομούν το στυλ

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

1. Χρησιμοποιώντας αυτόν τον ιστότοπο, κάντε δεξί κλικ οπουδήποτε στις εξωτερικές άκρες του ιστότοπου.
2. Στην ενότητα HTML του παραθύρου Inspect Element, εστιάστε σε δύο συγκεκριμένα στοιχεία HTML. Υπάρχει ένα γονικό στοιχείο div με μια κλάση "περιεχομένου" που εφαρμόζεται σε αυτό. Αυτό το στοιχείο HTML έχει ένα θυγατρικό στοιχείο h4, με μια κλάση "text-grey" που εφαρμόζεται σε αυτό.
3. Επιλέξτε το στοιχείο θυγατρικού h4 HTML και απενεργοποιήστε το χρωματικό στυλ στην κατηγορία "κείμενο-γκρι".
4. Επιλέξτε το γονικό στοιχείο HTML με την κλάση "περιεχόμενο". Προσθέστε το ακόλουθο στυλ CSS στην τάξη:

   χρώμα: κόκκινο;

   Όλο το κείμενο εντός του γονικού div θα γίνει κόκκινο. Αυτή η αλλαγή θα μεταφερθεί επίσης στα θυγατρικά στοιχεία, που σημαίνει ότι το h4 θα έχει επίσης κόκκινο χρώμα.
5. Επιλέξτε το θυγατρικό στοιχείο HTML h4 και προσθέστε ένα νέο στυλ στην κλάση "text-grey":

   χρώμα: πράσινο;

   Αυτό θα παρακάμψει το στυλ οποιωνδήποτε γονικών κλάσεων. Το στοιχείο HTML h4 θα γίνει από κόκκινο σε πράσινο.
6. Θα δείτε επίσης μια διαγραφή αν προβάλετε το στυλ για την κατηγορία "περιεχόμενο". Αυτό επιβεβαιώνει ότι το θυγατρικό στοιχείο h4 υπερισχύει του χρώματος του γονέα.

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

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

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

Μπορείτε να κάνετε αλλαγές στο παράθυρο Inspect Element μέχρι να φτάσετε κοντά στο σχέδιο που επιθυμείτε. Μόλις το κάνετε, μπορείτε στη συνέχεια να αντιγράψετε τον κωδικό από το παράθυρο Inspect Element, ξανά στον τοπικό σας κωδικό. Μπορείτε ακόμα να εκτελέσετε ξανά την εφαρμογή σας για να ελέγξετε ότι οι νέες αλλαγές στο CSS εξακολουθούν να λειτουργούν.

Αυτό το σεμινάριο κάλυψε τα βασικά για τον εντοπισμό σφαλμάτων του CSS ενός ιστότοπου χρησιμοποιώντας το παράθυρο Inspect Element, συμπεριλαμβανομένου του σημείου εύρεσης του CSS στην καρτέλα Styles.

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

Υπάρχουν πολλά άλλα ενδιαφέροντα πράγματα που μπορείτε να κάνετε με το παράθυρο Inspect Element.

7 παιχνιδιάρικα πράγματα που μπορείτε να κάνετε με το Inspect Element

Διαβάστε Επόμενο

Σχετικά με τον Συγγραφέα