AI سے بنی ایپ کو ڈیبگ کیسے کریں: ایک عملی طریقہ

AI سے بنی ایپ کو ڈیبگ کرنے کے لیے پہلے بگ کو جان بوجھ کر دوبارہ ہونے دیں، پھر شواہد جمع کریں: درست اقدامات، ایرر میسج، اور براؤزر کنسول اور نیٹ ورک ٹیب کیا دکھاتے ہیں، اور یہ سب AI کو “میں نے X کیا، Y متوقع تھا، Z ہوا” کی شکل میں دیں۔ اگر کوئی فکس حالات مزید خراب کر دے تو مزید فکسز شامل کرنے کے بجائے آخری کام کرنے والے ورژن پر واپس جائیں۔ ان میں سے کوئی بھی کام ٹھیک طریقے سے کرنے کے لیے آپ کو کوڈ پڑھنے کی ضرورت نہیں۔

یہ گائیڈ پورے چکر کا احاطہ کرتی ہے، بشمول غیر ڈویلپرز کے لیے براؤزر ڈیولپر ٹولز کا مختصر تعارف۔

ڈیبگنگ کا چکر

ہر بگ فکس، چاہے اسے کوئی انسان کرے یا AI، اسی چکر کی پیروی کرتا ہے:

1. دوبارہ پیدا کریں — بگ کو قابلِ اعتماد طریقے سے ظاہر کریں۔
2. مشاہدہ کریں — ایرر میسج اور ایپ کیا کر رہی تھی یہ جمع کریں۔
3. بیان کریں — AI کو درست اقدامات، متوقع نتیجہ اور اصل نتیجہ دیں۔
4. فکس کریں — AI کو ایک وقت میں ایک چیز بدلنے دیں۔
5. تصدیق کریں — بالکل وہی اقدامات دہرائیں اور یقینی بنائیں کہ بگ ٹھیک ہو گیا ہے اور قریبی حصوں میں کچھ نہیں ٹوٹا۔
6. ضرورت ہو تو رول بیک کریں — اگر حالات بدتر ہو گئے ہوں تو واپس جائیں اور بہتر معلومات کے ساتھ دوبارہ کوشش کریں۔

AI سے بنی ایپس پر ضائع ہونے والا زیادہ تر وقت انہی مراحل کو چھوڑنے سے آتا ہے، یعنی 1، 2 اور 5۔ یعنی یہ کہنا کہ “یہ ٹوٹا ہوا ہے”، کسی تبدیلی کو بغیر جانچے قبول کر لینا، اور پھر ایک ٹوٹی ہوئی چیز پر مزید فکس مانگنا۔

مرحلہ 1: بگ کو دوبارہ پیدا کریں

وہ بگ جسے آپ جب چاہیں ظاہر کر سکیں، وہ آدھا ٹھیک ہو چکا ہے۔ وہ مختصر ترین اقدامات تلاش کریں جو اسے ظاہر کرتے ہیں۔

خود سے پوچھیں:

• کیا یہ ہر بار ہوتا ہے؟ اگر کبھی کبھار ہوتا ہے، تو جب ہوتا ہے تو کیا مختلف ہوتا ہے، کوئی خاص ریکارڈ، سست کنکشن، یا لاگ آؤٹ ہونا؟
• کیا یہ ہر صارف کے ساتھ ہوتا ہے؟ کسی اور اکاؤنٹ سے لاگ ان کریں۔ بہت سے بگ صرف نئے صارفین کو دکھائی دیتے ہیں جن کے پاس کوئی ڈیٹا نہیں، یا کسی مختلف کردار (role) والے صارف کو۔
• کیا یہ ہر آلے پر ہوتا ہے؟ فون کے چوڑائی والی اسکرین اور مختلف براؤزر آزمائیں۔
• کیا یہ کسی مخصوص تبدیلی کے بعد شروع ہوا؟ اگر کل تک ٹھیک چل رہا تھا، تو آخری چند تبدیلیاں سب سے پہلے شک کے دائرے میں ہیں۔

اقدامات ایک مختصر نمبر والی فہرست میں لکھ لیں۔ بعد میں یہ پرامپٹ میں چسپاں کریں گے۔

مرحلہ 2: ایرر میسج پڑھیں

ایرر میسج ڈرانے والے لگتے ہیں، لیکن آپ کو ان کے صرف چند حصوں کی ضرورت ہے۔

آپ کو اسے سمجھنے کی ضرورت نہیں؛ آپ کو اسے بالکل ویسے ہی کاپی کرنا ہے۔ “Cannot read properties of undefined (reading 'name')” AI کو بتاتا ہے کہ کوڈ کو کچھ ڈیٹا (غالباً کوئی بکنگ یا صارف) کی توقع تھی جو موجود نہیں تھا۔ “کوئی undefined ایرر” جیسی تشریح یہ معلومات کھو دیتی ہے۔

چند عام ایرر، مختصراً ترجمہ کے ساتھ:

• undefined / null ایرر — کوڈ کو ڈیٹا کی توقع تھی جو نہیں پہنچا۔ اکثر لوڈنگ حالت یا خالی فہرست جسے کوڈ نے نہیں سنبھالا۔
• 404 Not Found — صفحہ یا API پتہ موجود نہیں۔ اکثر کسی راستے (route) میں غلط ہجے یا کسی ایسے صفحے کا لنک جس کا نام بدل دیا گیا۔
• 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 کو بگ بیان کریں

جو کچھ آپ نے جمع کیا اسے اس شکل میں رکھیں:

Bookings صفحے پر، ممبر کے طور پر لاگ ان ہو کر: میں نے کل کی 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 پروٹوٹائپ کو حقیقی صارفین کے لیے تیار کر رہے ہیں، تو AI پروٹوٹائپ کو پروڈکشن تک لے جانا لانچ سے پہلے کی جانچوں کا احاطہ کرتی ہے۔

Mythex میں ڈیبگنگ

Mythex میں چکر کے ہر مرحلے کے لیے ٹولز ہیں:

• Preview بگ کو دوبارہ پیدا کرنے کے لیے، بشمول فون سائز کا فریم۔
• /test ایجنٹ کو آپ کے لائیو پریویو میں ایک صارف کی طرح کلک کرنے دیتا ہے اور ٹوٹے ہوئے بہاؤ رپورٹ کرتا ہے۔
• /fix ایجنٹ کو خاص طور پر ٹوٹی ہوئی چیزوں کی طرف متوجہ کرتا ہے۔
• Plan موڈ ایجنٹ کو کچھ بھی بدلنے سے پہلے تحقیق کرنے اور وضاحت دینے دیتا ہے۔
• Code → terminal آپ کی ایپ کے سرور لاگز دکھاتا ہے۔
• کسی بھی جواب پر Revert to this point پروجیکٹ کو اس چیک پوائنٹ پر واپس لے جاتا ہے۔

اگر پبلش ناکام ہو تو پبلش ڈائیلاگ عموماً Fix with AI پیش کرتا ہے، جو بلڈ آؤٹ پٹ یا ایپ کے لاگز پڑھتا ہے۔ دستاویزات میں Debug your app اور Publish troubleshooting دیکھیں۔

سوالات