Teachers

What is debugging?

Debugging is the process of finding out why your code is not behaving the way you expect. When your program gives the wrong output, crashes, or behaves strangely, debugging helps you understand what is happening inside your code.

Instead of guessing, debugging allows you to pause your program and observe it step by step. You can inspect what values your variables contain, follow the order in which your code runs, and identify the exact moment where something goes wrong.

In other words, debugging helps you understand not just that something is wrong, but why it is wrong.

Why do we need debugging?

Let’s think about a very common situation when writing code:

You run your program… and it doesn’t work.

Before we explain debugging further, take a moment and ask yourself these questions:

Questions for you

Have you ever written code that looks correct, but still fails?
Have you ever stared at your code thinking: “Why is this not working?”
Have you ever fixed something… and then something else broke?
Have you ever added lots of console.log just to figure out what is happening?

If your answer is “yes” to any of these, then you’ve already felt the need for debugging.

So why is debugging important?

Debugging is important because it helps you solve problems in a smart and structured way. Without debugging, most beginners do one of these things:

randomly change code and hope it works
rewrite the whole function
add many console.log statements
get stuck and frustrated

Debugging gives you a better approach. It helps you observe the program while it runs, so you can understand what’s happening instead of guessing. You can see the values of variables in real time and check the exact path your code is taking.

This means you can fix the actual cause of the problem instead of trying random solutions.

<aside>

💡 Debugging makes invisible behavior visible.

</aside>

What debugging allows you to do

Debugging helps you:

pause your code at any point
inspect variable values
check the flow of execution
confirm assumptions
find the exact moment where things go wrong

Once you understand what happens step by step, fixing the bug becomes much easier.

Debugging vs `console.log()`

Feature	`console.log()`	Debugging (VS Code Debugger)
What it is	Printing values to the terminal	A tool that lets you pause and inspect your code while it runs
How it works	You add logs manually and run the program again	You set breakpoints and step through the code line by line
Speed	Slow when you have many logs (you re-run often)	Faster because you can inspect everything without rewriting code
Clarity	Can become messy and confusing with many logs	Very clear — shows variables, call stack, and execution flow in one place
Best for	Quick checks and simple debugging	Finding deeper issues, tracking logic problems, and understanding code flow
Seeing variable values	Only what you choose to print	You can inspect all variables at any moment
Checking code execution flow	Hard — you guess based on print order	Easy — you step through execution line by line
Re-running required?	Yes — every time you add or change a log	No — you inspect live during one run
Risk of forgetting to remove	High — logs can remain in production code	Low — debugger doesn’t change your code
Professional usage	Used, but mainly for quick checks	Strongly preferred for real debugging and larger projects

<aside>

💡 Tip: Use console.log() for quick checks when the problem is simple. But when you need to understand what your program is doing step by step especially in bigger code the VS Code debugger is faster, cleaner, and more powerful**.**

</aside>

Debugging with VS Code

Now that you know what debugging is, let’s learn how to do it in VS Code. The goal is to stop your program at a specific line, look at what is happening, and understand why the code behaves the way it does.

VS Code’s debugger makes this easy because it lets you:

pause the program
inspect variable values
step through the code line by line
see which path your program is taking

To understand this properly, we will use a small example

The Example (Buggy Code)

This program calculates the final price after applying a discount.

calculatePrice.js;

function calculateDiscount(price, discountRate) {
  return discountRate * 100;
}

function finalPrice(price, discountRate) {
  const discount = calculateDiscount(price, discountRate);
  return price - discount;
}

console.log(finalPrice(200, 0.2));

We expect:

20% of 200 = 40
Final price = 160

But the program will output 180.

Let’s debug it and find out why.

1️⃣ Adding a Breakpoint

A breakpoint tells VS Code where to pause your program.

Click in the left margin next to the line number where you want to add a breakpoint, as shown in the picture below.

When the breakpoint is active:

a red dot appears
the program will pause before running that line

2️⃣ Running the Debugger

Now we want to start debugging.

Open the Run and Debug panel (▶️ with a bug icon)

Click Run and Debug

Choose Node.js if asked

VS Code will run your program and stop at the breakpoint.

3️⃣ Inspecting Variables

When the program pauses, open the Variables panel.

You will see values like:

price = 200
discountRate = 0.2

At this point we can already ask:

Are these values correct?

Yes, so the bug must happen after this.

Week 5 - Problem solving methods