Πώς να κάνετε debug σε εφαρμογή φτιαγμένη με AI: μια πρακτική μέθοδος

Για να κάνετε debug σε εφαρμογή φτιαγμένη με AI, πρώτα προκαλέστε ξανά το σφάλμα σκόπιμα, και μετά συλλέξτε τεκμήρια — τα ακριβή βήματα, το μήνυμα σφάλματος, και τι δείχνουν η κονσόλα και η καρτέλα δικτύου του browser — και δώστε τα στο AI ως «έκανα Χ, περίμενα Υ, πήρα Ζ». Αν μια διόρθωση επιδεινώνει τα πράγματα, επιστρέψτε στην τελευταία έκδοση που δούλευε αντί να στοιβάζετε διορθώσεις πάνω της. Δεν χρειάζεται να διαβάσετε τον κώδικα για να τα κάνετε αυτά καλά.

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

Ο κύκλος του debugging

Κάθε διόρθωση σφάλματος, είτε την κάνει άνθρωπος είτε AI, ακολουθεί τον ίδιο κύκλο:

1. Αναπαραγωγή — κάντε το σφάλμα να συμβαίνει αξιόπιστα.
2. Παρατήρηση — συγκεντρώστε το μήνυμα σφάλματος και τι έκανε η εφαρμογή.
3. Περιγραφή — δώστε στο AI ακριβή βήματα, αναμενόμενο αποτέλεσμα και πραγματικό αποτέλεσμα.
4. Διόρθωση — αφήστε το AI να αλλάξει ένα πράγμα.
5. Επαλήθευση — επαναλάβετε τα ακριβή βήματα και βεβαιωθείτε ότι διορθώθηκε και ότι τίποτα κοντινό δεν χάλασε.
6. Rollback αν χρειαστεί — αν χειροτέρεψε, αναιρέστε και δοκιμάστε ξανά με καλύτερες πληροφορίες.

Ο περισσότερος χρόνος που χάνεται σε εφαρμογές φτιαγμένες με AI προέρχεται από την παράλειψη των βημάτων 1, 2 και 5: το «είναι χαλασμένο», η αποδοχή μιας αλλαγής χωρίς δοκιμή, και μετά ένα ακόμη αίτημα διόρθωσης πάνω σε μια χαλασμένη διόρθωση.

Βήμα 1: Αναπαραγωγή του σφάλματος

Ένα σφάλμα που μπορείτε να προκαλέσετε όποτε θέλετε είναι ήδη μισοδιορθωμένο. Προσπαθήστε να βρείτε το μικρότερο σύνολο βημάτων που το προκαλεί.

Ρωτήστε τον εαυτό σας:

• Συμβαίνει κάθε φορά; Αν μόνο μερικές φορές, τι είναι διαφορετικό όταν συμβαίνει — μια συγκεκριμένη εγγραφή, αργή σύνδεση, αποσύνδεση;
• Συμβαίνει σε κάθε χρήστη; Συνδεθείτε με διαφορετικό λογαριασμό. Πολλά σφάλματα εμφανίζονται μόνο σε νέους χρήστες χωρίς δεδομένα, ή σε χρήστη με διαφορετικό ρόλο.
• Συμβαίνει σε κάθε συσκευή; Δοκιμάστε οθόνη πλάτους κινητού και διαφορετικό browser.
• Ξεκίνησε μετά από συγκεκριμένη αλλαγή; Αν δούλευε χθες, οι τελευταίες αλλαγές είναι οι κύριοι ύποπτοι.

Γράψτε τα βήματα ως σύντομη αριθμημένη λίστα. Θα τα επικολλήσετε αργότερα στην προτροπή.

Βήμα 2: Διαβάστε το μήνυμα σφάλματος

Τα μηνύματα σφάλματος φαίνονται τρομακτικά, αλλά χρειάζεστε μόνο μερικά μέρη τους.

Δεν χρειάζεται να το καταλάβετε· χρειάζεται να το αντιγράψετε ακριβώς. Το «Cannot read properties of undefined (reading 'name')» λέει στο AI ότι ο κώδικας περίμενε κάποια δεδομένα (πιθανώς μια κράτηση ή έναν χρήστη) που δεν υπήρχαν. Μια παράφραση όπως «κάποιο σφάλμα undefined» χάνει αυτή την πληροφορία.

Μερικά συνηθισμένα, μεταφρασμένα περίπου:

• Σφάλματα undefined / null — ο κώδικας περίμενε δεδομένα που δεν ήρθαν. Συχνά μια κατάσταση φόρτωσης ή μια κενή λίστα που ο κώδικας δεν χειρίστηκε.
• 404 Not Found — η σελίδα ή η διεύθυνση API δεν υπάρχει. Συχνά ένα ορθογραφικό λάθος σε διαδρομή ή σύνδεσμος σε σελίδα που μετονομάστηκε.
• 401 Unauthorized / 403 Forbidden — το αίτημα δεν ήταν συνδεδεμένο, ή ο χρήστης δεν έχει δικαίωμα να το κάνει.
• 500 Internal Server Error — ο κώδικας του server κατέρρευσε. Ο πραγματικός λόγος βρίσκεται στα αρχεία καταγραφής του server, όχι στον browser.
• Σφάλματα CORS — ο browser μπλόκαρε αίτημα προς άλλο domain. Συνήθως πρόβλημα ρύθμισης στον server.

