AI দিয়ে বানানো অ্যাপের বাগ কীভাবে খুঁজবেন: একটি ব্যবহারিক পদ্ধতি

AI দিয়ে বানানো অ্যাপের বাগ খুঁজতে আগে সমস্যাটি ইচ্ছাকৃতভাবে আবার ঘটান, তারপর প্রমাণ সংগ্রহ করুন — হুবহু ধাপ, error বার্তা, এবং ব্রাউজার console ও network ট্যাব কী দেখায় — এবং সেটি AI-কে “আমি X করেছি, Y আশা করেছিলাম, Z পেয়েছি” আকারে দিন। কোনো ফিক্স যদি অবস্থা আরও খারাপ করে, শেষ কাজ-করা সংস্করণে ফিরে যান, একের পর এক ফিক্স চাপাবেন না। এসবের জন্য কোড পড়তে জানার দরকার নেই।

এই গাইড পুরো চক্র কভার করে, এবং অ-ডেভেলপারদের জন্য ব্রাউজার ডেভেলপার টুলের একটি দ্রুত ভ্রমণও।

ডিবাগিং চক্র

প্রতিটি বাগ ফিক্স, মানুষ বা AI যেই করুক, একই চক্র অনুসরণ করে:

1. পুনরুৎপাদন — বাগটি নির্ভরযোগ্যভাবে ঘটান।
2. পর্যবেক্ষণ — error বার্তা ও অ্যাপ তখন কী করছিল তা সংগ্রহ করুন।
3. বর্ণনা — AI-কে সুনির্দিষ্ট ধাপ, আশানুরূপ ফল ও আসল ফল দিন।
4. ফিক্স — AI-কে একটি জিনিস বদলাতে দিন।
5. যাচাই — হুবহু ধাপগুলো আবার করুন এবং নিশ্চিত হন যে ঠিক হয়েছে ও কাছাকাছি কিছু ভাঙেনি।
6. প্রয়োজনে রোলব্যাক — অবস্থা খারাপ হলে ফিরিয়ে নিয়ে আরও ভালো তথ্যসহ আবার চেষ্টা করুন।

AI-বানানো অ্যাপে বেশিরভাগ সময় নষ্ট হয় ১, ২ ও ৫ ধাপ বাদ দিলে: “এটা ভাঙা” বলা, পরিবর্তন পরীক্ষা না করে মেনে নেওয়া, আর তারপর একটি ভাঙা কোডের ওপর আরেকটি ফিক্স চাওয়া।

ধাপ ১: বাগটি পুনরুৎপাদন করুন

যে বাগটি ইচ্ছামতো ঘটানো যায়, তা অর্ধেক ঠিক হয়ে গেছে। সবচেয়ে ছোট ধাপসমষ্টি খুঁজুন যা বাগটি ঘটায়।

নিজেকে জিজ্ঞেস করুন:

• এটি কি প্রতিবারই ঘটে? কখনও কখনও হলে, যখন ঘটে তখন কী আলাদা — একটি নির্দিষ্ট রেকর্ড, ধীর সংযোগ, লগআউট অবস্থা?
• এটি কি প্রতিটি ব্যবহারকারীর জন্য ঘটে? অন্য অ্যাকাউন্টে লগইন করুন। অনেক বাগ শুধু নতুন ব্যবহারকারী, যাদের কোনো ডেটা নেই, অথবা ভিন্ন ভূমিকার ব্যবহারকারীর জন্য দেখা যায়।
• এটি কি প্রতিটি ডিভাইসে ঘটে? ফোনের প্রস্থের স্ক্রিন ও ভিন্ন ব্রাউজার চেষ্টা করুন।
• এটি কি একটি নির্দিষ্ট পরিবর্তনের পর শুরু হয়েছে? গতকাল কাজ করলে, শেষ কয়েকটি পরিবর্তনই প্রধান সন্দেহভাজন।

ধাপগুলো একটি ছোট নম্বরযুক্ত তালিকায় লিখে রাখুন। পরে প্রম্পটে পেস্ট করবেন।

ধাপ ২: error বার্তাটি পড়ুন

