Εντοπισμός σφαλμάτων σε JavaScript: Σύνδεση στην Κονσόλα προγράμματος περιήγησης

Η κονσόλα του προγράμματος περιήγησης ιστού είναι ένα από τα πιο ευρέως χρησιμοποιούμενα εργαλεία για τον εντοπισμό σφαλμάτων εφαρμογών front-end. Το API της κονσόλας παρέχει στους προγραμματιστές τη δυνατότητα αντιμετώπισης σφαλμάτων και μηνυμάτων καταγραφής.

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

Γιατί είναι σημαντική η καταγραφή;

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

Σχετικά: 6 πλαίσια JavaScript που αξίζει να μάθετε

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

Υπόδειξη : Η κονσόλα του προγράμματος περιήγησής σας μπορεί να εκτελέσει όλο τον κώδικα που περιγράφεται σε αυτόν τον οδηγό. Τύπος F12 στο πληκτρολόγιό σας για να ανοίξετε τα εργαλεία προγραμματιστών του προγράμματος περιήγησης στο Chrome ή τον Firefox.

Καταγραφή συμβολοσειρών μηνυμάτων

Μία από τις πιο συνηθισμένες μεθόδους κονσόλας είναι console.log () Το Απλώς εξάγει ένα μήνυμα συμβολοσειράς ή κάποια τιμή στην κονσόλα ιστού. Για απλές τιμές ή μηνύματα συμβολοσειράς, το console.log () η μέθοδος είναι ίσως η καλύτερη επιλογή για χρήση.

πώς να βρείτε κουτάβια προς πώληση

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

console.log(`Hello World`);

Ένα άλλο ιδιαίτερο χαρακτηριστικό του console.log () μέθοδος είναι η δυνατότητα εκτύπωσης της εξόδου στοιχείων DOM ή της δομής ενός μέρους ενός ιστότοπου, για παράδειγμα, για την έξοδο της δομής του στοιχείου σώματος και ό, τι υπάρχει μέσα σε αυτό, χρησιμοποιήστε τα ακόλουθα.

console.log(document.body)

Η έξοδος είναι μια συλλογή στοιχείων DOM ως δέντρο HTML.

Καταγραφή διαδραστικών αντικειμένων JavaScript

ο console.dir () η μέθοδος χρησιμοποιείται για την καταγραφή διαδραστικών ιδιοτήτων αντικειμένων JavaScript. Για παράδειγμα, μπορείτε να το χρησιμοποιήσετε για να προβάλετε τα στοιχεία DOM σε μια ιστοσελίδα.

Η τυπική έξοδος του console.dir () η μέθοδος αποτελείται από όλες τις ιδιότητες του καθορισμένου αντικειμένου JavaScript σε μορφή JSON. Χρησιμοποιήστε την παρακάτω μέθοδο για να εκτυπώσετε τις ιδιότητες όλων των στοιχείων στο σώμα μιας σελίδας HTML:

console.dir(document.body)

Αξιολόγηση εκφράσεων

Μπορεί να είστε εξοικειωμένοι με τις μεθόδους επιβεβαίωσης από τη δοκιμή μονάδας - καλά console.assert () η μέθοδος λειτουργεί με παρόμοιο τρόπο. Χρησιμοποιήστε το console.assert () μέθοδος για την αξιολόγηση μιας έκφρασης ή συνθήκης.

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

let ageLimit = 18;  
let yourAge = 12;  
const assertFailMessage = 'You have to be older than 18 years of age';  
  
console.assert( yourAge > ageLimit, assertFailMessage);

Ο παραπάνω ισχυρισμός αποτυγχάνει και ένα μήνυμα σφάλματος εκτυπώνεται ανάλογα.

Καταγραφή δεδομένων σε πίνακες

Χρησιμοποιήστε το console.table () μέθοδος για την εμφάνιση δεδομένων σε μορφή πίνακα. Οι καλοί υποψήφιοι για εμφάνιση σε μορφή πίνακα περιλαμβάνουν πίνακες ή δεδομένα αντικειμένων.

Σημείωση : Ορισμένα προγράμματα περιήγησης, όπως ο Firefox, έχουν μέγιστο όριο 1.000 σειρών που μπορούν να εμφανιστούν με το console.table () μέθοδος.

Υποθέτοντας ότι έχετε την ακόλουθη σειρά αντικειμένων αυτοκινήτου:

 let cars = [  
 {'color':'purple', 'type':'minivan', 'registration': new Date('2021-04-05')},  
 {'color': 'red', 'type':'minivan', 'registration': new Date ('2021-06-10')}  
]

Μπορείτε να εμφανίσετε τον παραπάνω πίνακα σε έναν πίνακα χρησιμοποιώντας την παρακάτω μέθοδο:

console.table(cars);

Καταγραφή μηνυμάτων ανά κατηγορία

Τα μηνύματα της κονσόλας του προγράμματος περιήγησης ιστού κατηγοριοποιούνται κυρίως σε τρεις ομάδες: σφάλμα, προειδοποίηση και πληροφορίες.

Σφάλματα

Για να εκτυπώσετε συγκεκριμένα μηνύματα σφάλματος στην κονσόλα χρησιμοποιώντας το console.error () μέθοδο, τα μηνύματα που σχετίζονται με σφάλματα εμφανίζονται με κόκκινη γραμματοσειρά.