Βήμα 3: Χρησιμοποιήστε τα εργαλεία προγραμματιστή του browser

Κάθε desktop browser έχει ενσωματωμένα εργαλεία προγραμματιστή («devtools»). Δείχνουν τι κάνει η σελίδα στο παρασκήνιο. Στο Chrome, Edge και Firefox, κάντε δεξί κλικ οπουδήποτε στη σελίδα και επιλέξτε Inspect, ή πατήστε F12 (Cmd+Option+I σε Mac). Στο Safari, ενεργοποιήστε πρώτα το μενού Develop στις ρυθμίσεις του Safari.

Χρειάζεστε μόνο τρεις καρτέλες.

Console

Η καρτέλα Console εμφανίζει σφάλματα και μηνύματα από τον κώδικα της σελίδας. Τα σφάλματα φαίνονται κόκκινα. Αν ένα κουμπί δεν κάνει τίποτα όταν το πατάτε, η κονσόλα συχνά δείχνει κόκκινο σφάλμα ακριβώς τη στιγμή του κλικ. Αντιγράψτε ολόκληρο το κείμενο του σφάλματος (στους περισσότερους browser, δεξί κλικ για την επιλογή αντιγραφής).

Network

Η καρτέλα Network εμφανίζει κάθε αίτημα που κάνει η σελίδα — φόρτωση δεδομένων, αποθήκευση φόρμας, σύνδεση. Ανοίξτε την, και μετά επαναλάβετε τα βήματα που προκαλούν το σφάλμα.

• Ψάξτε για γραμμές με κόκκινο χρώμα ή κατάσταση 400 και άνω.
• Κάντε κλικ σε αποτυχημένη γραμμή για να δείτε το Response. Ένα σφάλμα server συχνά περιέχει μήνυμα εκεί που είναι πιο χρήσιμο από οτιδήποτε στην οθόνη.
• Σημειώστε το URL του αιτήματος και τον κωδικό κατάστασης — «το POST στο /api/bookings επέστρεψε 500» είναι πολύ χρήσιμη πρόταση να δώσετε στο AI.

Τσεκάρετε το Preserve log αν το σφάλμα αφορά ανανέωση σελίδας ή ανακατεύθυνση, ώστε τα αιτήματα να μην εξαφανίζονται.

Elements

Η καρτέλα Elements (ή Inspector) δείχνει τη δομή και τα στυλ της σελίδας. Είναι πιο χρήσιμη για σφάλματα διάταξης: περάστε το ποντίκι πάνω από ένα στοιχείο για να δείτε το μέγεθος και τα περιθώριά του επισημασμένα. Δεν χρειάζεται να αλλάξετε τίποτα εδώ· αρκεί να πείτε «το footer έχει πλάτος 2.000 pixel στο κινητό και σπρώχνει τη σελίδα στο πλάι».

Βήμα 4: Ελέγξτε τα αρχεία καταγραφής του server

Μερικά σφάλματα συμβαίνουν στον server, όπου ο browser δεν μπορεί να τα δει. Ένα σφάλμα 500 στην καρτέλα δικτύου είναι το κλασικό σημάδι. Τα αρχεία καταγραφής του server — η κειμενική έξοδος του backend καθώς τρέχει — συνήθως περιέχουν το πραγματικό σφάλμα με stack trace (λίστα των συναρτήσεων που έτρεχαν όταν απέτυχε).

Πού τα βρίσκετε εξαρτάται από το εργαλείο σας. Στους περισσότερους AI builders εφαρμογών μπορείτε να ανοίξετε ένα τερματικό ή προβολή καταγραφών για το έργο, ή απλώς να ρωτήσετε το AI: «Έλεγξε τα αρχεία καταγραφής του server για σφάλματα από το τελευταίο αίτημα και πες μου τι απέτυχε».

Βήμα 5: Περιγράψτε το σφάλμα στο AI

Βάλτε όσα μαζέψατε σε αυτή τη μορφή:

Στη σελίδα Bookings, συνδεδεμένος ως μέλος: πάτησα Cancel στην κλάση των 9:00 αύριο. Αναμενόμενο: η κράτηση εξαφανίζεται και η κλάση δείχνει μία ελεύθερη θέση παραπάνω. Πραγματικό: τίποτα δεν αλλάζει στην οθόνη. Η κονσόλα δείχνει TypeError: Cannot read properties of undefined (reading 'id') στο BookingCard.tsx:31, και η καρτέλα δικτύου δείχνει ότι το DELETE /api/bookings/123 επέστρεψε 500. Βρες την αιτία, διόρθωσέ την, και έλεγξε ότι η ακύρωση λειτουργεί για μέλος με μία κράτηση και για μέλος με πολλές.

