Εντοπισμός σφαλμάτων JavaScript


Πίνακας περιεχομένων

    Εμφάνιση πίνακα περιεχομένων


Σφάλματα μπορεί (θα) συμβαίνουν, κάθε φορά που γράφετε κάποιο νέο κώδικα υπολογιστή.


Εντοπισμός σφαλμάτων κώδικα

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

Πολλά από αυτά τα σφάλματα είναι δύσκολο να διαγνωστούν.

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

Η αναζήτηση (και η διόρθωση) σφαλμάτων στον κώδικα προγραμματισμού ονομάζεται εντοπισμός σφαλμάτων κώδικα.


JavaScript Debuggers

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

Τα ενσωματωμένα προγράμματα εντοπισμού σφαλμάτων μπορούν να ενεργοποιηθούν και να απενεργοποιηθούν, αναγκάζοντας τα σφάλματα να αναφέρονται ο χρήστης.

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

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


Η μέθοδος console.log().

Εάν το πρόγραμμα περιήγησής σας υποστηρίζει εντοπισμό σφαλμάτων, μπορείτε να χρησιμοποιήσετε το console.log() για να εμφάνιση τιμών JavaScript στο παράθυρο του προγράμματος εντοπισμού σφαλμάτων:

Παράδειγμα

<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>

<script>
a = 5;
b = 6;
c = a + b;
console.log(c);
</script>

</body>
</html>

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<body>

<h2>My First Web Page</h2>

<p>Activate debugging in your browser (Chrome, IE, Firefox) with F12, and select "Console" in the debugger menu.</p>

<script>
a = 5;
b = 6;
c = a + b;
console.log(c);
</script>

</body>
</html> 

Συμβουλή: Διαβάστε περισσότερα σχετικά με τη μέθοδο console.log() στην Αναφορά κονσόλας JavaScript.


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

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

Σε κάθε σημείο διακοπής, η JavaScript θα σταματήσει να εκτελείται και θα σας αφήσει να εξετάσετε Τιμές JavaScript.

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



Η λέξη-κλειδί εντοπισμού σφαλμάτων

Η λέξη-κλειδί debugger σταματά την εκτέλεση της JavaScript, και καλεί (αν υπάρχει) τη λειτουργία εντοπισμού σφαλμάτων.

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

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

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

Παράδειγμα

let x = 15 * 5;
debugger;
document.getElementById("demo").innerHTML = x;

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Debugger</h2>

<p id="demo"></p>

<p>With the debugger turned on, the code below should stop executing before it executes the third line.</p>

<script>
let x = 15 * 5;
debugger;
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

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

Κανονικά, ενεργοποιείτε τον εντοπισμό σφαλμάτων στο πρόγραμμα περιήγησής σας με το F12 και επιλέγετε "Κονσόλα" στο μενού εντοπισμού σφαλμάτων.

Διαφορετικά, ακολουθήστε αυτά τα βήματα:

Χρώμιο

  • Ανοίξτε το πρόγραμμα περιήγησης.

  • Από το μενού, επιλέξτε "Περισσότερα εργαλεία".

  • Από τα εργαλεία, επιλέξτε "Εργαλεία προγραμματιστή".

  • Τέλος, επιλέξτε Κονσόλα.

Firefox

  • Ανοίξτε το πρόγραμμα περιήγησης.

  • Από το μενού, επιλέξτε "Web Developer".

  • Τέλος, επιλέξτε "Web Console".

Ακρη

  • Ανοίξτε το πρόγραμμα περιήγησης.

  • Από το μενού, επιλέξτε "Εργαλεία προγραμματιστή".

  • Τέλος, επιλέξτε «Κονσόλα».

ΛΥΡΙΚΗ ΣΚΗΝΗ

  • Ανοίξτε το πρόγραμμα περιήγησης.

  • Από το μενού, επιλέξτε "Προγραμματιστής".

  • Από το "Developer", επιλέξτε "Developer tools".

  • Τέλος, επιλέξτε «Κονσόλα».

Σαφάρι

  • Μεταβείτε στο Safari, Preferences, Advanced στο κύριο μενού.

  • Επιλέξτε "Ενεργοποίηση εμφάνισης μενού ανάπτυξης στη γραμμή μενού".

  • Όταν εμφανιστεί η νέα επιλογή "Ανάπτυξη" στο μενού:
    Επιλέξτε "Εμφάνιση σφάλματος Κονσόλα".


Το ήξερες?

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