javascript

console.log() method

Learn how to use the JavaScript `console.log()` method to display messages and variable values in your browser's developer console for debugging and understanding code flow.

9 min read 8 sections Tutorial

The `console.log()` method is a special tool in JavaScript. It helps you see what is happening inside your code. You can use it to print messages or show the value of variables in a special window called the "console".

The console.log() method

The console.log() method is like a secret message sender. It sends information from your JavaScript code to a special area called the console. This console is part of your web browser's developer tools.

Developers use console.log() all the time. It helps them understand their code better. You can see messages, numbers, or the contents of your variables. This is super helpful when you are trying to find mistakes in your code.

What is console.log()?

The console.log() method is a JavaScript function that outputs messages or values to the web browser's console. It is mainly used for debugging and inspecting data.

Output Messages

Display text messages to understand which parts of your code are running.

Inspect Variables

See the current value of any variable at any point in your program.

Debugging Tool

A primary tool for finding and fixing errors by showing you hidden information.

Any Data Type

Log numbers, text, true/false values, lists (arrays), and objects.

Your First console.log()

Getting Started

Your First `console.log()`

Using console.log() is very simple. You just write console.log(), and inside the parentheses (), you put whatever you want to see. This could be a piece of text, a number, or a variable name.

When you run your JavaScript code in a web browser, you will need to open the developer tools to see the console. Most browsers let you do this by pressing F12 or Ctrl+Shift+I (or Cmd+Option+I on Mac) and then clicking on the "Console" tab.

javascriptLogging different types of information

1// Log a simple text message
2console.log("Hello, ChilluCoder!");
3
4// Log a number
5console.log(12345);
6
7// Log a variable's value
8let userName = "Alice";
9console.log(userName);
10
11// Log a true/false value (boolean)
12let isLoggedIn = true;
13console.log(isLoggedIn);

Remember quotes for text!