Error বার্তা ভয় দেখাতে পারে, কিন্তু আপনার শুধু কয়েকটি অংশ দরকার।

আপনাকে এটি বুঝতে হবে না; আপনাকে এটি হুবহু কপি করতে হবে। “Cannot read properties of undefined (reading 'name')” AI-কে বলে যে কোডটি কিছু ডেটা (সম্ভবত একটি বুকিং বা ব্যবহারকারী) আশা করেছিল, কিন্তু সেটি আসেনি। “কোনো undefined error” বললে সেই তথ্য হারিয়ে যায়।

কয়েকটি সাধারণ, মোটামুটি বাংলায়:

• undefined / null error — কোড এমন ডেটা আশা করেছিল যা আসেনি। প্রায়ই একটি লোডিং অবস্থা বা একটি খালি তালিকা, যা কোড সামলায়নি।
• 404 Not Found — পৃষ্ঠা বা API ঠিকানাটি নেই। প্রায়ই একটি রুটে বানান ভুল, বা নাম বদলানো পৃষ্ঠার লিংক।
• 401 Unauthorized / 403 Forbidden — অনুরোধটি লগইন করা ছিল না, অথবা ব্যবহারকারীর সেটি করার অনুমতি নেই।
• 500 Internal Server Error — সার্ভার-সাইড কোড ক্র্যাশ করেছে। আসল কারণ সার্ভার লগে থাকে, ব্রাউজারে নয়।
• CORS error — ব্রাউজার অন্য ডোমেইনে একটি অনুরোধ আটকে দিয়েছে। সাধারণত সার্ভার-সাইডের কনফিগারেশন সমস্যা।

ধাপ ৩: ব্রাউজার developer tools ব্যবহার করুন

প্রতিটি ডেস্কটপ ব্রাউজারে বিল্ট-ইন developer tools (“devtools”) থাকে। সেগুলো দেখায় পৃষ্ঠাটি পর্দার আড়ালে কী করছে। Chrome, Edge ও Firefox-এ পৃষ্ঠার যেকোনো জায়গায় ডান-ক্লিক করে Inspect বেছে নিন, অথবা F12 চাপুন (ম্যাকে Cmd+Option+I)। Safari-তে প্রথমে Safari-র সেটিংসে Develop মেনু চালু করুন।

আপনার শুধু তিনটি ট্যাব দরকার।

Console

Console ট্যাব পৃষ্ঠার কোড থেকে আসা error ও বার্তার তালিকা দেখায়। Error লাল রঙে দেখা যায়। যদি একটি বোতাম ক্লিক করলে কিছু না হয়, console প্রায়ই ঠিক ক্লিকের মুহূর্তে একটি লাল error দেখায়। error-এর পুরো টেক্সট কপি করুন (বেশিরভাগ ব্রাউজারে ডান-ক্লিক করলে কপির অপশন আসে)।

Network

Network ট্যাব পৃষ্ঠা যে প্রতিটি অনুরোধ করে — ডেটা লোড, ফর্ম সংরক্ষণ, লগইন — তার তালিকা দেখায়। এটি খুলুন, তারপর বাগ ঘটায় এমন ধাপগুলো আবার করুন।

• লাল সারি বা ৪০০ ও তার উপরের স্ট্যাটাসের সারি খুঁজুন।
• একটি ব্যর্থ সারিতে ক্লিক করে তার Response দেখুন। সার্ভার error প্রায়ই সেখানে এমন একটি বার্তা রাখে যা পর্দার যেকোনো কিছুর চেয়ে বেশি কাজের।
• অনুরোধের URL ও স্ট্যাটাস কোড লিখে রাখুন — “POST /api/bookings 500 দিয়েছে” একটি অত্যন্ত কাজের বাক্য, যা AI-কে দেওয়া যায়।

বাগে পৃষ্ঠা রিলোড বা রিডাইরেক্ট জড়িত থাকলে Preserve log টিক দিন, যাতে অনুরোধগুলো মুছে না যায়।

Elements

