JavaScript Notes

JavaScript Debugging – console Methods, DevTools, Breakpoints & Error Stack Traces

Master JavaScript debugging: console.log, console.table, console.trace, DevTools breakpoints, debugger statement, error stack traces, and debugging async code.

Debugging is the process of finding and fixing bugs — unexpected behavior in your code. JavaScript has powerful built-in tools for debugging: the console API, the debugger statement, browser DevTools, and Node.js inspect mode.

Every developer spends a significant portion of their time debugging — learning these tools makes you dramatically faster.

📊 Debugging Process Flow

text example

Bug reported / Error observed
         │
         ▼
Read the error message & stack trace
         │
         ▼
Reproduce the bug reliably
         │
         ▼
Narrow down the location
(console.log / breakpoints)
         │
         ▼
Inspect variables & state
         │
         ▼
Identify root cause
         │
         ▼
Fix & verify fix works
         │
         ▼
Test edge cases

💻 Example 1 — The `console` API: Complete Reference

Example

// console.log — general output console.log("Hello, Debug!"); console.log("Multiple:", 1, "values:", true, [1,2,3]); // console.error — red error output console.error("Something went wrong:", new Error("oops").message); // console.warn — yellow warning console.warn("This feature is deprecated"); // console.info — informational console.info("Server started on port 3000"); // console.table — display arrays/objects as table const students = [ { name: "Riya", grade: "A", score: 95 }, { name: "Aman", grade: "B", score: 82 }, { name: "Priya", grade: "A", score: 91 }, ]; console.table(students); // console.dir — display full object structure const obj = { a: 1, b: { c: 2, d: [3, 4] } }; console.dir(obj);

Output

Hello, Debug!
Multiple: 1 values: true [ 1, 2, 3 ]
Something went wrong: oops
This feature is deprecated
Server started on port 3000
┌─────────┬───────┬───────┬───────┐
│ (index) │ name  │ grade │ score │
├─────────┼───────┼───────┼───────┤
│    0    │ 'Riya'│  'A'  │  95   │
│    1    │ 'Aman'│  'B'  │  82   │
│    2    │'Priya'│  'A'  │  91   │
└─────────┴───────┴───────┴───────┘
{ a: 1, b: { c: 2, d: [ 3, 4 ] } }

💻 Example 2 — Timing and Grouping

Example

// console.time / timeEnd — measure execution time console.time("sort-benchmark"); const arr = Array.from({ length: 10000 }, () => Math.random()); arr.sort((a, b) => a - b); console.timeEnd("sort-benchmark"); // console.group / groupEnd — organize related logs console.group("User Authentication"); console.log("Checking credentials..."); console.log("Valid: true"); console.group("Token"); console.log("Generated: JWT-abc123"); console.log("Expires: 1h"); console.groupEnd(); console.groupEnd(); // console.count — count how many times called function processItem(item) { console.count("processItem called"); return item * 2; } [1, 2, 3, 4].forEach(processItem); console.countReset("processItem called");

Output

sort-benchmark: 12.847ms
User Authentication
  Checking credentials...
  Valid: true
  Token
    Generated: JWT-abc123
    Expires: 1h
processItem called: 1
processItem called: 2
processItem called: 3
processItem called: 4

💻 Example 3 — `console.trace()` and `console.assert()`

js example

// console.trace — show call stack at this point
function c() { console.trace("Trace from c()"); }
function b() { c(); }
function a() { b(); }
a();

console.log("---");

// console.assert — only logs if condition is FALSE
const score = 75;
console.assert(score >= 90, "Score is below A grade:", score);
console.assert(score >= 60, "Score is below passing:", score);  // won't log — passes
console.assert(score < 0,  "Score is negative:", score);        // won't log — false

Output

Trace from c():
    at c (script.js:2)
    at b (script.js:3)
    at a (script.js:4)
    at script.js:5
---
Assertion failed: Score is below A grade: 75

💻 Example 4 — The `debugger` Statement

The debugger statement pauses execution in DevTools (or Node.js --inspect mode) — like setting a breakpoint from code.

js example

function calculateDiscount(price, percent) {
  debugger;  // ← pauses here in DevTools! Inspect price and percent
  const discount = price * (percent / 100);
  const finalPrice = price - discount;
  return finalPrice;
}

const result = calculateDiscount(1000, 20);
console.log("Final price:", result);

Output

Final price: 800

In browser DevTools: open the Sources panel, refresh the page — execution pauses at debugger. You can inspect variables, step through line by line, and watch expressions.

💻 Example 5 — Reading Error Stack Traces

js example

function fetchData(url) {
  if (!url) throw new Error("URL is required");
  return `data from ${url}`;
}

function loadUser(id) {
  const url = id > 0 ? `/api/user/${id}` : null;
  return fetchData(url);   // throws if id <= 0
}

