Προγραμματιστής Debug στοιχεία DOM στην σελίδα σας με μια γραμμή κώδικα

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

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

Το GitHub επιτρέπει στους προγραμματιστές να εξοικονομείτε λίγα κομμάτια κώδικα που ονομάζεται Gist. Όλα αυτά είναι ανοιχτά και δωρεάν εκτός από τη δική σας χρήση. Αυτός είναι ο λόγος για τον οποίο αυτό το εργαλείο εντοπισμού σφαλμάτων CSS είναι τόσο χρήσιμο. Συνδυάζει το σύγχρονη ανδρεία των Chrome DevTools με το απλότητα των bookmarklets του προγράμματος περιήγησης.

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

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

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

Ωστόσο, δεν πρέπει να περιορίζεστε μόνο στο Chrome. Αυτό το απόσπασμα λειτουργεί για όλα τα μεγάλα προγράμματα περιήγησης, συμπεριλαμβανομένων των Firefox, του Safari, του Opera και του Internet Explorer.

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

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