Γιατί είναι σημαντικό κάθε μέρος:

• Πού και ως ποιος περιορίζει το σφάλμα σε μία οθόνη και έναν ρόλο.
• Ακριβή βήματα επιτρέπουν στο AI να το αναπαράγει.
• Αναμενόμενο έναντι πραγματικού ορίζει τι σημαίνει «διορθώθηκε».
• Το κείμενο σφάλματος και το αποτυχημένο αίτημα δείχνουν κατευθείαν στην αιτία.
• «Έλεγξε ότι…» ζητά από το AI να επαληθεύσει, όχι μόνο να αλλάξει.

Αν το AI έχει προσπαθήσει δύο φορές να διορθώσει και απέτυχε, ζητήστε του να εξηγήσει πριν αλλάξει οτιδήποτε:

Μην αλλάξεις κώδικα ακόμη. Τι νομίζεις ότι προκαλεί αυτό, και ποια στοιχεία το υποστηρίζουν;

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

Βήμα 6: Επαληθεύστε, και μετά ελέγξτε τα γύρω

Όταν το AI λέει ότι το διόρθωσε, επαναλάβετε τα ακριβή βήματα του Βήματος 1. Μετά ελέγξτε τα γύρω πράγματα:

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

Οι αλλαγές του AI μερικές φορές διορθώνουν ένα μονοπάτι και χαλάνε αθόρυβα κάποιο άλλο. Ένας έλεγχος δύο λεπτών τώρα γλιτώνει μια μπερδεμένη ώρα αργότερα.

Βήμα 7: Κάντε rollback αντί να στοιβάζετε διορθώσεις

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

Καλές συνήθειες που κάνουν το rollback εύκολο:

• Δοκιμάζετε μετά από κάθε αλλαγή, ώστε να ξέρετε ποια αλλαγή χάλασε τα πράγματα.
• Κρατάτε τις αλλαγές μικρές — μία λειτουργία ή διόρθωση ανά μήνυμα.
• Σημειώστε την τελευταία καλή έκδοση πριν ξεκινήσετε κάτι επικίνδυνο.
• Αν ο κώδικας βρίσκεται στο Git, κάντε commit τις καλές εκδόσεις ώστε να μπορείτε να επιστρέψετε σε αυτές.

Συνηθισμένα μοτίβα σφαλμάτων σε εφαρμογές AI

Όταν το πρόβλημα δεν είναι σφάλμα

Μερικά «σφάλματα» είναι το AI που χτίζει ακριβώς αυτό που του ζητήθηκε, και η περιγραφή ήταν ασαφής. Αν η διόρθωση που ζητάτε είναι στην πραγματικότητα αλλαγή συμπεριφοράς, πείτε το καθαρά: «Άλλαξέ το ώστε…». Αν βρίσκεστε να μην είστε σίγουροι ποια είναι η σωστή συμπεριφορά, αποφασίστε την πρώτα. Ο οδηγός μας για τη σύνταξη προτροπών για AI builders εφαρμογών καλύπτει πώς να προσδιορίζετε κανόνες με σαφήνεια. Και αν ετοιμάζετε εφαρμογή για πραγματικούς χρήστες, το πώς να πάτε ένα πρωτότυπο AI σε παραγωγή καλύπτει τους ελέγχους που αξίζει να κάνετε πριν την κυκλοφορία.

Debugging στο Mythex

Το Mythex έχει εργαλεία για κάθε βήμα του κύκλου:

• Προεπισκόπηση για αναπαραγωγή του σφάλματος, συμπεριλαμβανομένου πλαισίου πλάτους κινητού.
• /test όπου ο agent κάνει κλικ στη ζωντανή προεπισκόπηση σας σαν χρήστης και αναφέρει σπασμένες ροές.
• /fix που στοχεύει τον agent στα προβλήματα συγκεκριμένα.
• Λειτουργία Plan όπου ο agent ερευνά και εξηγεί πριν επεξεργαστεί οτιδήποτε.
• Code → τερματικό που δείχνει τα αρχεία καταγραφής του server της εφαρμογής σας.
• Επιστροφή σε αυτό το σημείο σε οποιαδήποτε απάντηση επαναφέρει το έργο στο checkpoint εκείνο.

Αν μια δημοσίευση αποτύχει, ο διάλογος δημοσίευσης συνήθως προσφέρει Fix with AI, που διαβάζει το αποτέλεσμα του build ή τα αρχεία καταγραφής της εφαρμογής. Δείτε Debug your app και Αντιμετώπιση προβλημάτων δημοσίευσης στην τεκμηρίωση.

Ερωτήσεις