"Debugging 102:"Stack Trace (JavaScript) — How to Read It Like a Pro

🧩 What It Means

A stack trace shows the path of function calls that led to an error.

It’s like a breadcrumb trail 🍞 your code leaves behind when it crashes — letting you trace exactly where and how things went wrong.

💥 Example

function first() {
  second();
}

function second() {
  third();
}

function third() {
  // undefined variable causes ReferenceError
  console.log(message);
}

first();

💀 Error Message

ReferenceError: message is not defined
    at third (main.js:9:15)
    at second (main.js:5:3)
    at first (main.js:2:3)
    at main.js:12:1

✅ Fix

function third() {
  const message = "Hello, world!";
  console.log(message);
}

🧠 How to Read It

1️⃣ The first line tells the actual error: ReferenceError: message is not defined

2️⃣ Each following line shows which function was running and where (file, line, column).

3️⃣ The top of the trace is the error point; the bottom shows the program entry.

🧰 Debug Tips

• Click file links in DevTools — it jumps straight to the error.
• Use console.trace() to print your current call stack manually.
• Async functions can break trace order — use Chrome’s “Async Stack Trace” option or Node’s async_hooks to track them properly.

---