ڈیبگنگ — ایپ میں غلطیاں کیسے ڈھونڈیں اور ٹھیک کریں؟

ہر ایپ میں غلطیاں آتی ہیں — پیشہ ور ڈویلپرز کی ایپس میں بھی۔ فرق یہ ہے کہ وہ غلطیاں ڈھونڈنا اور ٹھیک کرنا جانتے ہیں۔ آج ہم یہی سیکھیں گے۔

ڈیبگنگ کیا ہے؟ — سادہ مثال

سوچیں آپ کی گاڑی اسٹارٹ نہیں ہو رہی۔ آپ مکینک کے پاس جاتے ہیں۔ مکینک:

پہلے سنتا ہے — کیا آواز آ رہی ہے؟
چیک کرتا ہے — بیٹری دیکھتا ہے، تیل دیکھتا ہے
مسئلہ ڈھونڈتا ہے — بیٹری ختم ہے
ٹھیک کرتا ہے — نئی بیٹری لگاتا ہے

کوڈ میں بھی یہی ہوتا ہے:

ایرر پڑھیں — کیا لکھا ہے؟
جگہ ڈھونڈیں — کس فائل میں، کس لائن پر؟
وجہ سمجھیں — کیوں ہوا؟
ٹھیک کریں — AI سے یا خود

براؤزر کنسول — آپ کا سب سے بڑا ہتھیار

براؤزر کنسول وہ جگہ ہے جہاں ایپ کی تمام غلطیاں نظر آتی ہیں۔ یہ نہ دیکھنا ایسے ہے جیسے گاڑی کا ڈیش بورڈ دیکھے بغیر گاڑی چلانا۔

کنسول کیسے کھولیں؟

Chrome میں:

کی بورڈ پر F12 دبائیں
یا: دائیں کلک → Inspect → Console ٹیب

کنسول میں کیا نظر آتا ہے:

سرخ لکھائی = ایرر (غلطی) — ضرور پڑھیں
پیلی لکھائی = وارننگ (تنبیہ) — اکثر نظرانداز کر سکتے ہیں
سفید لکھائی = عام معلومات

سب سے عام ایررز اور ان کا حل

1. TypeError — سب سے زیادہ آنے والی ایرر

TypeError: Cannot read property 'name' of undefined

کیا ہوا: کوڈ کسی ایسی چیز سے معلومات لینا چاہتا ہے جو موجود نہیں۔

سادہ مثال: آپ نے دراز کھولی لیکن دراز خالی ہے — اور آپ کہہ رہے ہیں “اندر سے قلم نکالو”

AI سے ٹھیک کروائیں: “یہ ایرر آ رہا ہے: TypeError: Cannot read property ‘name’ of undefined — ٹھیک کرو”

2. 404 Not Found — صفحہ نہیں ملا

GET https://myapp.com/api/data 404 (Not Found)

کیا ہوا: ایپ کسی ایسے ایڈریس سے ڈیٹا مانگ رہی ہے جو موجود نہیں۔

عام وجوہات:

URL غلط لکھا
API ابھی تیار نہیں
سرور بند ہے

3. CORS Error — دوسری سائٹ سے ڈیٹا نہیں آ رہا

Access to fetch has been blocked by CORS policy

کیا ہوا: آپ کی ایپ کسی اور سرور سے ڈیٹا لینا چاہتی ہے لیکن اس سرور نے اجازت نہیں دی۔

سادہ مثال: آپ کسی کے گھر کا دروازہ کھولنا چاہتے ہیں لیکن چابی آپ کے پاس نہیں۔

AI سے کہیں: “CORS ایرر آ رہا ہے [API URL] سے — ٹھیک کرو”

4. سفید سکرین — کچھ نظر نہیں آتا

کبھی کبھی ایپ صرف سفید سکرین دکھاتی ہے — کچھ نظر نہیں آتا۔

پہلا قدم: کنسول کھولیں (F12) — وہاں ایرر ضرور ہوگی AI سے کہیں: “ایپ سفید سکرین دکھا رہی ہے۔ کنسول میں یہ ایرر ہے: [ایرر کاپی پیسٹ]“

AI سے ڈیبگنگ — قدم بہ قدم

قدم 1: مسئلہ واضح طور پر بتائیں

