Debugging means finding out why your code is not behaving the way you expect.
It is one of the most important skills in a developer’s toolbox, and VS Code provides powerful tools that make debugging easier, clearer, and faster.
Before you ever add logs or rewrite your code, debugging helps you see what your program is actually doing step by step.
Debugging is the process of:
Instead of guessing what the code does, you observe it directly.
💡 Debugging makes invisible behavior visible.
https://i0.wp.com/www.alphr.com/wp-content/uploads/2022/06/VsCode-19.png?ssl=1&w=730&utm_source=chatgpt.com
https://codingcampus.net/wp-content/uploads/2022/03/Breakpoints-554x600-1.png?utm_source=chatgpt.com
https://i.stack.imgur.com/mXOnm.png?utm_source=chatgpt.com
The debugger allows you to:
It’s like watching your code in slow motion.
A breakpoint tells VS Code where to pause the program.
To set one, click to the left of a line number:
https://i0.wp.com/www.alphr.com/wp-content/uploads/2021/09/1-86.png?ssl=1&w=796&utm_source=chatgpt.com
https://uploads.sitepoint.com/wp-content/uploads/2023/11/1699956207vs-code-debug-step3.png?utm_source=chatgpt.com
When a breakpoint is active:
Breakpoints are the core of debugging — they let you inspect everything at the exact moment you need.
💡 A single breakpoint can reveal the truth faster than 20 console.logs.
Open the Run & Debug panel on the left (the play icon with the bug).
https://www.docker.com/app/uploads/2025/10/oct2025-blog-01.png?utm_source=chatgpt.com
https://vscode.js.cn/assets/docs/debugtest/debugging/debug-start.png?utm_source=chatgpt.com
Then click “Run and Debug.”
If VS Code asks how to run your file, choose Node.js (for JavaScript).
Your program will start running, then pause when it hits your breakpoint.
Once paused, the debugger toolbar appears at the top:
https://code.visualstudio.com/assets/docs/debugtest/debugging/debugging_hero.png?utm_source=chatgpt.com
https://pawelgrzybek.com/continue-step-over-step-into-and-step-out-actions-in-visual-studio-code-debugger-explained/2021-11-04-2.gif?utm_source=chatgpt.com
Here’s what each button does:
Continue (▶️)
Resume running the code until the next breakpoint.
Step Over (↷)
Run the current line and move to the next line.
Use this to keep debugging inside the same file.
Step Into (↓)
Enter the function being called on the current line.
Use this when you want to see what happens inside a function.
Step Out (↑)
Exit the current function and go back to the caller.
Restart (⟳)
Start the program again from the beginning.
Stop (■)
End the debugging session.
💡 Most debugging is done using “Step Over” — it shows your code’s flow line by line.
When execution pauses, you can look at the Variables section in the sidebar:
https://code.visualstudio.com/assets/docs/editor/debugging/debugging_hero.png?utm_source=chatgpt.com
https://i.sstatic.net/grjPI.png?utm_source=chatgpt.com
You can inspect:
Clicking on a variable expands it so you can inspect its inner values.
You can add variables or expressions you want to monitor during debugging.
Example watches:
total
user.name
items.length
price * quantity
This helps you track how values change step-by-step.
💡 Watching expressions makes debugging complex logic much easier.
The Call Stack panel shows how your program reached the current line.
https://www.percona.com/blog/wp-content/uploads/2023/10/debugging_callstack-1024x614.png?utm_source=chatgpt.com
https://leonardomontini.dev/_astro/_callstack.gQU2ICAF_ZJK1Qs.webp?utm_source=chatgpt.com
Each entry shows:
This is extremely useful when debugging nested function calls or unexpected behavior.
The Debug Console allows you to run JavaScript commands while the program is paused.
Example:
total
user.address.city
items.map(i => i.price)
This is like opening a live terminal into your paused program.