Σε αυτό τον οδηγό θα μάθετε πώς να κάνετε debug JavaScript κώδικα στα Chrome Developer Tools και πώς να τοποθετήσετε breakpoints. Το Debugging είναι μία από τις βασικές δεξιότητες στη διαδικασία ανάπτυξης λογισμικού. Με τα Developer Tools μπορείτε να αναλύσετε την εκτέλεση του κώδικά σας, να παρακολουθείτε τιμές μεταβλητών και να βρίσκετε σφάλματα πριν χρησιμοποιήσετε τον κώδικά σας στην παραγωγή.
Η χρήση των Developer Tools, ειδικά η τοποθέτηση και χρήση των breakpoints, σας επιτρέπει να παρακολουθείτε προσεκτικά την κατάσταση της εφαρμογής σας και να εφαρμόζετε ισχυρές τεχνικές debug. Θα προχωρήσουμε βήμα-βήμα μέσα από τη διαδικασία, έτσι ώστε να είστε σε θέση να χρησιμοποιήσετε αυτές τις σημαντικές δεξιότητες ανεξάρτητα.
Σημαντικά Συμπεράσματα
- Τα Chrome Developer Tools προσφέρουν εκτεταμένες λειτουργίες για το Debugging του JavaScript.
- Τα breakpoints σάς βοηθούν να σταματήσετε την εκτέλεση του κώδικα για να ελέγξετε την κατάσταση της εφαρμογής.
- Με τη σωστή χρήση των εργαλείων μπορείτε να εντοπίζετε και να διορθώνετε σφάλματα γρήγορα.
Οδηγίες Βήμα-προς-Βήμα
Βήμα 1: Πρόσβαση στα Developer Tools
Αρχικά πρέπει να ανοίξετε τα Chrome Developer Tools. Μπορείτε να τα βρείτε κάνοντας δεξί κλικ στη σελίδα και επιλέγοντας "Επιθεώρηση" ή χρησιμοποιώντας τον συνδυασμό πλήκτρων Στργρ + Shift + I (Windows) ή Cmd + Opt + I (Mac). Αυτό ανοίγει τα Developer Tools στη δεξιά πλευρά του προγράμματος περιήγησής σας.
Βήμα 2: Πλοήγηση στην καρτέλα "Sources"
Στα Developer Tools θα βρείτε πολλές καρτέλες στο επάνω μέρος. Κάντε κλικ στην καρτέλα "Sources" για να έχετε πρόσβαση στα scripts και στη δομή της εφαρμογής σας. Εκεί μπορείτε να δείτε όλα τα φορτωμένα scripts και πόρους που χρησιμοποιεί η ιστοσελίδα σας.
Βήμα 3: Επιλογή αρχείου για το Debugging
Στην καρτέλα Sources μπορείτε να δείτε τα scripts που έχουν φορτωθεί από τη σελίδα σας. Βρείτε το αρχείο JavaScript που θέλετε να κάνετε debug. Βεβαιωθείτε ότι επιλέγετε το σωστό αρχείο, ειδικά αν υπάρχουν πολλές εκδόσεις ενός αρχείου, όπως για παράδειγμα τα sourcemaps.
Βήμα 4: Τοποθέτηση ενός Breakpoint
Για να τοποθετήσετε ένα breakpoint, κάντε απλά κλικ στον αριθμό γραμμής αριστερά από τον κώδικα όπου θέλετε να διακόψετε την εκτέλεση. Θα εμφανιστεί ένα μπλε σημείο που υποδεικνύει ότι το breakpoint έχει τοποθετηθεί με επιτυχία. Αυτό σας βοηθά να διακόψετε την εκτέλεση σε αυτό το σημείο και να επιθεωρήσετε την κατάσταση των μεταβλητών.
Βήμα 5: Επαναφορτώστε την Σελίδα
Για να φτάσετε το breakpoint, επαναφορτώστε τη σελίδα. Αυτό μπορείτε να το κάνετε πατώντας F5 ή κάνοντας κλικ στο κουμπί Ανανέωσης στη γραμμή διεύθυνσης. Η εκτέλεση θα πρέπει να διακοπεί στο σημείο όπου έχετε τοποθετήσει το breakpoint.
Βήμα 6: Επιθεωρήστε την Εκτέλεση
Αφού η εκτέλεση έχει διακοπεί στο breakpoint σας, μπορείτε να εξετάσετε την τρέχουσα κατάσταση της εφαρμογής σας. Στη δεξιά πλευρά μπορείτε να δείτε τιμές μεταβλητών, τη στοίβα κλήσεων και το τρέχον πεδίο εφαρμογής. Αυτές οι πληροφορίες είναι κρίσιμες για την κατανόηση του τι συμβαίνει στην εφαρμογή σας.
Βήμα 7: Συνέχιση ή Εξέταση Μεταβλητών
Μπορείτε να αφήσετε το πρόγραμμα να συνεχίσει μέχρι το επόμενο breakpoint ή μπορείτε να περάσετε ανά γραμμή. Για να συνεχίσετε μέχρι το επόμενο breakpoint, απλά κάντε κλικ στο κουμπί "Αναπαραγωγή". Εάν θέλετε να μεταβείτε ανά γραμμή, μπορείτε να χρησιμοποιήσετε τα "Step over" ή "Step into" για πιο λεπτομερή έλεγχο.
Βήμα 8: Τροποποιήσεις Μεταβλητών
Αν επιθυμείτε να τροποποιήσετε την τιμή μιας μεταβλητής, μπορείτε να το κάνετε απευθείας στην περιοχή Scope. Κάντε κλικ στη μεταβλητή, αλλάξτε την τιμή και κάντε κλικ ξανά στο "Αναπαραγωγή". Αυτό σας βοηθάει να δοκιμάσετε πώς διαφορετικές τιμές επηρεάζουν τη συμπεριφορά της εφαρμογής.
Βήμα 9: Αφαίρεση Breakpoints αν απαιτείται
Εάν δεν χρειάζεστε πλέον τα breakpoints ή θέλετε να τα αφαιρέσετε όλα ταυτόχρονα, απλά κάντε δεξί κλικ στον αριθμό γραμμής και επιλέξτε "Αφαίρεση Breakpoint". Εναλλακτικά, έχετε τη δυνατότητα να αφαιρέσετε όλα τα breakpoints μαζικά εάν έχετε τοποθετήσει πολλά.
Βήμα 10: Χρησιμοποίησε το Call Stack και τις επιλογές αποσφαλμάτωσης
Χρησιμοποίησε την προβολή του Call Stack για να δεις από πού κλήθηκε η τρέχουσα λειτουργία. Αυτό σε βοηθά να ανακατασκευάσεις τη διαδρομή εκτέλεσης της εφαρμογής. Το Chrome Developer Tools παρέχει επίσης πολλές χρήσιμες λειτουργίες όπως το "Παύση σε Εξαιρέσεις" για την αναγνώριση σφαλμάτων και την απόκτηση βαθύτερης κατανόησης των προβλημάτων.
Σύνοψη
Σε αυτό τον οδηγό έχεις μάθει πώς να χρησιμοποιήσεις αποτελεσματικά τα Chrome Developer Tools για την αποσφαλμάτωση του JavaScript. Η διαδικασία περιλαμβάνει τον ορισμό σημείων ακινητοποίησης, την εξέταση μεταβλητών και το stack κλήσεων καθώς επίσης και την τροποποίηση μεταβλητών κατά τη διάρκεια της εκτέλεσης. Με αυτές τις δεξιότητες είσαι καλύτερα εξοπλισμένος για την αναγνώριση και την επίλυση σφαλμάτων.
Συχνές Ερωτήσεις
Πώς μπορώ να ορίσω ένα σημείο ακινητοποίησης στο αρχείο μου JavaScript;Απλά κάνε κλικ στον αριθμό γραμμής στην επιθυμητή γραμμή του κώδικά σου.
Τι πρέπει να κάνω αν το σημείο της ακινητοποίησης μου δεν εκτελείται;Ελέγξτε εάν το αρχείο στο οποίο έχει οριστεί το σημείο ακινητοποίησης φορτώνεται πραγματικά και βεβαιωθείτε ότι καμία μεταβλητή δεν αντικαθίσταται κατά τη φόρτωση.
Πώς μπορώ να αφαιρέσω όλα τα σημεία ακινητοποίησης ταυτόχρονα;Δεξί κλικ στον αριθμό γραμμής ενός σημείου ακινητοποίησης και επίλεξε το "Καταργησή όλων των σημείων ακινητοποίησης".
Τι είναι το Call Stack;Η Ου-Ου Στοίβα δείχνει την παρακολουθησιμότητα της συνάρτησης στη στοίβα κλήσεων, ώστε να μπορείτε να δείτε πού κλήθηκε η συνάρτηση σας.
Πώς μπορώ να αλλάξω την τιμή μιας μεταβλητής κατά την αποσφαλμάτωση;Κάνε κλικ στη μεταβλητή στην περιοχή Scope, αλλάξε την τιμή και κάνε στη συνέχεια κλικ στο "Εκτέ λεση" για να συνεχίσει η εκτέλεση με τη νέα τιμή.
