JavaScript lesson · 18 min

JavaScript Debugging with console

Use console output to inspect values, understand program flow, and narrow down mistakes.

Code runs locally in your browser

What you will practice

Use console.log to inspect values.
Add labels so output is readable.
Debug a small calculation step by step.

What this means

Debugging means finding out why code behaves differently from what you expected.

`console.log` is the simplest debugging tool. It prints values so you can see what the program knows at that moment.

Good logs include labels. `console.log(total)` is less helpful than `console.log("total before tax", total)`.

If this is your first time seeing this

Debugging means slowing down and checking what the program is actually doing.

Console logs are beginner-friendly because they let you see values at each step.

Mini glossary

Debugging: Finding and fixing why code behaves differently than expected.
console.log: A function that prints values to the console.
Intermediate value: A value from the middle of a calculation, before the final result.

Example from everyday life

Debugging is like following a trail of receipts after shopping. You check each step: item price, subtotal, discount, tax, final amount. The mistake becomes easier to see when every step is visible.

How it works step by step

The code calculates a small checkout total in multiple steps.
Each `console.log` line prints a label and the current value.
The final output shows the rounded total.
If the result looked wrong, the earlier logs would help identify which step changed unexpectedly.

Where you will use this

A beginner checks whether a function received the expected input.
A form debug log shows cleaned input before validation.
An API parser logs intermediate data before rendering it.

Before you run the code

Console debugging is not fancy, but it is one of the fastest ways to understand beginner code.

Remove noisy logs before shipping production features, but use them freely while learning.

Common beginner mistakes

Logging only the final result and missing where the problem started.
Using unlabeled logs that are hard to understand later.
Leaving lots of noisy debug logs in finished code.

JavaScript editor

const price = 12;
const quantity = 3;
const discount = 4;

const subtotal = price * quantity;
console.log("subtotal", subtotal);

const afterDiscount = subtotal - discount;
console.log("after discount", afterDiscount);

const tax = afterDiscount * 0.1;
console.log("tax", tax);

const total = Math.round((afterDiscount + tax) * 100) / 100;
console.log(`Final total: ${total}`);

Console output

Run the code to see console output here.

Exercise checks0 of 2 checks passed.

WaitingPrints a labeled intermediate value

WaitingPrints the final calculated total

Code runs locally in a temporary browser worker with a timeout. It is not sent to Lumio analytics or executed on the server.

Try changing this next

Change the discount and predict every logged value.
Add a log before calculating tax.
Intentionally use the wrong tax rate and find it from the logs.

Previous lesson Next lesson