console.error('error message');

Προειδοποιήσεις

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

console.warn('warning message');

Πληροφορίες

Για να εκτυπώσετε γενικές πληροφορίες στην κονσόλα, χρησιμοποιήστε το console.info () μέθοδος:

console.info('general info message')

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

Ροή προγράμματος ανίχνευσης

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

Για να δείτε το console.trace () μέθοδος σε δράση, μπορείτε να δημιουργήσετε τρεις συναρτήσεις (όπως παρακάτω) και να τοποθετήσετε ένα ίχνος στοίβας σε μία από τις συναρτήσεις.

function functionOne(){  
 functionTwo()  
}  
function functionTwo(){  
 functionThree()  
}  
function functionThree(){  
 console.trace()  
}

Στην κονσόλα του προγράμματος περιήγησης, καλέστε ή ενεργοποιήστε functionOne () και θα λάβετε ένα ίχνος στοίβας των κλήσεων λειτουργίας που εκτυπώνονται στο Last In First Out Order (LIFO) επειδή είναι μια στοίβα.

Εκτέλεση προγράμματος χρονισμού

Για να καθορίσετε πόσο χρόνο χρειάζεται για να εκτελεστεί μια λειτουργία στο πρόγραμμά σας, μπορείτε να χρησιμοποιήσετε το console.time () μέθοδος. console.time () χρησιμοποιείται συνήθως μαζί με το console.timeEnd () μέθοδο όπου το τελευταίο χρησιμοποιείται για να τερματίσει το χρονόμετρο.

Μπορείτε να έχετε έως και 10.000 χρονοδιακόπτες ανά ιστοσελίδα, τονίζοντας τη σημασία της σωστής επισήμανσης των χρονομετρητών σας.

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

console.time('loop timer 2');  
for(i=1; i<50001; i++){  
}  
console.timeEnd('loop timer 2');

Αρίθμηση

ο console.count () Η μέθοδος χρησιμοποιείται για να παρακολουθεί τον αριθμό των φορών που έχει κληθεί μια συνάρτηση ή κάποιο κομμάτι κώδικα σε ένα πρόγραμμα. Για παράδειγμα, μπορούμε να παρακολουθούμε πόσες φορές έχει εκτελεστεί ένας βρόχος for ως εξής:

 for(i=0; i<4; i++ ){  
 console.count();  
}

Ομαδοποίηση μηνυμάτων καταγραφής

Ακριβώς όπως η μέθοδος χρονοδιακόπτη, το console.group () , και console.groupEnd () οι μέθοδοι χρησιμοποιούνται συνήθως σε ζεύγη.

Η μέθοδος ομάδας σας βοηθά να οργανώσετε καλύτερα τα μηνύματα καταγραφής σας. Για παράδειγμα, μπορούμε να δημιουργήσουμε μια ομάδα προειδοποιητικών μηνυμάτων με τις προειδοποιήσεις ετικέτας ως εξής.

console.group('warnings')  
 console.warn('another warning');  
 console.warn('This is a warning')  
console.groupEnd()

Τα δύο μηνύματα στην ομάδα προειδοποίησης κατηγοριοποιούνται οπτικά όπως φαίνεται στην παρακάτω έξοδο.

Εκκαθάριση της κονσόλας

Τελευταίο αλλά όχι λιγότερο σημαντικό, εδώ είναι διάφοροι τρόποι με τους οποίους μπορείτε να διαγράψετε μηνύματα καταγραφής στην κονσόλα του προγράμματος περιήγησής σας.

Χρησιμοποιήστε το console.clear () μέθοδος ως εξής.

console.clear()

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

Google Chrome : Ctrl + L

Firefox : Ctrl + Shift + L

Χρήση της Κονσόλας προγράμματος περιήγησης έως το πλήρες

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

πώς να εκκινήσετε το iso από το usb

Κάντε μια επικύρωση CAPTCHA από το επόμενο έργο σας και δοκιμάστε τις νέες σας ικανότητες εντοπισμού σφαλμάτων!

Μερίδιο Μερίδιο Τιτίβισμα ΗΛΕΚΤΡΟΝΙΚΗ ΔΙΕΥΘΥΝΣΗ Δημιουργήστε μια φόρμα επικύρωσης CAPTCHA χρησιμοποιώντας HTML, CSS και JavaScript

Ασφαλίστε τους ιστότοπούς σας με επικύρωση CAPTCHA.

Διαβάστε Επόμενο Σχετικά θέματα

Προγραμματισμός
Ανάπτυξη διαδικτύου
JavaScript

Σχετικά με τον Συγγραφέα Ετοιμος να φύγει(Δημοσιεύθηκαν 36 άρθρα)

Ο Mwiza αναπτύσσει λογισμικό στο επάγγελμα και γράφει εκτενώς σε Linux και προγραμματισμό front-end. Μερικά από τα ενδιαφέροντά του περιλαμβάνουν ιστορία, οικονομία, πολιτική & αρχιτεκτονική επιχειρήσεων.

Περισσότερα από τον Mwiza Kumwenda

Εγγραφείτε στο newsletter μας

Εγγραφείτε στο ενημερωτικό μας δελτίο για τεχνικές συμβουλές, κριτικές, δωρεάν ebooks και αποκλειστικές προσφορές!

Κάντε κλικ εδώ για εγγραφή