JavaScript Browser Debugging – সমস্যা ধরার মাস্টারি!

Debugging মানে হলো আপনার কোডে কোথায় কী ভুল হচ্ছে সেটা খুঁজে বের করা এবং ঠিক করা।

এইটা একটু detective হওয়ার মতো:
কোডের প্রতিটা লাইনে গিয়ে বোঝা, “এইখানে ঠিকঠাক হচ্ছে?”, আর যেখানে সমস্যা ধরা পড়বে, সেইটা ফিক্স করে দেওয়া।

আপনি কি কখনও কোডে কোন ভুল খুঁজে না পেয়ে মাথা চুলকেছেন?
দেখতে ভালো লাগছে, কিন্তু রেজাল্ট ঠিক আসছে না। মনে হচ্ছে সব ঠিক আছে, কিন্তু কোথায় যেন কিছু একটা গড়বড়।

এইরকম সময়েই JavaScript Debugging আপনার হিরো হয়ে উঠতে পারে। আর এর সবচেয়ে সহজ ও কার্যকর মাধ্যম হলো Browser Debugger Tools!

Console.log দিয়েই তো সব হয়?

হ্যাঁ, অনেকসময় console.log() দিয়েই অনেক জটিল সমস্যা বের করা যায়।
তবে ধরেন, আপনার কোডে ২০০০ লাইন, আর একটার মধ্যে কোথাও একটা undefined হয়ে আসছে।

সব জায়গায় console.log বসানো কঠিন, বিরক্তিকর, সময়সাপেক্ষ এবং সবসময় কার্যকরও না।

তখনই দরকার হয় ব্রাউজারের ডিবাগার, যা আপনাকে:

• লাইভ কোড থামিয়ে দেখতে দেয়
• ভ্যারিয়েবল এর মান চেক করতে দেয়
• কোডের Execution flow বোঝাতে সাহায্য করে

Chrome DevTools দিয়ে JavaScript Debugging Step-by-Step

 DevTools খুলুন

যেকোনো ওয়েবপেজে গিয়ে,

• Right Click > Inspect OR
  
• Press F12 অথবা Ctrl + Shift + I
  

তারপর “Sources” Tab এ যান।

Breakpoint সেট করুন

Breakpoint মানে কোন লাইনে গিয়ে ব্রাউজারকে থামতে বলা।

👉 “Sources” ট্যাবে গিয়ে
👉 আপনার JS ফাইলের যেকোনো লাইনে ক্লিক করলে সেখানে একটা নীল মার্ক দেখা যাবে
👉 সেই লাইনে execution pause হয়ে যাবে

উদাহরণ:

function calculateTotal(price, tax) {
  let total = price + tax;
  return total;
}

calculateTotal(100, 15);

আপনি let total = price + tax; লাইনে ব্রেকপয়েন্ট দিলে, Execution সেই লাইনে থামবে।

Execution Flow বোঝা

Breakpoints সেট করা হলে, যখন ব্রাউজার ঐ কোডে যাবে, তখন Execution pause হয়ে যাবে।

DevTools এর উপরে নিচের মতো কয়েকটা বাটন পাবেন:

• ▶️ Resume (F8) কোড আবার চালানো শুরু করবে
  
• ⏭️ Step Over (F10) এক লাইন করে এগোবে
  
• ⬇️ Step Into (F11) কোনো ফাংশনের ভিতরে ঢুকবে
  
• ⬆️ Step Out (Shift + F11) কোনো ফাংশন থেকে বের হবে
  

Variables দেখতে Watch Panel ব্যবহার করুন

ডান পাশে একটা প্যানেল পাবেন:

• Scope এখানে current variables দেখা যায়
  
• Watch আপনার ইচ্ছেমতো variables টাইপ করে তাদের মান ফলো করতে পারেন
  
• Call Stack কোন ফাংশন থেকে কোন ফাংশনে ঢুকেছে সেটা দেখায়
  

Console এর শক্তি কাজে লাগান

DevTools Console Tab থেকে
debug চলাকালীন আপনি variables এর মান জানতে পারবেন:

DevTools Console Tab থেকে
 debug চলাকালীন আপনি variables এর মান জানতে পারবেন:

বা, ব্রেকপয়েন্টে pause হওয়ার পর Console এ গিয়ে লিখে দিন:price

price

Browser সরাসরি বর্তমান মান দেখিয়ে দেবে।

Real Life Example: Form Submission Bug

ধরুন, একটা ফর্ম সাবমিট করলে কিছু হচ্ছে না। আপনি JS ফাইল খুলে দেখলেন নিচের কোড:

 document.querySelector("#submitBtn").addEventListener("click", function () {
  const name = document.querySelector("#name").value;
  const email = document.querySelector("#email").value;

  if (name && email) {
    sendForm(name, email);
  }
});

কোথায় সমস্যা?

👉 #submitBtn অথবা #name, #email সিলেক্টর ভুল হতে পারে
👉 বা sendForm() ফাংশনটাই না থাকতে পারে

এইখানে Breakpoint দিয়ে লাইভ দেখে নিতে পারেন কে null আসছে।

Extra Tips for Better Debugging

 Try Catch ব্যবহার করুন

try {
  riskyFunction();
} catch (error) {
  console.error("Error occurred:", error);
}

এতে করে runtime error গুলো ধরা পড়ে সহজে।

Source Map ঠিক আছে তো?

যদি আপনি Minified বা Transpiled JS (যেমন Babel, TypeScript) ইউজ করেন, তাহলে Source Map এনেবল করে রাখুন।

না হলে ব্রাউজার ডিবাগিং করার সময় আসল লাইনের জায়গায় অন্য লাইন দেখাবে।

Mobile Debugging?

Google Chrome DevTools দিয়ে আপনি Mobile Mode অন করে Android ডিভাইসে বা responsive ভার্সনে কোড দেখতেও পারেন।

Debugging ভালোভাবে শিখতে হলে কী করবেন?

1. নিজে থেকে কোড লিখে তাতে ইচ্ছাকৃত ভুল করে দেখুন কোথায় সমস্যা আসে
   
2. প্রতিদিন Console ব্যবহার করার অভ্যাস করুন
   
3. Step-by-step Execution এ চোখ রাখুন
   

JavaScript Debugging মানে শুধুই ভুল খোঁজা না, বরং সেটা হচ্ছে আপনার কোডের ভিতর-বাহির বুঝে ফেলা।
আপনি যত বেশি ডিবাগ করবেন, তত বেশি বুঝতে পারবেন আপনার কোড কীভাবে চলছে।

একজন ভালো ডেভেলপার হবার জন্য Debugging স্কিল একদম Must-Have!
চেষ্টা করুন Chrome DevTools কে আপনার বন্ধু বানাতে।

Technology এর সকল আপডেট সবার আগে বিস্তারিত পেতে চেক করুন