Blog

JavaScript Me Kon Konse Debugging Techniques Hote Hain – JavaScript Debugging Techniques

1. Console Logging (console.log)

Explanation:

Ye 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 ho.

Ye especially useful hai jab aapko lagta hai ki koi variable galat value store kar raha hai ya koi function expected output nahi de raha.

Examples:

let user = {name: "Naman", age: 26};
console.log("User object is:", user);

function add(a, b) {
  console.log("Adding:", a, "+", b);
  return a + b;
}
console.log("Result:", add(5, 10));

Use Case:
Aap ek form validation project bana rahe ho aur ek input ka value galat aa raha hai. Console logging se aap check kar sakte ho ki user ke type karne ke baad actual value kya aa rahi hai.

2. Browser Developer Tools (DevTools)

Explanation:

Har modern browser ke paas DevTools hota hai jaha aap apne JavaScript code ko inspect aur debug kar sakte ho.

Chrome DevTools me aap Console, Sources, Network aur Application tabs use karke har cheez analyze kar sakte ho.

Features:

  • Console Tab: Errors aur logs dekhne ke liye.
  • Elements Tab: HTML + CSS inspect karne ke liye.
  • Sources Tab: JavaScript code dekhne aur breakpoints lagane ke liye.
  • Network Tab: API requests, response status aur load time analyze karne ke liye.

Example (Error Handling):
Aapne myFunction() call kiya but wo define hi nahi hai. Console tab me aapko Uncaught ReferenceError: myFunction is not defined show hoga.

3. Breakpoints

Explanation:

Breakpoint lagane ka matlab hai code ko ek specific line par rok dena.

Isse aap step-by-step execution kar sakte ho (line by line) aur har variable ki current value dekh sakte ho.

Kaise Use Kare:

  1. Chrome DevTools open karo (F12).
  2. Sources tab me jao.
  3. Line number par click karke breakpoint lagao.

Example:

function multiply(a, b) {
  let result = a * b; // yaha breakpoint lagao
  return result;
}
multiply(4, 5);

Use Case:
Aap ek shopping cart bana rahe ho jaha total price galat calculate ho raha hai. Breakpoint se step by step check kar paoge ki kaha galti ho rahi hai.

4. Watch Expressions

Explanation:

Watch expressions ka use karke aap apne interest wale variables ko continuously monitor kar sakte ho.

DevTools me “Watch” panel hota hai jaha aap variable ka naam likhte ho aur uski har update turant dikh jaati hai.

Example:

let price = 100;
let quantity = 3;
let total = price * quantity; // watch total

Watch tab me agar aap total daal do to value har update ke sath dikhne lagegi.

Use Case:
Aap ek banking application bana rahe ho aur “accountBalance” variable har transaction ke sath update ho raha hai. Aap watch me daal kar uski changes live dekh sakte ho.

5. Call Stack Analysis

Explanation:

Jab ek function dusre function ko call karta hai, to ek stack (call stack) ban jaata hai.

Agar error aata hai to DevTools aapko exact stack trace dikhata hai, matlab kaunsa function kiske andar call hua aur kis line par problem aayi.

Example:

function A() { B(); }
function B() { C(); }
function C() { throw new Error("Something went wrong!"); }
A();

Console me error aayega aur call stack dikhayega:
C -> B -> A

Use:
Aap ek payment gateway integration kar rahe ho aur “undefined function” error aata hai. Stack trace se turant samajh jaoge ki kis layer me problem hai.

6. Try…Catch Blocks

Explanation:

Ye runtime errors ko handle karne ka tarika hai.

Agar try block me error aata hai to code crash nahi hota, balki wo catch block me chala jata hai.

Example:

try {
  let data = JSON.parse("{invalid json}");
} catch (err) {
  console.error("Error occurred:", err.message);
}

Use:
Aap ek API se JSON data la rahe ho. Agar API galat response bhejti hai to try-catch ke bina pura app crash ho jaayega. Try-catch ke sath aap error ko gracefully handle kar sakte ho.

7. Debugger Keyword

Explanation:

debugger keyword ek manual breakpoint ki tarah kaam karta hai.

Jab bhi code execution debugger; statement tak pohonchta hai, execution stop ho jaata hai aur DevTools me debug karne ka option milta hai.

Example:

function calculate(a, b) {
  debugger;
  return a + b;
}
calculate(10, 20);

