JavaScript Output & the Console

Show results with console.log, console.table, warnings and the page itself.

Lesson 3 of 56Beginner12 min read

Before you can fix code, you need to see what it's doing. JavaScript can show output in three places: the console, which is for you as the developer; pop-up boxes; and the page itself, which is for your visitors.

The console is the most important of these while you're learning. Professional developers use it all day to check values, follow the order code runs in and read error messages. Getting comfortable with it now will make every later lesson easier.

The console methods

MethodUse
console.log()General messages and values
console.info()Informational messages
console.warn()Warnings, shown in yellow
console.error()Errors, shown in red
console.table()Arrays and objects shown as a table (in real DevTools)
console.clear()Clears the console

You can pass several values separated by commas: console.log("Score:", score, "Lives:", lives). The console prints them on one line with spaces between them.

Showing output to visitors

  • element.textContent = "…" changes text on the page. It's the best way to show results to the people using your site.
  • alert("…") shows a pop-up that blocks the page until it's closed. It's fine for quick tests but annoying in a real site. (On this site, alerts are shown in the console instead.)
  • document.write() is an old method that can wipe the whole page if it runs at the wrong moment. Don't use it.

Visitors never see the console, so anything they need to know must be written into the page.

Using console.log to find bugs

When code doesn't do what you expect, add a console.log() just before the line you suspect and print the values involved. You'll often find that a variable holds something different from what you assumed, such as text instead of a number, or undefined because of a spelling mistake.

Remove or comment out your debugging logs when you've finished. Leaving dozens of them in place makes real problems harder to spot later.

JavaScript Output Syntax

Output methods

console.log("value:", x);
console.warn("careful");
console.error("broken");
document.querySelector("#out").textContent = "Done!";

JavaScript Output Summary

  • The console is where developers see values, messages and errors.
  • Use console.log, console.warn, console.error and console.table for different kinds of output.
  • Show results to visitors by changing textContent on the page.
  • Avoid alert() in real sites and never use document.write().
  • Label your logs and print values to track down bugs.

JavaScript Output Examples

Each example runs in the page. Edit the code and press Run to see what changes.

Example 1

Different kinds of console messages

console.log("Game started");
console.info("Level 1 loaded");
console.warn("Low health: 10%");
console.error("Connection lost!");
console.log("Score:", 1200, "Lives:", 3);
ConsoleEdit the code, then press Run or Ctrl+Enter
Line-by-line explanation
  1. Line 1A plain message.
  2. Line 2Info messages get a blue "i" here.
  3. Line 3Warnings are yellow: something might be wrong.
  4. Line 4Errors are red: something is wrong.
  5. Line 5Several values in one log, separated by spaces in the output.
Example 2

Logging different types

The console shows strings, numbers, arrays and objects differently.

console.log("text");
console.log(42, true, null);
console.log(["apples", "pears"]);
console.log({ name: "Biscuit", age: 3 });
console.table([{ fruit: "kiwi", qty: 4 }, { fruit: "mango", qty: 2 }]);
ConsoleEdit the code, then press Run or Ctrl+Enter
Line-by-line explanation
  1. Line 1Strings print without quotes at the top level.
  2. Line 2Numbers, booleans and null are highlighted.
  3. Line 3Arrays show their items in square brackets.
  4. Line 4Objects show key: value pairs.
  5. Line 5In real browser DevTools this shows a neat table.
Example 3

Showing output on the page

const celsius = 21;
const fahrenheit = celsius * 9 / 5 + 32;

document.querySelector("#temp").textContent = fahrenheit + "°F";
console.log("Converted", celsius, "→", fahrenheit);
ResultEdit the code, then press Run or Ctrl+Enter
Line-by-line explanation
  1. Lines 1 to 2Convert Celsius to Fahrenheit.
  2. Line 4Users see the result on the page.
  3. Line 5You see a debug message in the console.

Common JavaScript Output Mistakes

Forgetting to log

Don't
5 + 5;
"hello".toUpperCase();
Do
console.log(5 + 5);
console.log("hello".toUpperCase());

In a script, results aren't printed automatically. Wrap them in console.log() to see them.

Joining text and numbers by accident

Don't
console.log("Total: " + 2 + 3); // Total: 23
Do
console.log("Total: " + (2 + 3)); // Total: 5
console.log("Total:", 2 + 3);     // Total: 5

Once a string is involved, + glues things together. Use brackets or commas.

JavaScript Output in Real Projects

Logging in production

Real apps use the console during development, then remove noisy logs before launch. In production, errors are often sent to monitoring tools (like Sentry) that alert developers when something breaks for users.

JavaScript Output Exercises

Answer each one and check it instantly. If you get stuck, open the hint before the answer.

Fill in the blankseasy

Print a warning and an error.

console.("Battery low");
console.("Battery empty!");
Predict the outputeasy

What does this print?

console.log("Total: " + 4 + 6);
Multiple choicemedium

What is the best way to show a result to users on the page?

Fix the bugeasy

This should print Level: 5 and show Level 5 in the paragraph. Fix it.

const level = 5;
console.log("Level: " level);
document.querySelector("#level").textcontent = "Level " + level;
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • Logs "Level: 5"
  • The paragraph says "Level 5"

JavaScript Output Quiz

3 questions to check what you learned.

  1. Which method prints a red error message?

    • console.error
    • console.log
    • console.red
    • console.fail

  2. What does console.log("a", "b") print?

    • ab
    • "a", "b"
    • a b
    • a,b

  3. Why should you avoid document.write()?

    • It's too slow
    • It can overwrite the whole page after it has loaded
    • It only works in Firefox
    • It prints to the console

JavaScript Output Challenge

Receipt printer

Using the variables given:

  1. Log Item: Coffee
  2. Log Price: 3.5
  3. Write Coffee costs £3.5 into the #receipt paragraph using textContent
const item = "Coffee";
const price = 3.5;
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • Logs "Item: Coffee"
  • Logs "Price: 3.5"
  • Receipt shows "Coffee costs £3.5"

Related JavaScript topics

01JS IntroductionWhat JavaScript does, where it runs, and your first lines of code.04Variables (let, const)Store values in named boxes with let and const.46Errors (try/catch)Read error messages, handle failures with try/catch and throw your own errors.
Esc
↑↓ to navigateEnter to open