Stepping Through Code
Step over, into, and out of functions.
Stepping Through Code is a free JavaScript Academy lesson on CoddyKit — lesson 3 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the JavaScript Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
Stepping Through Code
Once paused at a breakpoint, you step through code one operation at a time to watch how state changes line by line.
Resume
The resume button continues normal execution until the next breakpoint or until the program finishes. Use it when you have seen enough at the current pause.
Step Over
Step over runs the current line fully, including any function it calls, then pauses on the next line in the same function. The called function is not entered.
function helper() {
return 5
}
function main() {
const a = helper()
const b = a + 1
return b
}Step Into
Step into enters a function call on the current line, pausing at its first statement so you can debug inside it.
function helper() {
const x = 10
return x
}
function main() {
return helper()
}Step Out
Step out finishes the current function and pauses at the line right after the call that brought you into it. Use it to leave a function you no longer need to inspect.
Choosing a Step Command
Step over when a function is trusted, step into to investigate it, and step out once you have confirmed the inner logic is fine.
The Call Stack Pane
While stepping, the call stack pane shows the chain of function calls that led to the current line. Clicking a frame jumps to that context.
Watching State Change
As you step, the Scope and Watch panes update, letting you see exactly which line modifies a variable unexpectedly.
Stepping in Loops
Inside a loop, stepping repeats the body each iteration. A conditional breakpoint is often faster than stepping through many iterations manually.
function sumTo(n) {
let total = 0
for (let i = 1; i <= n; i++) {
total += i
}
return total
}Stepping Into Library Code
Stepping into can drop you into library internals. DevTools offers a feature to ignore listed scripts so you stay in your own code.
A Typical Workflow
Set a breakpoint near a suspected bug, then step line by line, watching variables until you find where reality diverges from expectation.
Quick Check
Test your stepping knowledge.
Recap
Recap: Stepping moves through code under control.
- Step over runs a line without entering calls
- Step into enters a called function
- Step out finishes the current function
- The call stack shows how you arrived
Frequently asked questions
Is the “Stepping Through Code” lesson free?
Yes — the full text of “Stepping Through Code” is free to read here on the web, and the JavaScript Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the JavaScript Academy course, upgrade to CoddyKit PRO.
What will I learn in “Stepping Through Code”?
Step over, into, and out of functions. You practise JavaScript Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start JavaScript Academy?
No prior experience is required. JavaScript Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Stepping Through Code” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this JavaScript Academy lesson?
Yes. Every JavaScript Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- Beyond console.log
- Setting Breakpoints
- Stepping Through Code
- Reading Stack Traces