function initApp() {
  const user = loadUser(-1);   // bug: negative id
  console.log(user);
}

try {
  initApp();
} catch (error) {
  console.log("Error:", error.message);
  console.log("\nStack trace:");
  console.log(error.stack);
}

Output

Error: URL is required

Stack trace:
Error: URL is required
    at fetchData (debug.js:2)      ← Error originated here
    at loadUser  (debug.js:7)      ← called from here
    at initApp   (debug.js:12)     ← called from here
    at Object.<anonymous> (debug.js:16)

How to read a stack trace: Read from top to bottom. The top line is where the error was thrown. Each line below shows which function called the one above it. The bug is usually at the top — follow the chain to find where the wrong data came from.

💻 Example 6 — Debugging Async Code

Example

// Debugging promises and async/await async function fetchUser(id) { console.log(`[fetchUser] Called with id=${id}`); await new Promise(resolve => setTimeout(resolve, 50)); // simulate network if (id < 1) throw new Error(`Invalid id: ${id}`); const user = { id, name: "Riya" }; console.log(`[fetchUser] Returning:`, user); return user; } async function renderProfile(id) { console.log(`[renderProfile] Starting...`); try { const user = await fetchUser(id); console.log(`[renderProfile] Rendering: ${user.name}`); } catch (error) { console.error(`[renderProfile] Failed:`, error.message); } } renderProfile(1); renderProfile(-5);

Output

[renderProfile] Starting...
[renderProfile] Starting...
[fetchUser] Called with id=1
[fetchUser] Called with id=-5
[fetchUser] Returning: { id: 1, name: 'Riya' }
[renderProfile] Rendering: Riya
[renderProfile] Failed: Invalid id: -5

📋 Debugging Tools Quick Reference

Tool	Use When
`console.log(value)`	Quick value inspection
`console.table(array)`	Inspect arrays of objects visually
`console.error(msg)`	Mark errors in output
`console.trace()`	See the call stack at a point
`console.time/timeEnd`	Measure performance
`console.group/groupEnd`	Organize complex logs
`console.assert(cond, msg)`	Log only when condition fails
`debugger`	Pause in DevTools and inspect
`error.stack`	Read the call chain in errors

⚠️ Common Mistakes

❌ Mistake 1 — Logging Objects by Reference (Snapshot Problem)

js example

const user = { name: "Riya", score: 0 };
console.log(user);    // Shows current state when DevTools reads it — may differ from when logged!
console.log({ ...user }); // BETTER: log a snapshot (spread copies the state now)
user.score = 100;

❌ Mistake 2 — Leaving `debugger` in Production Code

js example

// NEVER ship this to production
function processOrder() {
  debugger;   // ← blocks execution for all users if DevTools is open!
  // ...
}

❌ Mistake 3 — Not Reading the Stack Trace

js example

// Most beginners see an error and immediately guess the cause.
// Always READ the stack trace first — it tells you exactly where the error is.
// Line 1 of the stack = where the error was thrown
// Follow each line up to find where the bad data came from

❌ Mistake 4 — Using `console.log` Instead of `console.error` for Errors

js example

// BAD — errors look like normal output
console.log("Error:", err);

// GOOD — errors are visually distinct and filtered separately
console.error("Error:", err);

🎯 Key Takeaways

Read the error message first — it usually tells you exactly what went wrong
Stack trace shows the exact function chain — follow it from top to bottom
console.table() is excellent for debugging arrays of objects
console.time/timeEnd identifies performance bottlenecks
debugger pauses execution in DevTools — far more powerful than console.log for complex bugs
Always remove debugger statements before committing or deploying code
For async bugs: add console.log at entry and exit of each async function to trace the flow

❓ Interview Questions

Q1. What are the most useful console methods for debugging? > console.log() for general output, console.error() for errors (red), console.warn() for warnings (yellow), console.table() for arrays/objects, console.trace() for call stacks, console.time/timeEnd for performance measurement.

Q2. What is the debugger statement? > It's a JavaScript keyword that pauses execution when browser DevTools (or Node.js --inspect) is open. It acts like a programmatically placed breakpoint, letting you inspect variables, step through code line-by-line, and evaluate expressions in the console.

Q3. How do you read a JavaScript stack trace? > The first line is the error type and message. Each subsequent line shows a function name and file/line number. Read top to bottom — the top is where the error was thrown, and each line below is the caller of the one above. The bug's root cause is usually where bad data entered the chain.

Q4. How do you debug asynchronous JavaScript code? > Add descriptive console.log statements at the start and end of async functions with the function name and key values. Use debugger in async functions — DevTools pauses correctly. In Node.js, use --inspect flag and Chrome DevTools for async debugging. Check for missing await keywords first.