Elements (বা Inspector) ট্যাব পৃষ্ঠার গঠন ও স্টাইল দেখায়। লেআউটের বাগে এটি সবচেয়ে কাজের: কোনো উপাদানের ওপর মাউস রাখলে তার আকার ও ব্যবধান হাইলাইট হয়। এখানে কিছু সম্পাদনা করতে হয় না; বলাই যথেষ্ট যে “মোবাইলে ফুটারটি ২,০০০ পিক্সেল চওড়া এবং পৃষ্ঠাকে পাশে ঠেলে দিচ্ছে”।

ধাপ ৪: সার্ভার লগ দেখুন

কিছু বাগ সার্ভারে ঘটে, যা ব্রাউজার দেখতে পায় না। Network ট্যাবে একটি 500 error এর ক্লাসিক লক্ষণ। সার্ভার লগ — আপনার ব্যাকএন্ড চলার সময় তার টেক্সট আউটপুট — সাধারণত আসল error একটি স্ট্যাক ট্রেস (যেসব ফাংশন চলছিল তার তালিকা, যখন এটি ব্যর্থ হয়) সহ ধারণ করে।

কোথায় পাবেন তা আপনার টুলের ওপর নির্ভর করে। বেশিরভাগ AI অ্যাপ বিল্ডারে আপনি প্রজেক্টের জন্য একটি টার্মিনাল বা লগ ভিউ খুলতে পারেন, অথবা সহজভাবে AI-কে জিজ্ঞেস করুন: “শেষ অনুরোধ থেকে সার্ভার লগে error দেখো এবং কী ব্যর্থ হয়েছে বলো।”

ধাপ ৫: AI-কে বাগটি বর্ণনা করুন

যা সংগ্রহ করেছেন তা এই আকারে সাজান:

বুকিং পাতায়, একজন সদস্য হিসেবে লগইন করে: আগামীকালের সকাল ৯টার ক্লাসে আমি Cancel-এ ক্লিক করি। আশা: বুকিংটি চলে যায় এবং ক্লাসে একটি বেশি খালি আসন দেখায়। আসল: পর্দায় কিছু বদলায় না। console-এ TypeError: Cannot read properties of undefined (reading 'id') দেখায় BookingCard.tsx:31-এ, এবং network ট্যাবে DELETE /api/bookings/123 ৫০০ ফেরত দিয়েছে। কারণটি খুঁজুন, ঠিক করুন, এবং যাচাই করুন যে একজন সদস্যের একটি এবং একাধিক বুকিং থাকলেও বাতিল কাজ করে।

প্রতিটি অংশ কেন গুরুত্বপূর্ণ:

• কোথায় ও কার হিসেবে একটি পর্দা ও একটি ভূমিকায় সীমাবদ্ধ করে।
• হুবহু ধাপগুলো AI-কে বাগটি পুনরুৎপাদন করতে দেয়।
• আশা বনাম আসল নির্ধারণ করে “ঠিক হয়েছে” মানে কী।
• error-এর লেখা ও ব্যর্থ অনুরোধ সরাসরি কারণের দিকে নির্দেশ করে।
• “যাচাই করো…” AI-কে শুধু সম্পাদনা নয়, যাচাইও করতে বলে।

AI যদি দুবার ফিক্স চেষ্টা করে ব্যর্থ হয়, তাহলে কিছু বদলানোর আগে ব্যাখ্যা করতে বলুন:

এখনও কোড বদলাবেন না। আপনার মতে এর কারণ কী, এবং কোন প্রমাণ সেটিকে সমর্থন করে?

একটি ভুল তত্ত্ব লিখিত আকারে সহজে ধরা পড়ে, এবং ভুল ফিক্সের চেয়ে অনেক সস্তায় শুধরানো যায়।

ধাপ ৬: যাচাই করুন, তারপর আশপাশে দেখুন

AI যখন বলে ঠিক হয়েছে, ধাপ ১-এর হুবহু ধাপগুলো আবার করুন। তারপর আশপাশের জিনিসগুলো দেখুন:

• একই কাজ ভিন্ন ব্যবহারকারীর ভূমিকায়
• একই কাজ কোনো ডেটা ছাড়া, এবং অনেক ডেটা নিয়ে
• যেসব পৃষ্ঠা আপনার ঠিক করা উপাদানটি ভাগ করে
• ফোনের প্রস্থের স্ক্রিন, যদি ফিক্সটি লেআউট স্পর্শ করে

