JavaScript Me Kon Konse Debugging Techniques Hote Hain

Debugging Kya Hai?

Debugging ek developer ke liye sabse zaroori skills me se ek hai. Iska matlab hai apne code me maujood errors (bugs) ko dhundhna, unka kaaran pata karna, aur unhe aakhir me fix karna. Efficient debugging aapka bahut saara time aur frustration bacha sakti hai.

Common Debugging Techniques

1. Console Logging (console.log)

Yeh sabse basic aur beginner-friendly debugging technique hai. Aap console.log() ka use karke variables ki value, function outputs, aur code execution ka flow track kar sakte hain.

function calculateArea(width, height) {
  console.log("Width:", width); // Check the width
  console.log("Height:", height); // Check the height
  let area = width * height;
  console.log("Calculated Area:", area); // Check the result
  return area;
}

2. Browser Developer Tools (DevTools)

Har modern browser (Chrome, Firefox) DevTools (F12) ke saath aata hai, jo debugging ke liye ek powerful suite hai. Iske 'Console' tab me aapko errors aur logs dikhte hain, aur 'Sources' tab me aap code ko inspect kar sakte hain.

3. Breakpoints

Breakpoint code execution ko ek specific line par rok deta hai. Isse aap uss exact moment par sabhi variables ki value, scope, aur call stack ko check kar sakte hain. Aap DevTools ke 'Sources' tab me jaakar line number par click karke breakpoint laga sakte hain.

4. The debugger Keyword

debugger; keyword ek manual breakpoint ki tarah kaam karta hai. Jab aap apne code me yeh line likhte hain, toh browser (agar DevTools open hai) execution ko uss line par pause kar deta hai.

function checkValue(x) {
  if (x < 0) {
    debugger; // Execution yahan ruk jayega agar x negative hai
  }
  // ... rest of the code
}

5. Try...Catch Blocks

Yeh runtime errors ko handle karne ka tarika hai. Agar try block me error aata hai, toh code crash nahi hota, balki control catch block me chala jaata hai jahan aap error ko gracefully handle kar sakte hain.

try {
  let data = JSON.parse("{ 'name': 'Amit', 'age': 30 }"); // Invalid JSON
  console.log(data);
} catch (error) {
  console.error("Parsing error:", error.message);
}

6. Linting Tools (ESLint)

Linting tools (jaise ESLint) static code analysis karke code likhte waqt hi potential errors aur style mistakes ko highlight kar dete hain. Yeh ek preventive debugging technique hai.

Key Takeaways

• Debugging ka matlab errors ko dhundhna aur fix karna hai.
• console.log() shuruaati debugging ke liye sabse aasan tarika hai.
• Breakpoints aur debugger; keyword se aap code execution ko pause karke values inspect kar sakte hain.
• Browser DevTools (F12) debugging ke liye aapka sabse accha dost hai.
• try...catch se aap runtime errors ko handle karke application ko crash hone se bacha sakte hain.