AI ने बांधलेले अ‍ॅप कसे डीबग करायचे: एक व्यावहारिक पद्धत

AI ने बांधलेले अ‍ॅप डीबग करण्यासाठी, प्रथम बग जाणूनबुजून पुन्हा घडवा, मग पुरावे गोळा करा — नेमकी पावले, त्रुटी संदेश, आणि ब्राउझर कन्सोल व नेटवर्क टॅब काय दाखवतो — आणि ते "मी X केले, Y अपेक्षित होते, Z मिळाले" या स्वरूपात AI ला द्या. दुरुस्तीने परिस्थिती बिघडली, तर दुरुस्त्यांचा ढीग करण्याऐवजी शेवटच्या कार्यरत आवृत्तीवर परत जा. हे सर्व चांगले करण्यासाठी तुम्हाला कोड वाचण्याची गरज नाही.

हे मार्गदर्शक संपूर्ण चक्र कव्हर करते, बिगर-डेव्हलपर्ससाठी ब्राउझर डेव्हलपर टूल्सच्या झटपट फेरफटक्यासह.

डीबगिंग चक्र

प्रत्येक बग दुरुस्ती, मग ती व्यक्ती करो किंवा AI, याच चक्राचे पालन करते:

1. पुन्हा घडवा — बग विश्वासार्हपणे घडवा.
2. निरीक्षण करा — त्रुटी संदेश आणि अ‍ॅप काय करत होते ते गोळा करा.
3. वर्णन करा — AI ला नेमकी पावले, अपेक्षित परिणाम आणि प्रत्यक्ष परिणाम द्या.
4. दुरुस्त करा — AI ला एक गोष्ट बदलू द्या.
5. पडताळा — नेमकी पावले पुन्हा करा आणि ते निश्चित झाले आहे, आणि जवळचे काही तुटले नाही याची खात्री करा.
6. गरज असल्यास रोल बॅक करा — परिस्थिती बिघडली तर पूर्ववत करा आणि चांगल्या माहितीसह पुन्हा प्रयत्न करा.

AI-बांधलेल्या अ‍ॅप्सवरील बहुतेक वेळ पायरी 1, 2 आणि 5 वगळल्यामुळे वाया जातो: "ते तुटले आहे" असे म्हणणे, चाचणी न करता बदल स्वीकारणे, आणि मग एका तुटलेल्या दुरुस्तीवर आणखी एक दुरुस्ती मागणे.

पायरी 1: बग पुन्हा घडवा

तुम्ही हवे तेव्हा घडवू शकता असा बग अर्धा निश्चित झालेला आहे. तो घडवणारी सर्वात लहान पावलांची मालिका शोधा.

स्वतःला विचारा:

• तो प्रत्येक वेळी घडतो का? फक्त कधीकधी घडत असेल, तर जेव्हा घडतो तेव्हा काय वेगळे असते — एखादा विशिष्ट रेकॉर्ड, धीमे कनेक्शन, लॉग आउट असणे?
• तो प्रत्येक वापरकर्त्यासाठी घडतो का? वेगळ्या खात्याने लॉगिन करा. अनेक बग फक्त नवीन, डेटा नसलेल्या वापरकर्त्यांसाठी किंवा वेगळी भूमिका असलेल्या वापरकर्त्यासाठी दिसतात.
• तो प्रत्येक डिव्हाइसवर घडतो का? फोन-रुंदीची स्क्रीन आणि वेगळा ब्राउझर वापरून पाहा.
• एका विशिष्ट बदलानंतर सुरू झाला का? काल काम करत होते, तर शेवटचे काही बदल हे मुख्य संशयित आहेत.

पावले लहान क्रमांकित यादी म्हणून लिहा. ती नंतर प्रॉम्प्टमध्ये पेस्ट करायची आहेत.

पायरी 2: त्रुटी संदेश वाचा

त्रुटी संदेश भीतिदायक दिसतात, पण त्यातील काही भागच तुम्हाला लागतो.

