AI વડે બનેલી એપને ડિબગ કેવી રીતે કરવી: એક વ્યવહારુ પદ્ધતિ

AI વડે બનેલી એપને ડિબગ કરવા માટે, પહેલા બગને જાણી જોઈને ફરી થવા દો, પછી પુરાવા એકઠા કરો — ચોક્કસ પગલાં, એરર મેસેજ, અને બ્રાઉઝર કન્સોલ તથા નેટવર્ક ટેબ શું બતાવે છે — અને તે AI ને "મેં X કર્યું, Y અપેક્ષિત હતું, Z મળ્યું" તરીકે આપો. જો ફિક્સ પરિસ્થિતિ વધુ ખરાબ કરે, તો ઉપર બીજા ફિક્સ ઉમેરવાને બદલે છેલ્લું કામ કરતું વર્ઝન પર પાછા જાઓ. આમાંનું કંઈ સારી રીતે કરવા માટે તમારે કોડ વાંચવાની જરૂર નથી.

આ ગાઇડ આખો લૂપ આવરી લે છે, જેમાં નોન-ડેવલપર માટે બ્રાઉઝર ડેવલપર ટૂલ્સની ઝડપી સફર છે.

ડિબગિંગ લૂપ

દરેક બગ ફિક્સ, માણસ કરે કે 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") છે. તે બતાવે છે કે પેજ પડદા પાછળ શું કરી રહ્યું છે. 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/123 500 આપે છે. કારણ શોધો, ઠીક કરો, અને ચકાસો કે એક બુકિંગવાળા અને ઘણા બુકિંગવાળા મેમ્બર માટે કેન્સલ કામ કરે છે.

દરેક ભાગ શા માટે મહત્વનો છે:

• ક્યાં અને કઈ રીતે એક સ્ક્રીન અને એક ભૂમિકા સુધી સીમિત કરે છે.
• ચોક્કસ પગલાં AI ને તે ફરી ઊભું કરવા દે છે.
• અપેક્ષિત વિરુદ્ધ વાસ્તવિક "ઠીક" નો અર્થ વ્યાખ્યાયિત કરે છે.
• એરર ટેક્સ્ટ અને નિષ્ફળ રિક્વેસ્ટ સીધા કારણ તરફ ઇશારો કરે છે.
• "ચકાસો કે…" AI ને માત્ર ફેરફાર કરવાને બદલે ચકાસવાનું કહે છે.

જો AI બે વખત ફિક્સ કરવાનો પ્રયાસ કરી નિષ્ફળ ગયું હોય, તો કંઈ બદલતા પહેલા સમજાવવા કહો:

હજુ કોડ બદલશો નહીં. તમને લાગે છે કે આનું કારણ શું છે, અને તેને કયા પુરાવા સમર્થન આપે છે?

ખોટી થિયરી લખાઈ જાય ત્યારે સહેલાઈથી દેખાય છે, અને ખોટા ફિક્સ કરતાં તેને સુધારવી ઘણી સસ્તી છે.

પગલું 6: ચકાસો, પછી નજીકનું તપાસો

જ્યારે AI કહે કે ઠીક થયું, ત્યારે પગલું 1 ના બરાબર પગલાં ફરી કરો. પછી તેની આસપાસની વસ્તુઓ તપાસો:

• બીજી યુઝર ભૂમિકા માટે એ જ ક્રિયા
• કોઈ ડેટા વગર અને ઘણા ડેટા સાથે એ જ ક્રિયા
• તમે ઠીક કરેલા ઘટક સાથે ઘટકો શેર કરતા પેજ
• ફિક્સે લેઆઉટને સ્પર્શ કર્યો હોય તો ફોન-પહોળાઈની સ્ક્રીન

AI ફેરફારો ક્યારેક એક રસ્તો ઠીક કરે અને બીજો શાંતિથી તોડે. હવે બે મિનિટની ચકાસણી પછી મૂંઝવણભર્યા કલાકને બચાવે.

