console.log and seeing what happened

You will type console.log more than any other line of JavaScript you ever write. It is how you find out what your program is actually doing, as opposed to what you assumed it was doing — and those two are different far more often than anyone expects.

console.log("Starting the order");

Starting the order

Logging is safe, and that is the point

Here is the thing worth understanding before anything else: console.log changes nothing.

It does not alter your values. It does not affect what the page shows. Remove every log from a working program and it behaves identically. All it does is report.

That is precisely what makes it the right tool when you are confused. You can scatter logs anywhere, as thickly as you like, without any risk of the logging itself causing the bug. Nothing else you write is quite that harmless.

So when a program is misbehaving, the question to ask is not "what is wrong?" but "what does it actually contain at this point?" — and logging answers that directly.

Several values in one call

console.log takes as many values as you give it, separated by commas, and prints them on one line with a space between:

console.log("Order", 7, "for", "Ayesha");

Order 7 for Ayesha

Notice there are no + signs. Commas are better than joining with + for two reasons.

First, + between a string and a number is a trap you will meet properly in the types lesson:

console.log("Total: " + 300 + 150);

Total: 300150

That joined 300 and 150 as text instead of adding them. With commas, each value is printed as itself:

console.log("Total:", 300 + 150);

Total: 450

Second, commas keep the type visible. A log of "5" and a log of 5 look different in a real browser console — the string is quoted, the number is not — and that distinction is often the whole answer to why something broke.

Labelling your logs

Once there are more than two or three logs, a column of bare values tells you nothing about which is which. Always label:

const price = 350;
const quantity = 3;

console.log("price:", price);
console.log("quantity:", quantity);
console.log("total:", price * quantity);

price: 350
quantity: 3
total: 1050

Five seconds of typing, and you can read the output without counting lines back to work out which number is which.

console.table for lists of things

When you are looking at several items that share the same shape, console.table lays them out in a grid instead of a wall of text:

const menu = [
  { dish: "Biryani", price: 350 },
  { dish: "Pulao", price: 280 },
  { dish: "Roti", price: 20 },
];

console.table(menu);

[ { dish: 'Biryani', price: 350 }, { dish: 'Pulao', price: 280 }, { dish: 'Roti', price: 20 } ]

In your browser's real console that renders as an actual table, with a row per dish and sortable columns. On this page it prints as text, because the page captures the output rather than showing you the browser's own console — but the shape is the same, and in devtools it is genuinely easier to read.

Reach for it whenever you have an array of objects. Comparing twelve rows in a grid is far quicker than reading twelve lines of braces.

console.error and friends

There are other channels:

console.log("This is ordinary output");
console.error("Something went wrong");
console.warn("This might be a problem");

This is ordinary output
Something went wrong
This might be a problem

In a real browser console these look different — errors in red with an icon, warnings in yellow — and you can filter to show only errors, which is invaluable on a busy page.

Be clear about what console.error does and does not do: it prints in red. It does not stop your program, throw an exception, or signal failure to anything. It is a colour, not a mechanism.

Opening devtools

To see any of this in a real page, open your browser's developer tools:

• Chrome or Edge — press F12, or right-click the page and choose Inspect
• Firefox — F12, or right-click and Inspect
• Safari — enable the Develop menu in Settings → Advanced first

Then choose the Console tab. You can type JavaScript straight into it and press Enter, which makes it the fastest place to test a single idea.

Two things that confuse people the first time. A busy site will already have messages in the console that it put there — look for your own text among them. And the console usually clears when you reload the page; there is a Preserve log option if you need it to survive a reload.

Using it to actually find something

Logging is most useful when you stop printing final answers and start printing the middle of the work:

const prices = [350, 280, 20];
let total = 0;

for (const price of prices) {
  total = total + price;
  console.log("added", price, "running total is now", total);
}

console.log("final total:", total);

added 350 running total is now 350
added 280 running total is now 630
added 20 running total is now 650
final total: 650

If that final number were wrong, the log above it shows exactly which step went astray. That is the habit worth building: when something is wrong, do not stare at the code trying to reason it out — print what it holds at each step and let the program tell you.

Next, variables, so you have somewhere to keep values rather than logging them the moment you make them. After that, types, which explains the "Total: 300150" oddity from earlier properly.