Εντοπισμός σφαλμάτων JavaScript στο πρόγραμμα περιήγησης (με παραδείγματα)

Σε αυτό το σεμινάριο, θα μάθετε για τον εντοπισμό σφαλμάτων σε JavaScript με τη βοήθεια παραδειγμάτων.

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

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

Υπάρχουν διάφοροι τρόποι με τους οποίους μπορείτε να κάνετε εντοπισμό σφαλμάτων στο πρόγραμμα JavaScript.

1. Χρήση του console.log ()

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

Η σύνταξη είναι:

 console.log(object/message);

Θα μπορούσατε να περάσετε το αντικείμενο console.log()ή απλά μια συμβολοσειρά μηνυμάτων.

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

 let a = 5; let b = 'asdf'; let c = a + b; // if you want to see the value of c console.log(c); // then do other operations if(c) ( // do something )

Η χρήση console.log()μεθόδου στο πρόγραμμα περιήγησης ανοίγει την τιμή στο παράθυρο εντοπισμού σφαλμάτων.

Εργασία της μεθόδου console.log () στο πρόγραμμα περιήγησης

Αυτό console.log()δεν είναι συγκεκριμένο για προγράμματα περιήγησης. Είναι επίσης διαθέσιμο σε άλλες μηχανές JavaScript.

2. Χρησιμοποιώντας το πρόγραμμα εντοπισμού σφαλμάτων

Η debuggerλέξη-κλειδί σταματά την εκτέλεση του κώδικα και καλεί τη λειτουργία εντοπισμού σφαλμάτων.

Το debuggerείναι διαθέσιμο σε όλες σχεδόν τις μηχανές JavaScript.

Ας δούμε ένα παράδειγμα,

 let a = 6; let b = 9; let c = a * b; // stops the execution debugger; console.log(c);

Ας δούμε πώς μπορείτε να χρησιμοποιήσετε το πρόγραμμα εντοπισμού σφαλμάτων σε ένα πρόγραμμα περιήγησης Chrome.

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

Το παραπάνω πρόγραμμα διακόπτει την εκτέλεση του προγράμματος στη γραμμή που περιέχει το debugger.

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

Ο υπόλοιπος κώδικας θα εκτελεστεί όταν συνεχίσετε το σενάριο πατώντας το play στην κονσόλα.

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

3. Ρύθμιση σημείων διακοπής

Μπορείτε να ορίσετε σημεία διακοπής για κώδικα JavaScript στο παράθυρο εντοπισμού σφαλμάτων.

Η JavaScript θα σταματήσει να εκτελείται σε κάθε σημείο διακοπής και σας επιτρέπει να εξετάσετε τις τιμές. Στη συνέχεια, μπορείτε να συνεχίσετε την εκτέλεση του κώδικα.

Ας δούμε ένα παράδειγμα, ορίζοντας ένα σημείο διακοπής στο πρόγραμμα περιήγησης Chrome.

Εργασία σημείων διακοπής στο πρόγραμμα περιήγησης

Μπορείτε να ορίσετε σημεία διακοπής μέσω του εργαλείου προγραμματιστών οπουδήποτε στον κώδικα.

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

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

Όλα τα καλά IDE παρέχουν έναν τρόπο για τον εντοπισμό σφαλμάτων του κώδικα. Η διαδικασία εντοπισμού σφαλμάτων μπορεί να είναι λίγο διαφορετική, αλλά η ιδέα πίσω από τον εντοπισμό σφαλμάτων είναι η ίδια.

ενδιαφέροντα άρθρα...