🐞 Mastering JavaScript Debugging in DevTools – A Guide to Step, Step Over, Step Into, and More

When something breaks in your JavaScript code, adding a console.log() can help.
But to truly understand what’s happening line-by-line, you need to use the Debugger in your browser's DevTools.

Modern browsers like Chrome, Firefox, and Edge come with powerful tools to pause, inspect, and step through code like a pro.
This post walks you through the five most important debugging controls you’ll use:

1. Resume Script Execution

2. Step Over Next Function Call

3. Step Into Next Function Call

4. Step Out of Current Function

5. Step (Next Statement)

---

🧰 Getting Started

1. Open DevTools (Right-click → Inspect → Sources tab)

2. Set a breakpoint by clicking the line number in your JavaScript file

3. Reload the page or trigger the code – the browser will pause at the breakpoint

Let’s break down what each control does:

---

1️⃣ ▶️ Resume Script Execution

Icon: ▶️
Keyboard: F8

This tells the browser:

“Continue running the code until the next breakpoint (or until it finishes).”

✅ Use When:

• You’ve finished inspecting the paused state

• You want to skip ahead to the next breakpoint

---

2️⃣ ⏭ Step Over Next Function Call

Icon: ⏭️ (curved arrow over a dot)
Keyboard: F10

“Run this line, but don’t go inside any function it calls.”

If the current line calls a function, Step Over executes the entire function, but stays at the top level of the current function.

function greet(name) {
  return `Hello, ${name}`;
}

function main() {
  let msg = greet("Pushpesh"); // <– Step Over will run greet() but NOT enter it
  console.log(msg);
}

---

3️⃣ ⏬ Step Into Next Function Call

Icon: ⏬ (arrow pointing into a dot)
Keyboard: F11

“Run this line and go inside any function it calls.”

Great for understanding how a function works, not just what it returns.

function add(a, b) {
  return a + b;  // ← You'll step into this line if add() is called
}

let result = add(2, 3); // Step Into goes here first

---

4️⃣ ⏫ Step Out of Current Function

Icon: ⏫ (arrow out of a box)
Keyboard: Shift + F11

“I went too deep — please finish this function and take me back.”

This is useful when you’ve stepped into a function but don’t want to keep going through every line. It will run the rest of the function and return to where it was called.

---

5️⃣ 👉 Step (Next Statement)

Icon: 👉 (arrow pointing to the right)
Keyboard: F9 (Firefox) / F10 (Edge) / often same as Step Over

“Execute the next line — no matter what it is.”

This moves one line forward regardless of whether it’s a function call, declaration, or simple expression.

---

🧪 Bonus: Watching Variables as You Step

While paused:

• Use the Scope panel to see current variable values

• Use the Watch panel to track specific variables or expressions

• Hover over a variable to see its current value in a tooltip

---

🧠 Summary Table

---

🚀 Final Tips for Debugging Smarter

• Use debugger; in your code to auto-trigger a pause

• Minimize console logging — DevTools gives live state

• Use conditional breakpoints to pause only when a certain value is hit