خراب: “کام نہیں کر رہا”

بہتر: “جب میں ‘محفوظ کریں’ بٹن دباتا ہوں تو نوٹ محفوظ نہیں ہوتا اور صفحہ ویسا ہی رہتا ہے”

قدم 2: ایرر میسج شامل کریں

کنسول سے ایرر کاپی کر کے AI کو بھیجیں:

“یہ ایرر آ رہا ہے: [ایرر یہاں]۔ ٹھیک کرو”

قدم 3: بتائیں کب ہوتا ہے

“جب میں لاگ ان کرنے کے بعد پہلی بار نوٹ بناتا ہوں تو یہ ایرر آتا ہے — دوسری بار ٹھیک چلتا ہے”

قدم 4: AI کا جواب لاگو کریں اور دوبارہ چیک کریں

AI جو تبدیلی بتائے وہ لاگو کریں، پھر دوبارہ وہی کام کریں جس میں مسئلہ تھا۔ ٹھیک ہوا؟ بہت خوب۔ نہیں ہوا؟ AI کو بتائیں “ابھی بھی وہی مسئلہ ہے”

عملی مشق — ایررز ڈھونڈنے کی مشق

مشق 1: Google AI Studio میں کوئی بھی ایپ بنائیں اور:

F12 دبا کر کنسول کھولیں
دیکھیں کوئی سرخ ایرر تو نہیں
اگر ہے تو AI کو بتائیں اور ٹھیک کروائیں

مشق 2: جان بوجھ کر ایرر بنائیں:

AI سے کہیں “ایپ میں ایک بٹن لگا دو جو ڈیٹابیس سے ڈیٹا لائے” (بغیر ڈیٹابیس سیٹ اپ کیے)
دیکھیں کیا ایرر آتی ہے
ایرر کاپی کریں اور AI سے ٹھیک کروائیں

ٹیسٹنگ — ایپ چیک کرنے کے طریقے

1. خود ٹیسٹ کریں

ایپ بنے تو خود ہر فیچر آزمائیں:

ہر بٹن دبائیں
فارم میں غلط ڈیٹا ڈالیں (خالی بھیجیں، بہت لمبا لکھیں)
موبائل پر کھولیں — سب ٹھیک دکھتا ہے؟

2. دوسروں سے ٹیسٹ کروائیں

اپنے دوست یا خاندان کے کسی فرد کو ایپ دیں اور کہیں “استعمال کرو اور بتاؤ کہاں مسئلہ آتا ہے”

دوسرے لوگ ایسی غلطیاں ڈھونڈتے ہیں جو آپ کو نظر نہیں آتیں — کیونکہ آپ کو پتا ہے ایپ کیسے استعمال ہوتی ہے لیکن وہ نئے ہیں۔

3. مختلف ڈیوائسز پر چیک کریں

موبائل (چھوٹی سکرین)
ٹیبلٹ (درمیانی سکرین)
کمپیوٹر (بڑی سکرین)
مختلف براؤزرز (Chrome، Firefox، Safari)

اہم اصطلاحات

بگ — کوڈ میں غلطی
ڈیبگنگ — غلطی ڈھونڈنا اور ٹھیک کرنا
کنسول — براؤزر میں وہ جگہ جہاں ایررز نظر آئیں
ایرر میسج — غلطی کی تفصیل جو کنسول میں دکھے
TypeError — غلط قسم کا ڈیٹا استعمال ہونے کی غلطی
404 — مطلوبہ صفحہ یا ڈیٹا نہیں ملا
CORS — دوسرے سرور نے ڈیٹا دینے سے انکار کیا
ٹیسٹنگ — ایپ کی جانچ کرنا کہ سب ٹھیک کام کرتا ہے

اگلی گائیڈ میں

ایرر ڈھونڈنا اور ٹھیک کرنا آ گیا۔ اب وقت ہے سب کچھ ملا کر ایک مکمل پروجیکٹ بنانے کا — اگلی گائیڈ: مکمل پروجیکٹ میں ہم شروع سے آخر تک ایک مکمل SaaS ایپ بنائیں گے جس میں فرنٹ اینڈ، بیک اینڈ، لاگ ان، ڈیٹابیس، ادائیگی اور ہوسٹنگ سب شامل ہوگا۔