AIతో నిర్మించిన యాప్‌ను ఎలా డీబగ్ చేయాలి: ఒక ఆచరణాత్మక పద్ధతి
AIతో నిర్మించిన యాప్‌ను డీబగ్ చేయడానికి, ముందుగా బగ్‌ను ఉద్దేశపూర్వకంగా మళ్ళీ జరిగేలా చేయండి, తర్వాత సాక్ష్యం సేకరించండి — ఖచ్చితమైన అడుగులు, ఎర్రర్ మెసేజ్, మరియు బ్రౌజర్ కన్సోల్ మరియు నెట్‌వర్క్ ట్యాబ్ ఏమి చూపుతున్నాయో — ఆపై దాన్ని AIకి "నేను X చేశాను, Y ఆశించాను, Z వచ్చింది" అని ఇవ్వండి. ఫిక్స్ పరిస్థితిని మరింత దిగజారిస్తే, పై పైన మరిన్ని ఫిక్స్‌లు వేయకుండా చివరిగా పనిచేసిన వెర్షన్‌కు రోల్‌బ్యాక్ చేయండి. ఇవన్నీ బాగా చేయడానికి మీరు కోడ్ చదవాల్సిన అవసరం లేదు.
ఈ గైడ్ మొత్తం లూప్‌ను కవర్ చేస్తుంది, ఇందులో నాన్-డెవలపర్ల కోసం బ్రౌజర్ డెవలపర్ టూల్స్ యొక్క త్వరిత పర్యటన కూడా ఉంది.
డీబగ్గింగ్ లూప్
ప్రతి బగ్ ఫిక్స్, ఒక వ్యక్తి చేసినా AI చేసినా, అదే లూప్‌ను అనుసరిస్తుంది:
- పునరుత్పత్తి — బగ్ నమ్మదగినంతగా జరిగేలా చేయండి.
- గమనించండి — ఎర్రర్ మెసేజ్ మరియు యాప్ ఏమి చేస్తోందో సేకరించండి.
- వివరించండి — AIకి ఖచ్చితమైన అడుగులు, ఆశించిన ఫలితం మరియు వాస్తవ ఫలితం ఇవ్వండి.
- ఫిక్స్ — AI ఒక విషయాన్ని మార్చనివ్వండి.
- ధృవీకరించండి — ఖచ్చితమైన అడుగులను మళ్ళీ చేసి అది సరిగ్గా అయిందని, మరియు దగ్గర్లో ఏమీ విరగలేదని నిర్ధారించండి.
- అవసరమైతే రోల్‌బ్యాక్ — అది మరింత దిగజారితే, రద్దు చేసి మెరుగైన సమాచారంతో మళ్ళీ ప్రయత్నించండి.
AI-నిర్మిత యాప్‌లలో ఎక్కువ సమయం వృథా కావడానికి కారణం 1, 2 మరియు 5 అడుగులను దాటవేయడం: "ఇది విరిగింది" అని చెప్పడం, మార్పును పరీక్షించకుండా అంగీకరించడం, ఆపై విరిగిన దానిపై మరో ఫిక్స్ అడగడం.
దశ 1: బగ్‌ను మళ్ళీ చేయండి
మీరు కోరినప్పుడు ప్రేరేపించగల బగ్ సగం పరిష్కరించబడినట్టే. దాన్ని కలిగించే అతి చిన్న అడుగుల సమితిని కనుగొనడానికి ప్రయత్నించండి.
మిమ్మల్ని మీరు అడగండి:
- ప్రతిసారి జరుగుతుందా? కొన్నిసార్లు మాత్రమే అయితే, అది జరిగినప్పుడు ఏమి భిన్నంగా ఉంటుంది — ఒక నిర్దిష్ట రికార్డ్, నెమ్మదైన కనెక్షన్, లేదా లాగ్ అవుట్ అయి ఉండటం?
- ప్రతి వినియోగదారుకు జరుగుతుందా? వేరే ఖాతాతో లాగిన్ అవ్వండి. అనేక బగ్‌లు కొత్త వినియోగదారులకు డేటా లేకుండా, లేదా వేరే పాత్ర ఉన్న వినియోగదారుకు మాత్రమే కనిపిస్తాయి.
- ప్రతి పరికరంలో జరుగుతుందా? ఫోన్-వెడల్పు స్క్రీన్ మరియు వేరే బ్రౌజర్ ప్రయత్నించండి.
- ఒక నిర్దిష్ట మార్పు తర్వాత మొదలైందా? నిన్న పనిచేస్తే, చివరి కొన్ని మార్పులు ప్రధాన అనుమానితులు.
అడుగులను చిన్న క్రమబద్ధమైన జాబితాగా రాయండి. తర్వాత ప్రాంప్ట్‌లో అతికిస్తారు.
దశ 2: ఎర్రర్ మెసేజ్ చదవండి
ఎర్రర్ మెసేజ్‌లు భయపెట్టేలా ఉంటాయి, కానీ మీకు వాటిలో కొన్ని భాగాలు మాత్రమే కావాలి.
| మెసేజ్ భాగం | అది ఏమి చెబుతుంది | ఉదాహరణ |
|---|---|---|
| రకం | సమస్య రకం | TypeError, 404 Not Found, 500 Internal Server Error |
| మెసేజ్ | విఫలమైన నిర్దిష్ట విషయం | Cannot read properties of undefined (reading 'name') |
| ఫైల్ మరియు లైన్ | కోడ్‌లో ఎక్కడ | BookingList.tsx:42 |
మీరు దాన్ని అర్థం చేసుకోవాల్సిన అవసరం లేదు; ఖచ్చితంగా కాపీ చేయాలి. "Cannot read properties of undefined (reading 'name')" AIకి కోడ్ కొంత డేటాను (బహుశా బుకింగ్ లేదా వినియోగదారు) ఆశించిందని, అది లేదని చెబుతుంది. "some undefined error" అని పారఫ్రేజ్ చేస్తే అది సమాచారం కోల్పోతుంది.
కొన్ని సాధారణమైనవి, సుమారుగా అనువాదంతో:
undefined/nullలోపాలు — కోడ్ ఆశించిన డేటా రాలేదు. తరచుగా లోడింగ్ స్థితి లేదా కోడ్ నిర్వహించని ఖాళీ జాబితా.404 Not Found— పేజీ లేదా API చిరునామా లేదు. తరచుగా రూట్‌లో టైపో లేదా పేరు మారిన పేజీకి లింక్.401 Unauthorized/403 Forbidden— అభ్యర్థన లాగిన్ కాలేదు, లేదా వినియోగదారుకు అలా చేయడానికి అనుమతి లేదు.500 Internal Server Error— సర్వర్ వైపు కోడ్ క్రాష్ అయింది. అసలు కారణం బ్రౌజర్‌లో కాదు, సర్వర్ లాగ్‌లలో ఉంటుంది.CORSలోపాలు — బ్రౌజర్ వేరే డొమైన్‌కు అభ్యర్థనను ఆపింది. సాధారణంగా సర్వర్ వైపు కాన్ఫిగరేషన్ సమస్య.
దశ 3: బ్రౌజర్ డెవలపర్ టూల్స్ వాడండి
ప్రతి డెస్క్‌టాప్ బ్రౌజర్‌లో అంతర్నిర్మిత డెవలపర్ టూల్స్ ("devtools") ఉంటాయి. అవి తెరవెనుక పేజీ ఏమి చేస్తోందో చూపుతాయి. Chrome, Edge మరియు Firefoxలో, పేజీపై ఎక్కడైనా రైట్-క్లిక్ చేసి Inspect ఎంచుకోండి, లేదా F12 (Macలో Cmd+Option+I) నొక్కండి. Safariలో ముందుగా Safari సెట్టింగ్స్‌లో Develop మెనూ ఆన్ చేయండి.
మీకు మూడు ట్యాబ్‌లు మాత్రమే కావాలి.
Console
Console ట్యాబ్ పేజీ కోడ్ నుండి ఎర్రర్‌లు మరియు మెసేజ్‌లను జాబితా చేస్తుంది. ఎర్రర్‌లు ఎరుపులో కనిపిస్తాయి. బటన్ క్లిక్ చేసినప్పుడు ఏమీ జరగకపోతే, మీరు క్లిక్ చేసిన క్షణంలోనే కన్సోల్ తరచుగా ఎరుపు ఎర్రర్ చూపుతుంది. ఎర్రర్ యొక్క పూర్తి టెక్స్ట్‌ను కాపీ చేయండి (చాలా బ్రౌజర్లలో కాపీ ఎంపిక కోసం రైట్-క్లిక్ చేయండి).
Network
Network ట్యాబ్ పేజీ చేసే ప్రతి అభ్యర్థనను జాబితా చేస్తుంది — డేటా లోడ్ చేయడం, ఫారం సేవ్ చేయడం, లాగిన్ చేయడం. దాన్ని తెరిచి, బగ్‌కు కారణమయ్యే అడుగులను మళ్ళీ చేయండి.
- ఎరుపు వరుసలు లేదా 400 లేదా అంతకంటే ఎక్కువ స్టేటస్ ఉన్న వరుసల కోసం చూడండి.
- విఫలమైన వరుసపై క్లిక్ చేసి దాని Responseని చూడండి. సర్వర్ ఎర్రర్‌లో తరచుగా స్క్రీన్‌పై ఉన్నదాని కంటే ఉపయోగకరమైన మెసేజ్ ఉంటుంది.
- అభ్యర్థన URL మరియు స్టేటస్ కోడ్ గమనించండి — "/api/bookingsకు POST 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/123500 ఇచ్చింది. కారణం కనుగొని, సరిచేసి, ఒక సభ్యుడికి ఒక బుకింగ్ మరియు అనేక బుకింగ్‌లు ఉన్నప్పుడు రద్దు పనిచేస్తుందో తనిఖీ చేయండి.
ప్రతి భాగం ఎందుకు ముఖ్యమో:
- ఎక్కడ మరియు ఎవరిగా ఒకే స్క్రీన్ మరియు ఒకే పాత్రకు పరిమితం చేస్తుంది.
- ఖచ్చితమైన అడుగులు AIకి దాన్ని పునరుత్పత్తి చేయడానికి వీలు కల్పిస్తాయి.
- ఆశించిన vs వాస్తవం "సరిచేయబడింది" అంటే ఏమిటో నిర్వచిస్తాయి.
- ఎర్రర్ టెక్స్ట్ మరియు విఫలమైన అభ్యర్థన నేరుగా కారణం వైపు చూపుతాయి.
- "తనిఖీ చేయండి…" AI కేవలం సవరించకుండా ధృవీకరించాలని అడుగుతుంది.
AI రెండుసార్లు ఫిక్స్ ప్రయత్నించి విఫలమైతే, ఏదైనా మార్చే ముందు వివరించమని అడగండి:
ఇంకా కోడ్ మార్చకండి. ఈ సమస్యకు ఏది కారణమని మీరు భావిస్తున్నారు, మరియు దానికి ఏ సాక్ష్యం మద్దతు ఇస్తోంది?
తప్పు సిద్ధాంతం రాసినప్పుడు సులభంగా గుర్తించవచ్చు, మరియు తప్పు ఫిక్స్ కంటే సరిచేయడం చాలా చౌక.
దశ 6: ధృవీకరించండి, తర్వాత పక్కన ఉన్నవి తనిఖీ చేయండి
AI "ఫిక్స్ అయింది" అని చెప్పినప్పుడు, దశ 1 నుండి ఖచ్చితమైన అడుగులను మళ్ళీ చేయండి. తర్వాత చుట్టూ ఉన్న వాటిని తనిఖీ చేయండి:
- వేరే వినియోగదారు పాత్రకు అదే చర్య
- డేటా లేకుండా, మరియు చాలా డేటాతో అదే చర్య
- మీరు సరిచేసిన దానితో కాంపోనెంట్‌లను పంచుకునే పేజీలు
- లేఅవుట్‌ను తాకితే ఫోన్-వెడల్పు స్క్రీన్
AI మార్పులు కొన్నిసార్లు ఒక మార్గాన్ని సరిచేసి మరొకదాన్ని నిశ్శబ్దంగా విరగ్గొడతాయి. ఇప్పుడు రెండు నిమిషాల తనిఖీ తర్వాత ఒక గందరగోళ గంట ఆదా చేస్తుంది.
దశ 7: పైన పేర్చకుండా రోల్‌బ్యాక్ చేయండి
ఫిక్స్ పరిస్థితిని మరింత దిగజారిస్తే, లేదా మూడు రౌండ్లు పురోగతి లేకుండా గడిస్తే, వెనక్కి వెళ్లండి. చివరిగా పనిచేసిన వెర్షన్‌కు రోల్‌బ్యాక్ చేయడం మరియు మెరుగైన సాక్ష్యంతో మళ్ళీ చెప్పడం, మూడు తప్పు ఫిక్స్‌లపై నాలుగవ ఫిక్స్ అడగడం కంటే దాదాపు ఎల్లప్పుడూ మెరుగు. ప్రతి విఫల ప్రయత్నం కోడ్‌ను వదిలేస్తుంది, మరియు ఆ కోడ్ తదుపరి ప్రయత్నాన్ని గందరగోళపరుస్తుంది.
రోల్‌బ్యాక్‌ను సులభం చేసే మంచి అలవాట్లు:
- ప్రతి మార్పు తర్వాత పరీక్షించండి, ఏ మార్పు విరగ్గొట్టిందో తెలుసుకోవడానికి.
- మార్పులను చిన్నగా ఉంచండి — ఒక సందేశానికి ఒక ఫీచర్ లేదా ఫిక్స్.
- రిస్కీ ఏదైనా మొదలుపెట్టే ముందు చివరి మంచి వెర్షన్‌ను గమనించండి.
- కోడ్ Gitలో ఉంటే, పనిచేసే వెర్షన్లను కమిట్ చేయండి, వాటికి తిరిగి వెళ్లడానికి.
AIతో నిర్మించిన యాప్‌లలో సాధారణ బగ్ నమూనాలు
| లక్షణం | సాధ్యమైన కారణం | ఏమి అడగాలి |
|---|---|---|
| ప్రివ్యూలో పనిచేస్తుంది, పబ్లిష్ చేస్తే విరుగుతుంది | లైవ్ యాప్‌కు సీక్రెట్ లేదా ఎన్విరాన్‌మెంట్ వేరియబుల్ లేదు, లేదా మార్పు మళ్ళీ పబ్లిష్ కాలేదు | "యాప్ ఉపయోగించే ప్రతి ఎన్విరాన్‌మెంట్ వేరియబుల్ పబ్లిష్ చేసిన యాప్‌కు సెట్ చేయబడిందో తనిఖీ చేయండి" |
| రిఫ్రెష్ తర్వాత డేటా పోతుంది | పేజీ మెమరీలో మాత్రమే సేవ్ చేయబడింది, డేటాబేస్‌లో కాదు | "[డేటా]ను రిఫ్రెష్ తర్వాత నిలిచేలా డేటాబేస్‌లో సేవ్ చేయండి" |
| పేజీ ఖాళీగా ఉంది | రెండరింగ్ సమయంలో క్రాష్ | కన్సోల్ ఎర్రర్ కాపీ చేయండి |
| మీకు పనిచేస్తుంది, కొత్త వినియోగదారులకు కాదు | కోడ్ కొత్త ఖాతాలకు లేని డేటాను ఊహిస్తుంది | "వినియోగదారుకు ఇంకా [రికార్డులు] లేనప్పుడు నిర్వహించండి" |
| వినియోగదారులు ఒకరి డేటాను చూడగలరు | సర్వర్‌పై అనుమతి తనిఖీ లేదు | మా సెక్యూరిటీ చెక్‌లిస్ట్ చూడండి |
| ఫోన్‌లలో లేఅవుట్ విరిగింది | స్థిర వెడల్పులు లేదా చుట్టుకోని కంటెంట్ | స్క్రీన్‌షాట్ మరియు స్క్రీన్ వెడల్పు |
| లాగిన్ పనిచేస్తుంది, రీలోడ్‌లో లాగ్ అవుట్ అవుతుంది | సెషన్ నిల్వ కాలేదు లేదా కుకీ సెట్టింగ్‌లు తప్పు | "పేజీ రిఫ్రెష్ తర్వాత వినియోగదారులను లాగిన్‌గా ఉంచండి" |
అది బగ్ కానప్పుడు
కొన్ని "బగ్‌లు" AI తనకు చెప్పినదాన్ని సరిగ్గా నిర్మించడం, మరియు వివరణ అస్పష్టంగా ఉండటం. మీరు అడుగుతున్న ఫిక్స్ నిజానికి ప్రవర్తనలో మార్పు అయితే, అలా స్పష్టంగా చెప్పండి: "అలా మార్చండి…". సరైన ప్రవర్తన ఏమిటో మీకే తెలియకపోతే, ముందు అది నిర్ణయించుకోండి. నియమాలను స్పష్టంగా ఎలా పేర్కొనాలో AI యాప్ బిల్డర్ల కోసం ప్రాంప్ట్‌లు రాయడం కవర్ చేస్తుంది. మీరు నిజమైన వినియోగదారుల కోసం యాప్ సిద్ధం చేస్తుంటే, AI ప్రోటోటైప్‌ను ప్రొడక్షన్‌కు ఎలా తీసుకెళ్లాలి ప్రారంభానికి ముందు చేయదగిన తనిఖీలను కవర్ చేస్తుంది.
Mythexలో డీబగ్గింగ్
Mythexలో లూప్‌లోని ప్రతి దశకు టూల్స్ ఉన్నాయి:
- Preview బగ్‌ను పునరుత్పత్తి చేయడానికి, ఫోన్-సైజ్ ఫ్రేమ్‌తో సహా.
/testఏజెంట్ మీ లైవ్ ప్రివ్యూను వినియోగదారులా క్లిక్ చేసి విరిగిన ఫ్లోలను నివేదిస్తుంది./fixఏజెంట్‌ను ప్రత్యేకంగా బ్రేకేజ్ వైపు చూపుతుంది.- Plan మోడ్ ఏజెంట్ ఏదైనా సవరించే ముందు పరిశోధించి వివరించేలా చేస్తుంది.
- Code → terminal మీ యాప్ సర్వర్ లాగ్‌లను చూపుతుంది.
- ఏ ప్రత్యుత్తరంపైనైనా Revert to this point ప్రాజెక్ట్‌ను ఆ చెక్‌పాయింట్‌కు తిరిగి తీసుకెళ్తుంది.
పబ్లిష్ విఫలమైతే, పబ్లిష్ డైలాగ్ సాధారణంగా Fix with AIని అందిస్తుంది, ఇది బిల్డ్ అవుట్‌పుట్ లేదా యాప్ లాగ్‌లను చదువుతుంది. డాక్స్‌లో Debug your app మరియు Publish troubleshooting చూడండి.
ప్రశ్నలు
యాప్‌లో బగ్ ఉన్నప్పుడు AIకి ఏమి చెప్పాలి?
మూడు విషయాలు: మీరు తీసుకున్న ఖచ్చితమైన అడుగులు, ఏమి జరగాలని ఆశించారో, మరియు వాస్తవంగా ఏమి జరిగిందో, ఎర్రర్ మెసేజ్ యొక్క ఖచ్చితమైన టెక్స్ట్‌తో సహా. కారణం కనుగొనడానికి సాధారణంగా ఇది సరిపోతుంది.
బ్రౌజర్ కన్సోల్ ఎలా తెరవాలి?
Chrome, Edge లేదా Firefoxలో, పేజీపై రైట్-క్లిక్ చేసి Inspect ఎంచుకుని Console ట్యాబ్ తెరవండి. కీబోర్డ్ షార్ట్‌కట్ F12, లేదా Macలో Cmd+Option+I. Safariలో ముందు Settingsలో Develop మెనూ ఎనేబుల్ చేయాలి.
AI ఒకే బగ్‌ను సరిచేయడంలో విఫలమవుతూనే ఉంటే ఏమి చేయాలి?
ఫిక్స్‌లను పేర్చడం ఆపండి. చివరిగా పనిచేసిన వెర్షన్‌కు రోల్‌బ్యాక్ చేయండి, తర్వాత బగ్‌ను ఎక్కువ వివరాలతో మళ్ళీ వివరించండి — ఖచ్చితమైన ఎర్రర్, విఫలమైన నెట్‌వర్క్ రిక్వెస్ట్, లేదా స్క్రీన్‌షాట్. కోడ్ మార్చే ముందు కారణం వివరించమని AIని అడగడం కూడా సహాయపడుతుంది.
ప్రివ్యూలో యాప్ పనిచేస్తుంది కానీ పబ్లిష్ చేసిన తర్వాత ఎందుకు పనిచేయదు?
సాధారణ కారణాలు: లైవ్ యాప్ కోసం సెట్ చేయని సీక్రెట్‌లు లేదా ఎన్విరాన్‌మెంట్ వేరియబుల్స్, లైవ్ వెర్షన్‌కు కనెక్ట్ కాని డేటాబేస్, లేదా మళ్ళీ పబ్లిష్ చేయని మార్పులు. కోడ్ చూసే ముందు వాటిని తనిఖీ చేయండి.