ते समजून घेण्याची गरज नाही; ते अक्षरानुअक्षर कॉपी करायचे आहे. "Cannot read properties of undefined (reading 'name')" AI ला सांगते की कोडला काही डेटा (बहुधा बुकिंग किंवा वापरकर्ता) अपेक्षित होता, जो तिथे नव्हता. "कोणतीतरी undefined त्रुटी" असे सारांशित केले तर ती माहिती हरवते.

काही सामान्य, थोडक्यात अर्थासह:

• undefined / null त्रुटी — कोडला अपेक्षित असलेला डेटा आला नाही. बहुधा लोडिंग स्थिती किंवा रिकामी यादी जी कोडने हाताळली नाही.
• 404 Not Found — पान किंवा API पत्ता अस्तित्वात नाही. बहुधा राउटमधील टायपो किंवा नाव बदललेल्या पानाची लिंक.
• 401 Unauthorized / 403 Forbidden — विनंती लॉगिन केलेली नव्हती, किंवा वापरकर्त्याला ते करण्याची परवानगी नाही.
• 500 Internal Server Error — सर्व्हर-बाजूचा कोड क्रॅश झाला. खरे कारण ब्राउझरमध्ये नव्हे, तर सर्व्हर लॉगमध्ये असते.
• CORS त्रुटी — ब्राउझरने वेगळ्या डोमेनकडे विनंती अडवली. सहसा सर्व्हर बाजूवरील कॉन्फिगरेशन समस्या.

पायरी 3: ब्राउझर डेव्हलपर टूल्स वापरा

प्रत्येक डेस्कटॉप ब्राउझरमध्ये अंगभूत डेव्हलपर टूल्स ("devtools") असतात. पानाच्या कोणत्याही भागावर उजवे-क्लिक करा आणि Inspect निवडा, किंवा F12 दाबा (Mac वर Cmd+Option+I). Safari मध्ये, Safari च्या सेटिंग्जमध्ये आधी Develop मेनू सुरू करा.

तुम्हाला फक्त तीन टॅब्स लागतील.

Console

Console टॅब पानाच्या कोडकडून आलेल्या त्रुटी आणि संदेशांची यादी करतो. त्रुटी लाल रंगात दिसतात. एखादे बटण क्लिक केल्यावर काही होत नसेल, तर तुम्ही क्लिक करता त्याच क्षणी कन्सोलमध्ये लाल त्रुटी दिसते. त्रुटीचा पूर्ण मजकूर कॉपी करा (बहुतेक ब्राउझरमध्ये कॉपीचा पर्याय मिळवण्यासाठी उजवे-क्लिक करा).

Network

Network टॅब पानाने केलेली प्रत्येक विनंती दाखवतो — डेटा लोड करणे, फॉर्म सेव्ह करणे, लॉगिन. ते उघडा, मग बग घडवणारी पावले पुन्हा करा.

• लाल रंगाच्या किंवा 400 किंवा त्याहून वरच्या स्टेटसच्या ओळी शोधा.
• अयशस्वी ओळीवर क्लिक करून तिचा Response पाहा. सर्व्हर त्रुटीत तिथे स्क्रीनवरील कोणत्याही गोष्टीपेक्षा अधिक उपयुक्त संदेश अनेकदा असतो.
• विनंतीचा URL आणि स्टेटस कोड नोंदवा — "POST /api/bookings ने 500 परत केले" हे AI ला देण्यासाठी खूप उपयुक्त वाक्य आहे.

बग पान रीलोड किंवा रीडायरेक्टशी संबंधित असेल तर Preserve log टिक करा, म्हणजे विनंत्या गायब होणार नाहीत.

Elements

Elements (किंवा Inspector) टॅब पानाची रचना आणि स्टाइल्स दाखवतो. लेआउट बगसाठी सर्वात उपयुक्त: घटकावर फिरवल्यास त्याचा आकार आणि अंतर हायलाइट होते. इथे काहीही संपादित करायची गरज नाही; "मोबाइलवर फूटर 2,000 पिक्सेल रुंद आहे आणि पान बाजूला ढकलतो" असे सांगणे पुरेसे आहे.