Q5. What is the difference between console.log(obj) and console.log({...obj})? > console.log(obj) logs a reference — if you expand the object in DevTools later, you see the current state (which may have changed after logging). console.log({...obj}) logs a shallow copy — a snapshot of the values at the moment of logging.

Q6. What does console.assert() do? > It logs a message only when the first argument is falsy. Unlike if + console.log, it's concise and clearly communicates "this should always be true." Useful for catching unexpected states during development without adding full error handling.

Q7. How do you measure the performance of a function? > Use console.time("label") before calling the function and console.timeEnd("label") after. The elapsed time in milliseconds is logged. For more precise measurements, use the performance.now() API.

Q8. What is a common mistake when debugging objects with console.log? > Logging an object reference — when you later expand it in browser DevTools, you see the object's current (mutated) state, not its state at the time of logging. Use console.log(JSON.stringify(obj)) or spread ({...obj}) to capture an immutable snapshot.

Exam Focus

Revise definitions, diagrams, examples, and short-answer points for JavaScript Debugging – console Methods, DevTools, Breakpoints & Error Stack Traces.

Interview Use

Prepare one clear explanation, one practical example, and one common mistake for this JavaScript Master Course topic.

Search Terms

javascript-complete-guide, javascript master course, javascript, complete, guide, error, handling, debugging

Continue learning this concept

Error HandlingJavaScript Custom Errors – Extend Error Class, Custom Error Types & instanceofLearn to create custom error classes in JavaScript by extending Error. Build ValidationError, NotFoundError, NetworkError with extra properties and instanceof checks.Error HandlingJavaScript throw Statement – Throw Errors, Custom Messages & Error TypesLearn the JavaScript throw statement: throw Error objects, custom error classes, validation guards, and best practices for intentional error signaling with interview Q&A.Error HandlingJavaScript Try Catch Finally – Error Handling Complete GuideMaster JavaScript try...catch...finally with error flow diagrams, async error handling, nested try-catch, real-world examples, common mistakes, and interview Q&A.Advanced JavascriptJavaScript apply() Method - Complete Guide with ExamplesMaster JavaScript apply() method with syntax, this binding, array arguments, function borrowing, real-world use cases, common mistakes, and interview Q&A.Advanced JavascriptJavaScript bind() Method - Complete Guide with ExamplesMaster JavaScript bind() with permanent this binding, partial application, event handlers, currying patterns, common mistakes, and top interview Q&A.Advanced JavascriptJavaScript call() Method - Complete Guide with ExamplesMaster JavaScript call() method: this binding, syntax, constructor inheritance, function borrowing, strict mode differences, and top interview Q&A.

PreviousJavaScript Custom Errors – Extend Error Class, Custom Error Types & instanceof NextJavaScript throw Statement – Throw Errors, Custom Messages & Error Types

📊 Debugging Process Flow

💻 Example 1 — The console API: Complete Reference

💻 Example 2 — Timing and Grouping

💻 Example 3 — console.trace() and console.assert()

💻 Example 4 — The debugger Statement

💻 Example 5 — Reading Error Stack Traces

💻 Example 6 — Debugging Async Code

📋 Debugging Tools Quick Reference

⚠️ Common Mistakes

❌ Mistake 1 — Logging Objects by Reference (Snapshot Problem)

❌ Mistake 2 — Leaving debugger in Production Code

❌ Mistake 3 — Not Reading the Stack Trace

❌ Mistake 4 — Using console.log Instead of console.error for Errors

🎯 Key Takeaways

❓ Interview Questions

Continue learning this concept

📊 Debugging Process Flow

💻 Example 1 — The console API: Complete Reference

💻 Example 2 — Timing and Grouping

💻 Example 3 — console.trace() and console.assert()

💻 Example 4 — The debugger Statement

💻 Example 5 — Reading Error Stack Traces

💻 Example 6 — Debugging Async Code

📋 Debugging Tools Quick Reference

⚠️ Common Mistakes

❌ Mistake 1 — Logging Objects by Reference (Snapshot Problem)

❌ Mistake 2 — Leaving debugger in Production Code

❌ Mistake 3 — Not Reading the Stack Trace

❌ Mistake 4 — Using console.log Instead of console.error for Errors

🎯 Key Takeaways

❓ Interview Questions

Continue learning this concept

💻 Example 1 — The `console` API: Complete Reference

💻 Example 3 — `console.trace()` and `console.assert()`

💻 Example 4 — The `debugger` Statement

❌ Mistake 2 — Leaving `debugger` in Production Code

❌ Mistake 4 — Using `console.log` Instead of `console.error` for Errors

💻 Example 1 — The `console` API: Complete Reference

💻 Example 3 — `console.trace()` and `console.assert()`

💻 Example 4 — The `debugger` Statement

❌ Mistake 2 — Leaving `debugger` in Production Code

❌ Mistake 4 — Using `console.log` Instead of `console.error` for Errors