Practical JavaScript Debugging in DevTools

🟡 Intermediate

📖 Definition

Debugging is the process of finding, diagnosing, and fixing errors, unexpected behavior, and performance bottlenecks in code. JavaScript provides console methods, debugger statements, and browser Developer Tools (DevTools) for inspection.

🇮🇳 Hindi

Debugging se hum apne code ke errors ko dhoondhte hain aur fix karte hain. Browser ke Developer Tools (F12) ka Console, Sources, aur Breakpoints use karke hum code ko line-by-line execute karke variables ki state monitor kar sakte hain.

🚩 Marathi

Debugging cha wapar karun kod madhil chuka (bugs) shodhlya aani dur kelya jaatat. Browser chya DevTools madhye Breakpoints lavun code line-by-line tapasla jato.

📝 Modern Console Logging Methods

// 1. Log simple messages
console.log("User logged in successfully");

// 2. Log Warnings & Errors with visual highlighting
console.warn("API token expiring soon!");
console.error("Failed to connect to backend service");

// 3. Tabular representation for arrays of objects
const users = [
  { id: 1, name: "Anita", role: "Dev" },
  { id: 2, name: "Kiran", role: "Design" }
];
console.table(users);

// 4. Measuring execution time
console.time("LoopPerformance");
for (let i = 0; i < 1000000; i++) {}
console.timeEnd("LoopPerformance");

🧠 Using Breakpoints in Browser DevTools

  1. Open DevTools in Google Chrome or Firefox (F12).
  2. Navigate to the Sources (or Debugger) tab.
  3. Open your JavaScript file in the left panel.
  4. Click on any line number to set a Breakpoint (a red dot will appear).
  5. Trigger the code action in your application. The browser will pause execution at that exact line!
  6. Inspect variable values in the Scope panel, view the function execution chain in Call Stack, and step through code line by line using controls:
    • Step Over (F10): Execute next line.
    • Step Into (F11): Jump inside called function.
    • Step Out (Shift+F11): Finish current function and return.
    • Resume (F8): Continue normal execution.

📝 Programmatic Breakpoint (debugger)

Adding the debugger; statement inside your JavaScript code forces the browser to automatically pause execution when DevTools is open.

function calculateCartTotal(cartItems) {
  let total = 0;

  for (let i = 0; i < cartItems.length; i++) {
    let item = cartItems[i];

    // Execution pauses here automatically if DevTools is open
    debugger;

    total += item.price * item.quantity;
  }

  return total;
}

calculateCartTotal([{ name: "Book", price: 200, quantity: 2 }]);

🧪 Try It Yourself

  1. Add console.table() with an array of 3 products in your console.
  2. Place a debugger; statement inside a loop and step through it in Chrome DevTools.

⚠️ Common Mistakes

  • Relying exclusively on console.log() statements everywhere instead of using breakpoints in DevTools.
  • Leaving debugger; statements or excessive console.log() outputs in production code.

🌍 Real-World Usage

Inspecting network request payloads, tracking variable state mutations during UI updates, isolating memory leaks, and fixing logical errors.

💡 Remember

Breakpoints let you pause execution and inspect variables live in memory without cluttering your code with console.log() statements.

🧭 Navigation

← JS Home ← Previous: Mini Projects