पायरी 4: सर्व्हर लॉग तपासा

काही बग सर्व्हरवर होतात, जे ब्राउझरला दिसत नाहीत. नेटवर्क टॅबमधील 500 त्रुटी हे क्लासिक लक्षण आहे. सर्व्हर लॉग — तुमचा बॅकएंड चालत असताना त्याचे मजकूर आउटपुट — मध्ये सहसा स्टॅक ट्रेससह (ज्या फंक्शन्स अपयशी होण्याच्या वेळी चालू होत्या त्यांची यादी) खरी त्रुटी असते.

ते कुठे मिळतील ते तुमच्या टूलवर अवलंबून असते. बहुतेक AI अ‍ॅप बिल्डरमध्ये तुम्ही प्रोजेक्टसाठी टर्मिनल किंवा लॉग व्ह्यू उघडू शकता, किंवा फक्त AI ला विचारू शकता: "शेवटच्या विनंतीमधील त्रुटींसाठी सर्व्हर लॉग तपासा आणि काय अयशस्वी झाले ते सांगा."

पायरी 5: AI ला बग वर्णन करा

जे गोळा केले ते या स्वरूपात मांडा:

बुकिंग्ज पानावर, सदस्य म्हणून लॉगिन केलेले: उद्याच्या 9:00 क्लासवर मी Cancel क्लिक केले. अपेक्षित: बुकिंग गायब होते आणि क्लासमध्ये एक मोकळी जागा वाढते. प्रत्यक्ष: स्क्रीनवर काहीच बदलत नाही. कन्सोल BookingCard.tsx:31 वर TypeError: Cannot read properties of undefined (reading 'id') दाखवते, आणि नेटवर्क टॅब दाखवतो की DELETE /api/bookings/123 ने 500 परत केले. कारण शोधा, दुरुस्त करा, आणि एक बुकिंग असलेल्या आणि अनेक बुकिंग असलेल्या सदस्यासाठी रद्द करणे चालते का ते तपासा.

प्रत्येक भाग का महत्त्वाचा आहे:

• कुठे आणि कोण म्हणून एका स्क्रीन आणि एका भूमिकेपर्यंत मर्यादा आणते.
• नेमकी पावले AI ला बग पुन्हा घडवू देतात.
• अपेक्षित विरुद्ध प्रत्यक्ष "दुरुस्त" म्हणजे काय ते ठरवते.
• त्रुटी मजकूर आणि अयशस्वी विनंती थेट कारणाकडे निर्देश करतात.
• "तपासा की…" AI ला फक्त संपादन नव्हे, तर पडताळणी करायला सांगते.

AI ने दोनदा दुरुस्तीचा प्रयत्न केला आणि अपयश आले, तर काहीही बदलण्यापूर्वी स्पष्टीकरण द्यायला सांगा:

आत्ता कोड बदलू नका. तुम्हाला वाटते की हे कशामुळे होत आहे, आणि त्याला कोणता पुरावा आहे?

चुकीचा सिद्धांत लिहिल्यावर सहज दिसतो, आणि चुकीची दुरुस्ती करण्यापेक्षा तो दुरुस्त करणे खूप स्वस्त आहे.

पायरी 6: पडताळा, मग जवळपास तपासा

AI म्हणते की दुरुस्त झाले, तेव्हा पायरी 1 मधील नेमकी पावले पुन्हा करा. मग त्याभोवतीच्या गोष्टी तपासा:

• वेगळ्या वापरकर्ता भूमिकेसाठी तीच क्रिया
• डेटा नसताना आणि भरपूर डेटा असताना तीच क्रिया
• तुम्ही दुरुस्त केलेल्या घटकाचे घटक शेअर करणारी पाने
• लेआउट दुरुस्तीने स्पर्श केला असेल तर फोन-रुंदीची स्क्रीन

