49. JavaScript Debugging

JS Debugging


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


Αποσφαλμάτωση (Debugging) κώδικα

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

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

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

Η αναζήτηση για (και η επίλυση) σφαλμάτων στον κώδικα προγραμματισμού καλείται code debugging .


JavaScript Debuggers

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

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

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

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


Η μέθοδος 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>

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

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


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

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

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

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


Η λέξη-κλειδί debugger 

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

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

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

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

Παράδειγμα

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

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


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

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

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

Chrome

  • Ανοίξτε το πρόγραμμα περιήγησης.
  • Από το μενού, επιλέξτε “Περισσότερα εργαλεία”.
  • Από τα εργαλεία, επιλέξτε “Εργαλεία για προγραμματιστές”.
  • Τέλος, επιλέξτε Κονσόλα.

Firefox

  • Ανοίξτε το πρόγραμμα περιήγησης.
  • Από το μενού, επιλέξτε “Web Developer”.
  • Τέλος, επιλέξτε “Web Console”.

Edge

  • Ανοίξτε το πρόγραμμα περιήγησης.
  • Από το μενού, επιλέξτε “Εργαλεία προγραμματιστή”.
  • Τέλος, επιλέξτε “Κονσόλα”.

Opera

  • Ανοίξτε το πρόγραμμα περιήγησης.
  • Από το μενού, επιλέξτε “Προγραμματιστής”.
  • Από το “Προγραμματιστής”, επιλέξτε “Εργαλεία προγραμματιστή”.
  • Τέλος, επιλέξτε “Κονσόλα”.

Safari

  • Μεταβείτε στο Safari, Προτιμήσεις, Προηγμένες στο κύριο μενού.
  • Επιλέξτε “Ενεργοποίηση εμφάνισης αναπτυξιακού μενού στη γραμμή μενού”.
  • Όταν εμφανιστεί η νέα επιλογή “Ανάπτυξη” στο μενού:
    Επιλέξτε “Εμφάνιση κονσόλας σφάλματος”.

Το ήξερες?

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


Days
Hours
Minutes

49. JavaScript Debugging

Κοινοποίηση

Share on facebook
Share on twitter

Ακολουθήστε μας

Αρέσει σε %d bloggers: