hug দ্য বাগ to ডিবাগ
যখন তুই একটা কোড লিখবি, সব কোডই তুই যেভাবে চাইবি, সেভাবেই কাজ করবে না। মাঝেমধ্যে এরর দিবে। আবার কোড দেখলে খুব সহজেই বুঝতে পারবি না। কী কারণে কোড ঠিকমতো কাজ করতেছে না।
তখন কোডের মধ্যে সমস্যা (বাগ: bug) খুঁজে বের করতে হবে। আর বাগ খুঁজে বের করে সেটাকে সল্ভ করার চেষ্টা করাকে ডিবাগ করা বলে। ডিবাগিং না জানলে প্রফেশনালি কাজ করতে পারবি না। ডিবাগ (debug) এর অনেক টেকনিক আছে এবং কাজ করতে করতে এইগুলাতে দক্ষ হয়ে উঠবি। আপাতত সিম্পল কয়েকটা টেকনিক সম্পর্কে জেনে রাখ।
Console.log() ব্যবহার করা
ডিবাগ করার সবচেয়ে সহজ, কমন এবং কম ইফেক্টিভ পদ্ধতি হচ্ছে— কোডের যে অংশে সমস্যা হচ্ছে, তার আশেপাশে অনেকগুলা console.log() বসিয়ে দিয়ে আউটপুট চেক করা। কোনো জায়গায় আউটপুট ঠিক হচ্ছে না, সেখানে গিয়ে কোড ঠিক করা।
যেমন নিচে আমি দুইটা সংখ্যার গুণ করার একটা ফাংশন লিখছি। এইখানে 5 আর 2-কে গুণ করলে 10 হওয়ার কথা, সেটা না করে আমাকে 7 রিটার্ন দিচ্ছে। এই সমস্যা বা বাগ কোথায় কী কারণে হচ্ছে, সেটা যদি আমি স্বাভাবিকভাবে না ধরতে পারি, তাহলে কোডের আশেপাশে বেশ কয়েকটা কনসোল লগ দিয়ে বুঝার চেষ্টা করবো।
function multiply(x, y) {
console.log('X:', x);
console.log('Y:', y);
const result = x + y;
console.log('result:', result);
return result;
}
multiply(5, 2);
Output:
X: 5
Y: 2
result: 7 জাস্ট আন্দাজে মান্দাজে একশটা কনসোল লগ বসালে তোর কোডের সমস্যা সমাধান হয়ে যাবে না। বরং কনসোল লগ এর আউটপুট কি কি আসছে। কোনটা কোনটা ঠিক আছে আর কোনটা কোনটা মনে হচ্ছে গড়বড় হচ্ছে সেটা বুঝার চেষ্টা করতে হবে। চেষ্টা করতে করতে এক সময় কনসোল এর বিষয়ে দক্ষ হয়ে উঠবি।
Breakpoint:
ব্রাউজার বা মডার্ন কোড এডিটর এর মধ্যে খুবই ইউজফুল একটা অপশন হচ্ছে Breakpoint। Breakpoint হচ্ছে এমন এক জায়গা, যেখানে তুই কোড চালানো থামিয়ে দিতে পারবি। ধর, তুই দেখতে চাচ্ছিস, একটা ফাংশন ঠিকমতো কাজ করছে কি না, তখন তুই সেই ফাংশনের ভিতরে প্রথম লাইনে বা যেখানে সমস্যা হতে পারে, সেখানে গিয়ে ব্রেকপয়েন্ট দিয়ে দিতে পারবি।
ব্রাউজারের DevTools-এ Source ট্যাবে গিয়ে Breakpoint সেট করতে পারিস। একবার কোড সেই Breakpoint-এ এসে থামলে তুই তখন পুরো সিস্টেমের অবস্থা দেখতে পারবি— ভ্যারিয়েবলগুলোর মান কী, কোন ফাংশন চালাচ্ছে ইত্যাদি।
Debugger:
হয়তো তোর সন্দেহ হচ্ছে কোডের এই জায়গায় কিছু একটা গণ্ডগোল হচ্ছে। বা এই লাইনের জন্যই সমস্যা হচ্ছে। এখন তুই চাইলে সেই লাইনের আগে বা পরে গিয়ে জাস্ট debugger এই শব্দটা লিখে দিবি। তাহলে কোড চলতে গিয়ে একজাক্টলি সেই জায়গায় থেমে যাবে। তখন তুই সেখানে গিয়ে কোডের বিভিন্ন ভেরিয়েবল এর মান, লজিক, অ্যারে, অবজেক্ট, স্কোপ ইত্যাদি চেক করতে পারবি। এবং ভুল ধরা তোর জন্য কিছুটা সহজ হয়ে উঠবে।
CallStack
CallStack হচ্ছে এমন এক ট্যুল, যেটা তুই ব্যবহার করে দেখতে পারবি, কোন ফাংশনটা কোথায় থেকে কল হচ্ছে। ধর, তুই একটা ফাংশন লিখছিস, সেটা অন্য একটা ফাংশন থেকে কল হচ্ছে। CallStack-এর মাধ্যমে তুই সেই কলের পুরো চেইন দেখতে পারবি।
ডিবাগিং করার সময় তুই কয়েকটা স্টেপ ফলো করতে পারিস, যেন কাজটা সহজ হয়
Error Message পড়া
প্রথমেই তুই Error Message ভালোভাবে পড়বি। Error Message তোর কোডে কোথায় সমস্যা হচ্ছে, সেটা দেখাবে, তাই এটা মনোযোগ দিয়ে পড়তে হবে।
Problem Isolation
তুই যদি অনেক বড় কোডে কাজ করিস, তাহলে প্রথমেই সমস্যার জায়গাটা বের করতে হবে। কোডের কোন অংশে সমস্যা, সেটা খুঁজে বের করতে পারলে বাকি কোড ঠিক রাখতে পারবি।
Test in Small Parts
কোডের ছোট ছোট অংশ নিয়ে টেস্ট কর। যেমন, ফাংশনের একটা অংশে সমস্যা হলে শুধু সেই অংশটা আলাদা করে চালিয়ে দেখ, কোথায় কী হচ্ছে।
Use Tools
তুই DevTools, Breakpoint, আর CallStack-এর মতো টুলগুলো ব্যবহার করবি। এগুলো তোর ডিবাগিং অনেক সহজ করে দেবে।
Consult Documentation
যদি কোনো মেথড বা ফাংশনের কাজ ঠিকমতো বুঝতে না পারিস, তখন ডকুমেন্টেশন দেখতে পারিস। অনেক সময় ভুল ফাংশন ব্যবহার করলে সমস্যার সমাধান মিলবে।