Use:
Aap ek game project bana rahe ho aur ek point par player ke score sahi update nahi ho rahe. Aap debugger; laga kar us point par execution stop karke values inspect kar sakte ho.

8. Error Stack Trace

Explanation:

Error hone par browser aapko file name, function name aur line number dikhata hai.

Isse aapko pata chal jaata hai ki error kaha se originate hua hai.

Example:

function testError() {
  throw new Error("Custom error");
}
testError();

Console me output:
Uncaught Error: Custom error at testError (script.js:2)

Use:
Aap ek multi-file project bana rahe ho. Agar kisi file me error aaya to stack trace se turant samajh jaoge ki kis file aur line number par issue hai.

9. Linting Tools (ESLint, JSHint)

Explanation:

Linting tools automatically aapke code ko analyze karte hain aur possible errors highlight karte hain.

Ye ek preventive debugging hai – error hone se pehle hi aapko warning mil jaati hai.

Examples:

  • Undefined variable use karna.
  • Extra semicolon lagana.
  • Function me unused parameter.

Use:
Aap ek team project me kaam kar rahe ho jaha multiple developers code likh rahe hain. ESLint ensure karta hai ki sab consistent aur error-free code likhe.

10. Debugging Asynchronous Code

Explanation:

Async code (Promises, async/await, setTimeout, API calls) debugging ke liye tricky hota hai.

Aapko ensure karna hota hai ki har step pe proper error handling aur logging ho.

Example with Promise:

fetch("https://api.example.com/data")
  .then(res => res.json())
  .then(data => console.log("Data:", data))
  .catch(err => console.error("Error:", err));

Example with Async/Await:

async function fetchData() {
  try {
    let res = await fetch("https://api.example.com/data");
    let data = await res.json();
    console.log("Data:", data);
  } catch (err) {
    console.error("Error:", err);
  }
}
fetchData();

Use:
Aap ek weather app bana rahe ho jo live API se data fetch karta hai. Agar API down hai to error handling karna zaroori hai, warna app crash ho jaayega.

11. Remote Debugging

Explanation:

Mobile devices me debugging karna mushkil hota hai.

Chrome DevTools ka use karke aap Android device ko PC se connect karke real-time debugging kar sakte ho.

Steps:

  1. Mobile me developer mode on karo.
  2. USB debugging enable karo.
  3. Chrome me chrome://inspect open karo.

Use Case:
Aap ek responsive website bana rahe ho jo desktop me sahi chal rahi hai but mobile me crash ho rahi hai. Remote debugging se turant mobile specific issues identify kar sakte ho.

12. Debugging with IDEs (VS Code, WebStorm)

Explanation:

IDEs me built-in debuggers hote hain jo advanced features provide karte hain.

Aap directly IDE me breakpoints set kar sakte ho, watch expressions bana sakte ho aur step-by-step code run kar sakte ho.

Example:
VS Code me:

  1. Code likho.
  2. Line number ke left par click karke breakpoint lagao.
  3. Debug mode run karo (F5).

Use Case:
Aap ek Node.js backend project bana rahe ho. IDE debugging ka use karke aap API request flow ko step-by-step analyze kar sakte ho.

Conclusion :

JavaScript debugging ek must-have skill hai jo har developer ko aani chahiye.

Beginners ke liye → console.log aur error messages best hain.

Intermediate ke liye → breakpoints, debugger, watch expressions zaroori hote hain.

Advanced level pe → linting tools, remote debugging, aur IDE debugging ka use hota hai.

Agar aap debugging techniques master kar lete ho, to aapke coding errors minimum ho jaayenge aur productivity maximum.

Quiz: Test Your Debugging Knowledge in JavaScript

Bonus: Practical Application!

JavaScript developer ke liye debugging ek superpower hai!

Debugging ka matlab hai code ke errors ko dhundhna aur fix karna. JavaScript mein debugging ke kuch useful techniques:

  • console.log() debugging → Variables aur values ko track karna.
  • Breakpoints in Browser DevTools → Code execution ko pause karke step-by-step check karna.
  • Debugger keyword → Code mein direct debugging point insert karna.
  • Error Stack Traces → Error kaha se aaya hai uska flow samajhna.
  • Linting Tools (ESLint) → Code likhte waqt hi galtiyon ko pakadna.

Ye techniques aapke code ko bug-free aur reliable banati hain.

Leave a Reply