The Browser Console

Every browser has developer tools, and the Console tab is where JavaScript talks to you.

Opening it

• Press F12, or Ctrl + Shift + J (Chrome, Edge) or Ctrl + Shift + K (Firefox). On a Mac, use Cmd + Option + J (Chrome) or Cmd + Option + C (Safari, after enabling developer tools).
• Or right-click anywhere on a page, choose Inspect, and open the Console tab.

Two things you will use constantly

1. Type code and press Enter. The console runs it straight away.

1
2
3

2 + 3
"Hello".toUpperCase()
document.title

2. Print messages from your own code with console.log().

1
2
3

console.log("Hello, console!");
console.log("Two plus two is", 2 + 2); // → Two plus two is 4
console.log([1, 2, 3]);

Everything you see in the Console output next to these examples is the same idea. The editor on this site shows your console.log lines and errors for you.

Different kinds of messages

1
2
3

console.log("A normal message");
console.warn("A warning: something looks suspicious");
console.error("An error message");

Warnings are usually yellow and errors are red. When your page breaks, the console is the first place to look: it names the problem and often the line.

You will go much deeper into debugging tools later, in Debugging with console.log and Friends.