JavaScript console.log() explained: a practical beginner guide

console.log() shows a message in the console, a panel built into every desktop web browser that only the programmer usually looks at. Put any value inside the brackets and it appears there when that line runs:

console.log("Hello from JavaScript!");

Hello from JavaScript!

It does not change the web page, and visitors will not see it unless they go looking. It exists so you can see what your code is doing while you build it. This guide covers where to find the console, how to log text, numbers, lists and objects, how to use console.log() to hunt down bugs, and the mistakes nearly everyone makes at first. Every example on this page runs in your browser, and the output appears under the code.

If you know some Python, console.log() is a close cousin of Python’s print() function.

Where to find the console

You have three places to see console.log() output.

In a browser

Open the developer tools on any web page:

• Chrome or Edge on Windows: press Ctrl, Shift and J together, or press F12 and pick the Console tab.
• Firefox on Windows: press Ctrl, Shift and K.
• Chrome on a Mac: press Cmd, Option and J.
• Safari on a Mac: first turn on the developer features in Safari’s settings, under Advanced. Then press Cmd, Option and C.

Messages from the page’s JavaScript appear there. You can also type JavaScript straight into the console and press Enter to run it, which is a handy way to experiment.

In a terminal, with Node.js

Node.js runs JavaScript outside a browser. Save a file called hello.js containing a console.log() line, then run node hello.js in a terminal. The message prints right there in the terminal.

On Gwecode

Press run under any example and the output appears underneath, with nothing to open or install.

Logging text and numbers

Text goes in quotes. Numbers and sums do not, and JavaScript works out the sum before it logs:

console.log("7 + 3");
console.log(7 + 3);

7 + 3
10

Logging several values at once

Separate values with commas and they appear on one line with a space between them. This is the easiest way to label what you are logging:

const player = "Priya";
const score = 42;
console.log("Player:", player, "Score:", score);

Player: Priya Score: 42

Template literals

For a tidy sentence, use backticks instead of quotes and put each value inside ${ }. This is called a template literal:

const apples = 3;
console.log(`I have ${apples} apples, so two each needs ${apples * 2}.`);

I have 3 apples, so two each needs 6.

Logging arrays and objects

You can log whole arrays and objects, not just single values. Different places show them slightly differently. On Gwecode they appear as one line of text:

const pets = ["cat", "dog", "fish"];
const user = { name: "Sam", age: 12 };
console.log(pets);
console.log(user);

["cat","dog","fish"]
{"name":"Sam","age":12}

A browser console shows them as a small tree you can click open, which is handy for big objects. Node.js prints them with spaces, like [ 'cat', 'dog', 'fish' ]. The values are the same everywhere. Only the layout changes.

A handy trick: labels for free

Wrap a variable in curly brackets and the log shows its name as well as its value:

const total = 30;
console.log({ total });

{"total":30}

This is useful when you are logging lots of things at once and lose track of which number is which.

Other console methods

console.log() has a few relatives:

• console.error() marks a message as an error. Browsers show it in red.
• console.warn() marks a warning. Browsers show it in yellow.
• console.table() shows an array of objects as a table in the browser console.
• console.group() indents the messages that follow, until console.groupEnd().

Gwecode’s run boxes support log, info, warn and error. Try table and group in your browser’s own console.

Using console.log to find bugs

This is where console.log() earns its keep. Here is a program meant to add up three numbers. It prints NaN, short for “not a number”, instead of 27:

const nums = [4, 8, 15];
let total = 0;
for (let i = 0; i <= nums.length; i++) {
  total = total + nums[i];
}
console.log(total);

NaN

The code looks fine at a glance, so log what happens inside the loop:

const nums = [4, 8, 15];
let total = 0;
for (let i = 0; i <= nums.length; i++) {
  console.log("i is", i, "and nums[i] is", nums[i]);
  total = total + nums[i];
}
console.log(total);

i is 0 and nums[i] is 4
i is 1 and nums[i] is 8
i is 2 and nums[i] is 15
i is 3 and nums[i] is undefined
NaN

There it is. The loop runs one extra time, when i is 3, and there is no item at position 3. Adding undefined to a number gives NaN. Changing <= to < fixes it, and the total becomes 27.

That is the pattern for most debugging: log the values, find the first one that is not what you expected, and look at the line that made it.

When console.log is not enough

For tangled bugs, the same developer tools have a stronger option: breakpoints. In the Sources tab of Chrome or Edge, or the Debugger tab of Firefox, click a line number to pause the code there. While it is paused you can see every variable at that moment, then step through the code one line at a time. You can also write debugger; on its own line in your code, and the browser pauses there whenever its developer tools are open.

Start with console.log(). Reach for breakpoints when you catch yourself adding a tenth log to the same function.

Common mistakes

A capital C

Console.log("Hello");

This stops with ReferenceError: Console is not defined. JavaScript cares about capital letters, and it is console, all lower case.

Forgetting the brackets

console.log "Hello" is a SyntaxError. And console.log; on its own line is worse, because it runs without complaining and prints nothing at all. The brackets are what make it run.

Looking for the message on the page

console.log() never changes the page. If nothing seems to happen, open the console. Your message is probably sitting there.

Logging in a place the code never reaches

If a log inside an if never appears, that is useful information: the if was false. Log the values in its condition just before it to see why.

Objects that change after you log them

In a browser console, an object you click open shows its values at the moment you open it, not the moment it was logged. If your code changes the object in between, the tree can show the newer values. To see the values as they were, log the single values you care about instead.

A short exercise

Store a shopping list of four items in an array. Use a loop and console.log() to print each one with its number, starting at 1, then print how many items there are.

Aim for this:

1. bread
2. milk
3. eggs
4. apples
4 items

One possible answer

const list = ["bread", "milk", "eggs", "apples"];
for (let i = 0; i < list.length; i++) {
  console.log(`${i + 1}. ${list[i]}`);
}
console.log(`${list.length} items`);

Related reading

• Python’s print() function explained, the Python version of this guide.
• What does a computer program do?, for the big picture.

Your next step

console.log() is the first tool every JavaScript programmer reaches for, and you now know how to use it properly. Practise it in real programs with Gwecode’s JavaScript Level 1: 28 short lessons, from your first line to your own functions, with a whole lesson on reading errors. It is free and runs in your browser. Create a free account to keep your progress, and start below.

questions