⚙ Day 26 — JavaScript Debugging Tools

on

⚙ Day 26 — JavaScript Debugging Tools

Hey Guys, Welcome to Day 26 of the JavaScript Advanced Course! Today, we dive deep into the world of JavaScript Debugging. Debugging is not just finding errors — it’s the process of understanding how your code behaves, catching mistakes early, improving performance, tracking unexpected states, and building higher-quality software. This lesson teaches all the tools used by professionals today: Chrome DevTools, breakpoints, call stacks, watches, stepping, network debugging, performance profiling, memory inspection, event breakpoints, and best debugging practices.

🔍 1. Why Debugging Matters in Real Development

Beginner programmers usually rely on console.log() to find issues, but as your applications grow, logs are not enough. Modern web apps involve:

  • Multiple files and modules
  • Async operations (fetch, promises, timers)
  • Large UI components
  • Race conditions
  • Third-party libraries
  • Network calls

To solve issues in such apps, you must know how to observe code step-by-step, inspect variables, set breakpoints, profile performance, view memory usage, and analyze network failures — all of which you master today.

🛠 2. Chrome DevTools — Your Primary Debugging Weapon

Open DevTools by pressing:

  • Windows/Linux: F12 or Ctrl + Shift + I
  • Mac: Cmd + Option + I

DevTools contains the most important debugging panels:

  1. Elements — inspect page structure
  2. Console — logs, errors, JS execution
  3. Sources — debugging JS files
  4. Network — track API requests
  5. Performance — measure speed
  6. Memory — detect leaks
  7. Application — inspect LocalStorage, cookies, etc.

⛔ 3. Console Tools Professionals Use

✔ console.log() — But Smarter

console.log("User Data:", user);
console.log({ user });
console.log("Count %d", count);
console.log("%cStyled log", "color: green; font-size: 16px");

✔ console.table()

console.table(users);

✔ console.warn(), console.error()

Use these to highlight important logs clearly.

✔ console.time() for measuring speed

console.time("loop");
for (let i=0; i<1000000; i++){}
console.timeEnd("loop");

🧩 4. Sources Panel — Breakpoints & Step Debugging

The Sources panel is the heart of debugging. You can stop code execution at any line (breakpoint) and inspect variables in real time.

✔ Setting breakpoints

Click on a line number in DevTools → Sources → file.js Execution pauses there.

✔ Step over / Step into / Step out

These let you move through execution like a movie:

  • Step over — run next line
  • Step into — go inside a function
  • Step out — exit the current function

✔ Inspecting variables live

When paused:

  • Hover over a variable to see its value
  • Use “Scope” panel → Local / Global variables
  • Modify variable values during pause!

✔ Watch expressions

Track a variable value continuously as you step through code.

✔ Conditional breakpoints

Break only when a condition is true:

Right click → Add conditional breakpoint  
Enter: index === 50

This pauses only when index becomes 50.

🌐 5. Network Panel — Debugging APIs

The Network panel helps diagnose:

  • API failures
  • Slow responses
  • Wrong payloads
  • CORS issues
  • Authentication problems

✔ Check request & response

Click on any request to see:

  • Headers
  • Payload
  • Response body
  • Timing

✔ Filter requests

Use filters like Fetch/XHR or search by name.

✔ Replay requests

Right-click → Replay XHR Great for debugging POST requests.

🚀 6. Performance Panel — Detecting Slow Code

Use “Record” to capture a performance trace and see:

  • Long tasks
  • Heavy JS execution
  • Layout & paint costs
  • Memory spikes

✔ Common performance issues

  • Inefficient loops
  • Too many DOM reflows
  • Long-running event handlers
  • Unnecessary re-renders

🧠 7. Memory Panel — Fixing Memory Leaks

Leaks happen when objects never get garbage-collected.

✔ Snapshot analysis

Take a memory snapshot, filter by “detached nodes”, and see which JS references keep them alive.

✔ Common leak sources

  • Uncleared intervals
  • Event listeners not removed
  • Global variables
  • Caches not cleaned

📝 8. Debugging async code

Async debugging is harder because errors appear later than the code that caused them.

✔ Enable async stack traces

DevTools → Settings → “Enable async stack traces”

✔ Debugging promises

Use the “Async” section in the call stack for promise chains.

✔ Pause on exceptions

Debugger → Break on → “uncaught exceptions”

🧪 9. Real Debugging Example

Here is a buggy code snippet — let’s debug it step by step: 

async function loadUser() {
  const res = await fetch("/api/user");
  const data = await res.json();
  console.log(data.profile.name.toUpperCase());
}

❌ Possible issues:

  • API fails → res.ok is false
  • profile is missing → undefined error
  • name is missing → undefined.toUpperCase()

✔ Improved debug-safe version

async function loadUser() {
  const res = await fetch("/api/user");
  if (!res.ok) throw new Error("API failed");
  
  const data = await res.json();
  console.log(data?.profile?.name?.toUpperCase() ?? "No name");
}

🏁 Summary

You learned everything you need to debug modern JavaScript: console tools, breakpoints, stepping, network failures, performance issues, memory leaks, and async debugging. This skill separates junior developers from true professionals.

Comments

Post a Comment