JavaScript:
ডিবাগার ব্যবহার করা
কিভাবে:
এখানে এমন কিছু JavaScript কোড দেওয়া হল যা প্রত্যাশিতভাবে আচরণ করছে না:
function buggyMultiply(a, b) {
return a + b; // ওহো! এটা উচিত ছিল গুণ, যোগ নয়।
}
let result = buggyMultiply(5, 3);
console.log('ফলাফল:', result);আউটপুট ভুল হয়ে গেছে:
ফলাফল: 8চলুন Chrome DevTools এ ডিবাগ করি:
- এই JS টি একটি ব্রাউজারে খুলুন।
- ডান ক্লিক করে “Inspect” নির্বাচন করে DevTools খুলুন।
- “Sources” ট্যাবে ক্লিক করুন।
- আপনার কোড স্নিপেট বা পৃষ্ঠা খুঁজে বের করুন এবং
returnস্টেটমেন্টের পাশের লাইন নম্বরে ক্লিক করে একটি ব্রেকপয়েন্ট সেট করুন। - ব্রেকপয়েন্ট সক্রিয় করতে পৃষ্ঠাটি রিফ্রেশ করুন।
- লোকাল ভেরিয়েবলগুলি
aএবংbদেখার জন্য “Scope” প্যানেলটি চেক করুন। - “Step over next function call” বাটন ব্যবহার করে পরবর্তী ধাপে যান।
returnস্টেটমেন্টে বাগটি খুঁজে বের করুন।- কোড ঠিক করুন:
function buggyMultiply(a, b) {
return a * b; // ঠিক করা হয়েছে!
}
let result = buggyMultiply(5, 3);
console.log('ফলাফল:', result);সংশোধিত আউটপুট:
ফলাফল: 15গভীর ডুব
ডিবাগিং এর ধারণা কম্পিউটিং এর প্রাথমিক দিনগুলিতে থেকেই ছিল—কিংবদন্তি বলে, এটি ১৯৪০ এর দশকে একটি কম্পিউটারে মথ পাওয়ার পর থেকে শুরু হয়েছিল! আজকে, JavaScript ডিবাগার যেমন ব্রাউজারের অন্তর্ভুক্ত টুলস (Chrome DevTools, Firefox Developer Tools) বা IDE এর সাথে ইন্টিগ্রেটেড ডিবাগার (Visual Studio Code, WebStorm) অনেক ধরণের বৈশিষ্ট্য অফার করে।
অন্তর্নির্মিত ডিবাগারের বিকল্পের মধ্যে রয়েছে থার্ড-পার্টি টুলস যেমন WebStorm বা ভেরিয়েবলের স্টেট আউটপুট করার জন্য সাধারণ console.log ব্যবহার করা। কিন্তু এগুলি ডিবাগার প্রদান করা রিয়েল-টাইম ইন্টারেকশন এবং বিস্তারিত পরীক্ষা অফার করে না।
বাস্তবায়নের বিস্তারিত, বেশিরভাগ ডিবাগার অনুরূপভাবে কাজ করে: এগুলি আপনাকে এমন ব্রেকপয়েন্ট সেট করতে দেয় যা একজিকিউশন থামিয়ে দেয়, কোড ধাপে ধাপে পরীক্ষা করতে দেয়, বর্তমান ভেরিয়েবল স্টেট পরীক্ষা করতে দেয়, এক্সপ্রেশন ওয়াচ করতে দেয়, এবং ভিন্ন সেনারিও পরীক্ষা করার জন্য উড়ন্ত মান পরিবর্তন করতে দেয়।