When you want to log a piece of text (a string), you must put it inside single quotes (') or double quotes ("). If you forget the quotes, JavaScript will think it's a variable name and might give an error if that variable doesn't exist.

console.log(Hello); // ❌ Error! JavaScript thinks Hello is a variable
console.log("Hello"); // ✅ Correct, logs the text "Hello"

How console.log() Helps You Debug

How `console.log()` Helps You Debug

Debugging means finding and fixing errors in your code. Imagine your code is a machine, and something is not working right. You need to open it up and see what each part is doing.

console.log() is like adding little windows to your machine. You can put console.log() statements at different points in your code. Then, when your code runs, you can see the values of variables changing. This helps you understand exactly where things might be going wrong.

javascriptTracking variable values to find a mistake

1let score = 0;
2console.log("Initial score:", score); // See score at the start: 0
3
4score = score + 10;
5console.log("Score after level 1:", score); // See score after first change: 10
6
7let bonus = 5;
8// Oops! We meant to add bonus, but we accidentally subtracted it.
9score = score - bonus;
10console.log("Score after bonus (mistake!):"); // We expect 15, but what will it be?
11console.log(score); // Output: 5. This helps us see the mistake!
12
13// If we fix the bug:
14score = score + (bonus * 2); // Corrected calculation
15console.log("Score after corrected bonus:", score); // Output: 15

✗ BadHard to debug (no logs)

let total = 100;
let discount = 20;

// Imagine a complex calculation here
total = total * 0.5; // Accidentally cut in half
total = total - discount;

console.log("Final total: " + total); // Output: Final total: 30

✓ GoodEasy to debug (with logs)

let total = 100;
let discount = 20;

console.log("Start total:", total); // Start total: 100

total = total * 0.5;
console.log("Total after half price:", total); // Total after half price: 50

total = total - discount;
console.log("Total after discount:", total); // Total after discount: 30

console.log("Final total: " + total);

Logging Different Kinds of Information

console.log() is very flexible. It can show almost any type of data that JavaScript uses. You can log simple text, numbers, or even more complex things like lists of items (arrays) or collections of data (objects).

You can also log multiple items at once. Just separate them with a comma. This is useful when you want to show a message and then the value of a variable next to it.

Logging a single item

Logging multiple items

Logging a single item

// Log a single number
console.log(42);

// Log a single message
console.log("Status: OK");

// Log a single array
const colors = ['red', 'green', 'blue'];
console.log(colors);

Logging multiple items

// Log a message and a number
console.log("The answer is:", 42);

// Log a message and a variable
const userName = "Charlie";
console.log("Current user:", userName);

// Log an object with a message
const item = { id: 1, name: "Book" };
console.log("Item details:", item);

// Log a single number
console.log(42);

// Log a single message
console.log("Status: OK");

// Log a single array
const colors = ['red', 'green', 'blue'];
console.log(colors);

// Log a message and a number
console.log("The answer is:", 42);

// Log a message and a variable
const userName = "Charlie";
console.log("Current user:", userName);

// Log an object with a message
const item = { id: 1, name: "Book" };
console.log("Item details:", item);

Combine messages and variables

It's often best to combine a descriptive message with your variable output. Instead of just console.log(score);, write console.log("Current score:", score);. This makes the console output much clearer and easier to understand.

Using console.log() in Real Projects

Using `console.log()` in Real Projects

In real web projects, console.log() is super important. You can use it to check many different things. For example, you might want to see if a user typed something correctly, or if data came back from a website correctly.

It helps you follow the 'flow' of your program. You can see if a specific part of your code runs, and what values it has at that moment. This is essential for building complex web pages and applications.

Check User Input

When a user types something into a form, use console.log() to make sure you are getting the correct text or numbers.

javascriptCheck User Input

1const userInput = "ChilluCoder";
2console.log("User typed:", userInput);

Monitor Loop Progress

If you have a loop that repeats actions, log messages inside the loop to see what happens in each step. This helps you know if the loop is working as expected.

javascriptMonitor Loop Progress

1for (let i = 0; i < 3; i++) {
2  console.log("Loop iteration number:", i);
3}

Inspect Complex Data

When your code gets data from a server or another part of your program, it often comes as an 'object' or 'array'. Log these to see their full structure and values.

javascriptInspect Complex Data

1const userData = {
2  id: 1,
3  name: "Alice",
4  email: "alice@example.com"
5};
6console.log("Received user data:", userData);

Remove logs before going live

While console.log() is great for development, you should remove or disable most of them before your website goes live for everyone to see. Too many logs can slow down your website slightly. Also, users might see internal messages you did not intend for them to see.

Other console Methods

Other `console` Methods

Method	Purpose	Appearance in Console
`console.log()`	General message or variable output.	Standard text, usually white or black.
`console.warn()`	Show a warning message (something might be wrong, but not an error).	Yellow background or text, often with a warning icon.
`console.error()`	Indicate a serious error that stopped your code or caused a problem.	Red background or text, often with an error icon.
`console.info()`	Provide informational messages, similar to `log()` but can be styled differently by the browser.	Usually blue text or an 'i' icon.

Test Your Knowledge

Quick Check

Which of these is the correct way to print the text "Hello World!" to the console?

Quick Check

If you have a variable let score = 50;, how would you print its value to the console?

Quick Check

What is the primary purpose of console.log()?

Quick Check

What will be printed to the console by this code? console.log("Count:", 10 + 5);

Quick Reference

Pro Tips

1Purpose — console.log() helps you see what your JavaScript code is doing in the browser's console.
2Syntax — Use console.log(value); to print any value (text, number, variable, object).
3Text (Strings) — Always put text inside single or double quotes: console.log("Hello");
4Variables — Print variable values by using their name without quotes: let x = 10; console.log(x);
5Multiple Items — Separate multiple items with commas inside log(): console.log("Name:", userName, "Age:", userAge);
6Debugging — Place console.log() statements at different points to track variable changes and execution flow.
7Developer Tools — Access the console in your browser using F12 or Ctrl+Shift+I (or Cmd+Option+I on Mac).
8Other Methods — console.warn(), console.error(), console.info() are used for specific types of messages.
9Complex Data — When logging objects or arrays, the console provides an interactive view for exploration.
10Production Code — Remember to remove or disable excessive console.log() statements before deploying your website.

JavaScript Variables

Learn how to store data in your programs using let and const.

Data Types

Understand the different kinds of values JavaScript can work with (numbers, strings, booleans).

Functions

Discover how to group code into reusable blocks and make your programs more organized.

Browser Developer Tools

Explore all the powerful tools in your browser for inspecting, debugging, and testing web pages.

You are now a console.log() pro!

You've learned the essential console.log() method! You can now use it to peek inside your code, understand what's happening, and find any sneaky bugs. This skill is fundamental for every JavaScript developer.

Try it in the Javascript Compiler

Run and experiment with Javascript code right in your browser — no setup needed.

Open Javascript Compiler

Continue Learning

Previous Next