AI बदल कधीकधी एका मार्गाची दुरुस्ती करतो आणि शांतपणे दुसरा तोडतो. आत्ता दोन मिनिटांची तपासणी नंतरच्या गोंधळलेल्या तासापासून वाचवते.

पायरी 7: दुरुस्त्यांचा ढीग न लावता रोल बॅक करा

दुरुस्तीने परिस्थिती बिघडली, किंवा तीन फेऱ्या होऊनही प्रगती नसेल, तर मागे जा. शेवटच्या कार्यरत आवृत्तीवर परत जाणे आणि चांगल्या पुराव्यांसह पुन्हा सांगणे, तीन चुकीच्या दुरुस्त्यांच्या वर चौथी दुरुस्ती मागण्यापेक्षा जवळजवळ नेहमी चांगले असते. प्रत्येक अयशस्वी प्रयत्न कोड मागे सोडतो, आणि तो कोड पुढील प्रयत्नाला गोंधळात टाकतो.

रोल बॅक सोपा करणाऱ्या चांगल्या सवयी:

• प्रत्येक बदलानंतर चाचणी करा, म्हणजे कोणत्या बदलाने गोष्टी तोडल्या ते कळते.
• बदल लहान ठेवा — एका संदेशात एक फीचर किंवा दुरुस्ती.
• काहीतरी धोकादायक सुरू करण्यापूर्वी शेवटची कार्यरत आवृत्ती नोंदवा.
• कोड Git मध्ये असेल तर कार्यरत आवृत्त्या कमिट करा, जेणेकरून त्यावर परत जाता येईल.

AI-बांधलेल्या अ‍ॅप्समधील सामान्य बग पॅटर्न्स

जेव्हा समस्या बग नसते

काही "बग्स" म्हणजे AI ला सांगितल्याप्रमाणेच नेमके बांधले जात आहे, आणि वर्णन अस्पष्ट होते. तुम्ही मागत असलेली दुरुस्ती खरे तर वर्तनातील बदल असेल तर तसे स्पष्टपणे सांगा: "असे बदला की…". नेमके योग्य वर्तन काय आहे याबद्दल तुम्ही अनिश्चित असाल, तर ते आधी ठरवा. नियम स्पष्टपणे कसे सांगायचे ते AI अ‍ॅप बिल्डर्ससाठी प्रॉम्प्ट्स कसे लिहायचे मध्ये आहे. आणि खऱ्या वापरकर्त्यांसाठी अ‍ॅप तयार करत असाल, तर AI प्रोटोटाइप उत्पादनात कसा न्यायचा लाँचपूर्वी करण्यासारख्या तपासण्या कव्हर करते.

Mythex मध्ये डीबगिंग

Mythex मध्ये चक्रातील प्रत्येक पायरीसाठी साधने आहेत:

• प्रिव्ह्यू बग पुन्हा घडवण्यासाठी, फोन-आकाराच्या फ्रेमसह.
• /test एजंटला तुमच्या लाइव्ह प्रिव्ह्यूवर वापरकर्त्यासारखे क्लिक करायला लावते आणि तुटलेले फ्लो नोंदवते.
• /fix एजंटला विशेषतः तुटलेल्या भागाकडे निर्देशित करते.
• Plan मोड एजंटला कोणतेही संपादन करण्यापूर्वी तपास करून स्पष्टीकरण देऊ देतो.
• Code → terminal तुमच्या अ‍ॅपचे सर्व्हर लॉग दाखवते.
• या बिंदूवर परत जा कोणत्याही उत्तरावर प्रोजेक्टला त्या चेकपॉइंटवर रोल बॅक करते.

प्रकाशन अयशस्वी झाले, तर प्रकाशन डायलॉग सहसा Fix with AI देतो, जो बिल्ड आउटपुट किंवा अ‍ॅपचे लॉग वाचतो. डॉक्समध्ये तुमचे अ‍ॅप डीबग करा आणि प्रकाशन समस्यानिवारण पहा.

प्रश्न