Σε αυτό το οδηγό σου δείχνω πώς να εντοπίσεις ένα σφάλμα όπου η πρόσθεση δύο αριθμών δεν επιστρέφει το αναμενόμενο αποτέλεσμα. Με αυτό το πρακτικό άσκηση χρησιμοποιούνται τα Εργαλεία Ανάπτυξης Chrome για να αναλύσεις τον κώδικα και να βρεις γρήγορα το σφάλμα. Μέσω αυτού του οδηγού θα κατανοήσεις πόσο σημαντικό είναι το Debugging και ποια εργαλεία μπορούν να σε βοηθήσουν.
Σημαντικότερα Συμπεράσματα
- Χρησιμοποιώντας τα Εργαλεία Ανάπτυξης Chrome μπορείς εύκολα να αναλύσεις την κατάσταση της εφαρμογής σου.
- Ο έλεγχος τύπου στο TypeScript βοηθάει στην αναγνώριση σφαλμάτων εγκαίρως πριν τρέξει ο κώδικας.
- Η σημασία των τύπων και η σωστή χειρισμός των τιμών είναι κρίσιμα για την αποφυγή σφαλμάτων.
Οδηγίες Βήμα-προς-Βήμα
Αρχικά, ξεκινάς τον περιηγητή Chrome σου και φορτώνεις την ιστοσελίδα με την εφαρμογή TypeScript που υλοποιεί τον εξομοιωτή αριθμομηχανής. Το έργο θα πρέπει ήδη να τρέχει σε έναν διακομιστή, ώστε να μπορείς να ανοίξεις το HTML αρχείο στον Chrome.
Στη συνέχεια, βεβαιώσου ότι υπάρχουν και τα δύο αρχεία TypeScript και JavaScript (αρχείο μεταγλωττισμένο) στο έργο σου. Το αρχείο TypeScript περιλαμβάνει σχόλια και πληροφορίες τύπου, ενώ τα μεταγλωττισμένα αρχεία JavaScript δεν περιλαμβάνουν αυτές τις πληροφορίες.
Ανοίγεις τα Εργαλεία Ανάπτυξης Chrome , κάνοντας δεξί κλικ στη σελίδα και επιλέγοντας "Εξέταση" ή πατώντας F12. Πηγαίνεις στην καρτέλα «Στοιχεία», για να δεις τον HTML κώδικα της σελίδας και να βεβαιωθείς ότι τα πεδία εισόδου και το κουμπί είναι εγκατεστημένα σωστά.
Η αριθμομηχανή έχει δύο πεδία εισόδου για τους αριθμούς και ένα κουμπί για να προκαλέσει την πρόσθεση. Μπορείς να εισάγεις μερικές δοκιμαστικές τιμές και να πατήσεις το κουμπί. Θα διαπιστώσεις ότι το άθροισμα δεν υπολογίζεται σωστά· πιθανόν να λάβεις 22 αντί για τα αναμενόμενα 4. Για να διευκρινίσεις αυτήν τη διαφορά, χρειάζεται το Debugging.
Τώρα θέτεις ένα breakpoint στον κώδικά σου, κάνοντας κλικ στη λειτουργία του event listener. Αυτό γίνεται στην ενότητα που είναι υπεύθυνη για την πρόσθεση. Όταν εισάγεις τις τιμές στα πεδία εισόδου και πατάς το κουμπί, πρέπει να μπεις στον Debugger.
Στην προβολή του Debugger μπορείς να ελέγξεις τις μεταβλητές. Είναι σημαντικό να ελέγξεις το εσωτερικό κείμενο και τις τιμές των πεδίων εισόδου για να δεις ποιες τιμές περνιούν. Θα διαπιστώσεις ότι η τιμή των πεδίων εισόδου είναι τύπου Συμβολοσειράς, και όχι Αριθμός, όπως το περίμενες.
Αυτή η σύγκρουση τύπου οδηγεί σε εσφαλμένη λειτουργία της πρόσθεσης. Αντί να προσθέσεις τους αριθμούς, τους συνενώνει. Ένα παράδειγμα θα ήταν: εισαγωγή των "1" και "6" δίνει ως αποτέλεσμα "16", που δεν είναι το επιθυμητό αποτέλεσμα. Αυτό το λογικό σφάλμα είναι εύκολο να ανιχνευθεί, αλλά σημαντικό να εντοπιστεί.
Τώρα πρέπει να διορθώσεις το σφάλμα. Επιστρέφεις στο αρχείο TypeScript σου στο Visual Studio Code και αλλάζεις τον τρόπο που χειρίζεσαι τις τιμές. Αντί για n1.value + n2.value, θα πρέπει να χρησιμοποιήσεις n1.valueAsNumber + n2.valueAsNumber για να διασφαλίσεις ότι είναι αριθμοί και όχι συμβολοσειρές.
Μετά την καταχώριση της αλλαγής, αποθηκεύεις το αρχείο και ανανεώνεις τη σελίδα στον Chrome. Τώρα πρέπει να ελέγξεις ξανά τις τιμές στα πεδία εισόδου πριν τις προσθέσεις. Αυτή τη φορά, το σωστό άθροισμα δύο αριθμών θα εμφανιστεί.
Αν όλα διορθώθηκαν σωστά, τώρα πατώντας το κουμπί αναγράφεται το άθροισμα ως "10", εάν για παράδειγμα εισάγεις τις τιμές "2" και "8". Έχεις επιτύχει την αντιμετώπιση του σφάλματος και έχεις μάθει πόσο σημαντική είναι η τυπικότητα στο TypeScript.
Επιπλέον, μπορείς να επωφεληθείς από τα πλεονεκτήματα του TypeScript, καθορίζοντας σαφώς τους τύπους των μεταβλητών. Αυτό μειώνει σημαντικά τη δυνατότητα εμφάνισης σφαλμάτων κατά την εκτέλεση. Να είσαι πάντοτε προσεκτικός με τους τύπους που ορίζεις, για να διευκολύνεις το Debugging.
Τελικά, είδες και εσύ πόσο σημαντικά είναι τα εργαλεία ανάπτυξης του Chrome για την ανάλυση του κώδικα και τη συμπεριφορά μιας εφαρμογής σε πραγματικό χρόνο. Η αποσφαλμάτωση με αυτά τα εργαλεία μπορεί να συμβάλει σημαντικά στη βελτίωση των διαδικασιών ανάπτυξής σου.
Περίληψη
Σε αυτό το εγχειρίδιο μάθατε πώς να αποσφαλματώσετε μια απλή εφαρμογή TypeScript. Επικεντρωθήκαμε στη χρήση των εργαλείων ανάπτυξης του Chrome λαμβάνοντας υπόψη τα τύπα στην TypeScript. Τελικά, αντιλήφθηκες τη σημασία της εγκατάλειψης των σφαλμάτων από νωρίς και τη σημασία του ελέγχου τύπων στην TypeScript.
Συχνές Ερωτήσεις
Ποιο ήταν το κύριο σφάλμα που βρέθηκε στην εφαρμογή TypeScript;Το κύριο σφάλμα ήταν ότι χρησιμοποιήθηκαν συμβολοσειρές αντί αριθμών, προκαλώντας λανθασμένο υπολογισμό.
Ποιο ρόλο έχουν τα εργαλεία ανάπτυξης του Chrome στην αποσφαλμάτωση;Τα εργαλεία ανάπτυξης του Chrome βοηθούν στην ανάλυση του κώδικα σε πραγματικό χρόνο και στον εντοπισμό σφαλμάτων στη ροή του προγράμματος.
Πώς μπορούν να αποφευχθούν τα σφάλματα στην TypeScript;Με τον καθορισμό τύπων στην TypeScript μπορούν να μειωθούν τα σφάλματα κατά την εκτέλεση και να εξασφαλιστεί ότι χρησιμοποιούνται μόνο οι σωστοί τύποι δεδομένων.