પગલું 7: ઉપર ઢગલો કરવાને બદલે રોલબેક કરો

જો ફિક્સથી પરિસ્થિતિ વધુ ખરાબ થઈ, અથવા તમે ત્રણ રાઉન્ડ સુધી પ્રગતિ વગર ગયા, તો પાછા જાઓ. છેલ્લા કામ કરતા વર્ઝન પર રોલબેક કરવું અને વધુ સારા પુરાવા સાથે ફરી પૂછવું, ત્રણ ખોટા ફિક્સ પર ચોથો ફિક્સ માંગવા કરતાં લગભગ હંમેશા સારું. દરેક નિષ્ફળ પ્રયાસ કોડ પાછળ છોડી જાય છે, અને તે કોડ આગલા પ્રયાસને ગૂંચવે છે.

રોલબેક સરળ બનાવતી સારી ટેવો:

• દરેક ફેરફાર પછી ચકાસો, જેથી ખબર પડે કે કયા ફેરફારે તોડ્યું.
• ફેરફાર નાના રાખો — એક સંદેશ દીઠ એક ફીચર કે ફિક્સ.
• જોખમી કામ પહેલાં છેલ્લું સારું વર્ઝન નોંધો.
• જો કોડ Git માં હોય, તો કામ કરતા વર્ઝન કમિટ કરો જેથી તેના પર પાછા જઈ શકાય.

AI-બનાવેલી એપમાં સામાન્ય બગ પેટર્ન

જ્યારે સમસ્યા બગ નથી

કેટલાક "બગ" AI ને જે કહેવામાં આવ્યું હતું તે જ બનાવે છે, અને વર્ણન અસ્પષ્ટ હતું. જો તમે જે ફિક્સ માંગો છો તે ખરેખર વર્તણૂકમાં ફેરફાર હોય, તો સ્પષ્ટ કહો: "આને એવી રીતે બદલો કે…". જો તમને ખબર ન હોય કે સાચી વર્તણૂક શું છે, તો પહેલા તે નક્કી કરો. AI એપ બિલ્ડર માટે પ્રોમ્પ્ટ કેવી રીતે લખવા પરની અમારી ગાઇડ નિયમો સ્પષ્ટ કેવી રીતે કરવા તે આવરી લે છે. અને જો તમે વાસ્તવિક યુઝર માટે એપ તૈયાર કરી રહ્યા હો, તો AI પ્રોટોટાઇપને પ્રોડક્શનમાં કેવી રીતે લઈ જવો લોન્ચ પહેલાં કરવા જેવી તપાસો આવરી લે છે.

Mythex માં ડિબગિંગ

Mythex પાસે લૂપના દરેક પગલા માટે સાધનો છે:

• Preview બગ ફરી ઊભો કરવા, ફોન-કદની ફ્રેમ સહિત.
• /test એજન્ટ તમારા લાઇવ પ્રિવ્યૂમાં યુઝરની જેમ ક્લિક કરે અને તૂટેલા ફ્લોનો રિપોર્ટ આપે.
• /fix એજન્ટને ખાસ કરીને તૂટેલી વસ્તુ તરફ નિર્દેશ કરે.
• Plan મોડ એજન્ટને કંઈ એડિટ કરતા પહેલા તપાસ કરવા અને સમજાવવા દે.
• Code → terminal તમારી એપના સર્વર લોગ બતાવે.
• Revert to this point કોઈપણ જવાબ પર પ્રોજેક્ટને તે ચેકપોઇન્ટ પર પાછો લાવે.

જો publish નિષ્ફળ જાય, તો publish ડાયલોગ સામાન્ય રીતે Fix with AI ઓફર કરે છે, જે બિલ્ડ આઉટપુટ અથવા એપના લોગ વાંચે છે. ડોક્સમાં તમારી એપ ડિબગ કરો અને Publish troubleshooting જુઓ.

પ્રશ્નો