AI-র পরিবর্তন মাঝে মাঝে এক পথ ঠিক করে অন্য পথ নীরবে ভেঙে দেয়। এখন দুই মিনিটের যাচাই পরে একটি বিভ্রান্তিকর ঘণ্টা বাঁচায়।

ধাপ ৭: স্তূপ না করে রোলব্যাক করুন

কোনো ফিক্স অবস্থা খারাপ করলে, বা তিনবার চেষ্টা করেও অগ্রগতি না হলে, ফিরে যান। শেষ কাজ-করা সংস্করণে রোলব্যাক করুন এবং আরও ভালো প্রমাণসহ আবার বলুন — তিনটি ভুল ফিক্সের ওপর চতুর্থটি চাওয়ার চেয়ে এটি প্রায় সবসময় ভালো। প্রতিটি ব্যর্থ চেষ্টা কিছু কোড রেখে যায়, এবং সেই কোড পরের চেষ্টাকে বিভ্রান্ত করে।

রোলব্যাক সহজ রাখার ভালো অভ্যাস:

• প্রতিটি পরিবর্তনের পরে পরীক্ষা করুন, যাতে জানা যায় কোন পরিবর্তন ভেঙেছে।
• পরিবর্তন ছোট রাখুন — প্রতি বার্তায় একটি ফিচার বা ফিক্স।
• ঝুঁকিপূর্ণ কিছু শুরুর আগে শেষ ভালো সংস্করণ নোট করুন।
• কোড Git-এ থাকলে, কাজের সংস্করণগুলো কমিট করুন, যাতে সেখানে ফিরতে পারেন।

AI-বানানো অ্যাপের সাধারণ বাগের ধরন

যখন সমস্যাটি বাগ নয়

কিছু “বাগ” আসলে AI ঠিক সেটিই বানিয়েছে যা তাকে বলা হয়েছিল, কিন্তু বর্ণনাটি অস্পষ্ট ছিল। আপনার চাওয়া ফিক্সটি যদি আসলে আচরণের একটি পরিবর্তন হয়, তা স্পষ্টভাবে বলুন: “এটি বদলাও যাতে…”। যদি আপনি নিজেই নিশ্চিত না হন সঠিক আচরণটি আসলে কী, আগে সেটি ঠিক করুন। নিয়ম স্পষ্টভাবে কীভাবে নির্দিষ্ট করতে হয় তা কভার করে AI অ্যাপ বিল্ডারের জন্য প্রম্পট লেখা। আর আসল ব্যবহারকারীদের জন্য অ্যাপ প্রস্তুত করলে, লঞ্চের আগে করার যাচাইগুলো কভার করে একটি AI প্রোটোটাইপকে প্রোডাকশনে নেওয়া।

Mythex-এ ডিবাগিং

Mythex-এ চক্রের প্রতিটি ধাপের জন্য টুল আছে:

• Preview বাগ পুনরুৎপাদনের জন্য, ফোনের আকারের ফ্রেমসহ।
• /test এজেন্টকে আপনার লাইভ প্রিভিউয়ে একজন ব্যবহারকারীর মতো ক্লিক করে ভাঙা প্রবাহ জানাতে বলে।
• /fix এজেন্টকে বিশেষভাবে ভাঙনের দিকে নির্দেশ করে।
• Plan মোড এজেন্টকে কোনো কিছু সম্পাদনার আগে অনুসন্ধান ও ব্যাখ্যা করতে দেয়।
• Code → terminal আপনার অ্যাপের সার্ভার লগ দেখায়।
• যেকোনো উত্তরে Revert to this point প্রজেক্টকে সেই চেকপয়েন্টে ফিরিয়ে নেয়।

প্রকাশ ব্যর্থ হলে, প্রকাশের ডায়ালগে সাধারণত Fix with AI অপশন থাকে, যা বিল্ড আউটপুট বা অ্যাপের লগ পড়ে। ডকসে দেখুন আপনার অ্যাপ ডিবাগ করা এবং প্রকাশের সমস্যা সমাধান।

প্রশ্নোত্তর