Programmer's Picnic by Champak Roy

Using the JavaScript Console: 0 to Infinity Lesson

Learn the browser console from the absolute beginning: printing messages, checking variables, finding errors, debugging functions, inspecting arrays and objects, timing code, and developing professional debugging habits.

Lesson Goal

The console is one of the first tools that turns a beginner into a real programmer. It helps you check what your code is doing instead of guessing.

By the end of this lesson, students will understand:
  1. What the browser console is
  2. How to open the console
  3. How to use console.log()
  4. How to print numbers, strings, variables, arrays, and objects
  5. How to use console.warn(), console.error(), and console.info()
  6. How to debug variables, conditions, loops, and functions
  7. How to use console.table(), console.group(), and console.count()
  8. How to measure performance using console.time()
  9. How to understand common JavaScript errors
  10. How to use the console professionally

1. What is the Console?

The console is a tool inside the browser where JavaScript can show messages, errors, warnings, values, objects, arrays, and debugging information.

Think of the console as a programmer’s notebook while the program is running.

JavaScript can talk to the console using:

console.log("Hello JavaScript");

The console is mainly used for:

  • Checking output
  • Finding mistakes
  • Testing small code
  • Debugging variables
  • Understanding program flow
  • Inspecting objects
  • Measuring performance

2. How to Open the Console

In Google Chrome

Method 1: Right click on the web page, click Inspect, then open the Console tab.

Method 2: Press Ctrl + Shift + J.

On Mac: Press Command + Option + J.

After opening the console, you can type JavaScript directly there. 

10 + 20
30

Advertisement

3. Your First Console Output

Create a simple HTML file:

<!doctype html>
<html>
<head>
  <title>Console Lesson</title>
</head>
<body>

  <h1>Open the Console</h1>

  <script>
    console.log("Hello JavaScript");
  </script>

</body>
</html>

When you open the page and check the console, you will see:

Hello JavaScript

Printing Numbers

console.log(10);
console.log(25.5);
console.log(100 + 50);
10 25.5 150

Printing Variables

let name = "Champak";
let age = 25;

console.log(name);
console.log(age);
Champak 25

Printing Text with Variables

let student = "Ravi";
let marks = 87;

console.log("Student name:", student);
console.log("Marks:", marks);
Student name: Ravi Marks: 87

Using Template Literals

let name = "Ravi";
let subject = "JavaScript";

console.log(`Hello ${name}, welcome to ${subject}`);
Hello Ravi, welcome to JavaScript

Live Console Demo

Click the button, then open your browser console to see the message.

The page will also show a copy of the console message here.

4. Console as a Calculator

You can write JavaScript directly inside the console. 

10 + 20
30
100 - 40
60
12 * 5
60
100 / 4
25

Remainder Operator

10 % 3
1

This gives 1 because 10 divided by 3 leaves remainder 1.

Testing Variables Directly

let a = 10;
let b = 20;
a + b;
30

Try Console-style Calculation

Result will appear here.

5. Different Types of Console Messages

console.log()

Used for normal messages.

console.log("This is a normal message");

console.warn()

Used when something is not broken yet, but the programmer should notice it.

let age = 15;

if (age < 18) {
  console.warn("User is below 18");
}

console.error()

Used to show an error message.

let password = "";

if (password === "") {
  console.error("Password cannot be empty");
}
Important: console.error() shows an error message. It does not automatically stop the program.

console.info()

console.info("Application started successfully");

Comparison

Method Use
console.log() Normal output
console.info() Information
console.warn() Warning
console.error() Error message

Run Message Types

Open the browser console first, then click these buttons.

Clicked message type will appear here also.

6. Debugging with the Console

Debugging means finding and fixing mistakes in a program.

The console helps us answer:
  • Did this line run?
  • What is the value of this variable?
  • Why is this condition not working?
  • Why is this function returning the wrong result?
  • Where did the program stop?

Checking Whether Code Runs

console.log("Program started");

let a = 10;
let b = 20;

console.log("Before addition");

let sum = a + b;

console.log("After addition");
console.log(sum);
Program started Before addition After addition 30

Debugging Variables

let price = 100;
let quantity = 5;

console.log("Price:", price);
console.log("Quantity:", quantity);

let total = price * quantity;

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

Debugging Conditions

let marks = 45;

console.log("Marks value:", marks);
console.log("Is marks >= 33?", marks >= 33);

if (marks >= 33) {
  console.log("Pass block entered");
} else {
  console.log("Fail block entered");
}

Debugging Loops

for (let i = 1; i <= 5; i++) {
  console.log("Loop running. Current i =", i);
}
Loop running. Current i = 1 Loop running. Current i = 2 Loop running. Current i = 3 Loop running. Current i = 4 Loop running. Current i = 5

Debugging Array Loops

let marks = [70, 80, 90];

for (let i = 0; i < marks.length; i++) {
  console.log("Index:", i);
  console.log("Value:", marks[i]);
}

7. Console with Arrays and Objects

Printing Arrays

let students = ["Ravi", "Amit", "Sita"];

console.log(students);
["Ravi", "Amit", "Sita"]

In the browser console, arrays can be expanded and inspected.

Printing Objects

let student = {
  name: "Ravi",
  age: 16,
  city: "Varanasi"
};

console.log(student);

Printing Object Properties

console.log("Name:", student.name);
console.log("Age:", student.age);
console.log("City:", student.city);
Name: Ravi Age: 16 City: Varanasi

Array of Objects

let students = [
  { name: "Ravi", marks: 80 },
  { name: "Amit", marks: 75 },
  { name: "Sita", marks: 92 }
];

console.log(students);

console.table()

let students = [
  { name: "Ravi", marks: 80 },
  { name: "Amit", marks: 75 },
  { name: "Sita", marks: 92 }
];

console.table(students);
index name marks
0 Ravi 80
1 Amit 75
2 Sita 92

Run console.table()

Open the console, then click the button.

The same data will appear here after clicking.

8. Grouping Console Output

console.group()

console.group("Student Report");

console.log("Name: Ravi");
console.log("Math: 80");
console.log("Science: 75");
console.log("English: 85");

console.groupEnd();

Output appears under one expandable group in the browser console.

Nested Groups

console.group("School");

console.log("School Name: ABC School");

console.group("Student");
console.log("Name: Ravi");
console.log("Class: 9");

console.groupEnd();

console.groupEnd();

Run Group Demo

Open the browser console to see the grouped output.

9. Counting and Timing

console.count()

console.count("Button clicked");
console.count("Button clicked");
console.count("Button clicked");
Button clicked: 1 Button clicked: 2 Button clicked: 3

Counting Inside a Loop

for (let i = 1; i <= 5; i++) {
  console.count("Loop count");
}

console.time() and console.timeEnd()

These methods measure how long code takes to run. 

console.time("Loop time");

for (let i = 1; i <= 1000000; i++) {
  // running loop
}

console.timeEnd("Loop time");
Loop time: 4.52 ms

Run Timer Demo

Timer result will appear in the console and here.

10. Assert and Trace

console.assert()

console.assert() shows a message only if a condition is false. 

console.assert(10 > 5, "This will not show");
console.assert(10 < 5, "This will show because condition is false");
Assertion failed: This will show because condition is false

console.trace()

console.trace() shows how a function was called. 

function first() {
  second();
}

function second() {
  third();
}

function third() {
  console.trace("Trace from third function");
}

first();

This is useful when you do not know how the program reached a function.

11. Console with Functions

Debugging Function Input and Output

function add(a, b) {
  console.log("a:", a);
  console.log("b:", b);

  let result = a + b;

  console.log("result:", result);

  return result;
}

add(10, 20);
a: 10 b: 20 result: 30

Finding Function Bugs

function calculatePercentage(total, maximum) {
  console.log("Total:", total);
  console.log("Maximum:", maximum);

  let percentage = total / maximum * 100;

  console.log("Percentage:", percentage);

  return percentage;
}

let result = calculatePercentage(240, 300);
console.log("Final result:", result);

12. Console with Events

Debugging Button Clicks

<button id="myBtn">Click Me</button>

<script>
  let btn = document.getElementById("myBtn");

  btn.addEventListener("click", function () {
    console.log("Button was clicked");
  });
</script>

Checking Input Values

<input id="nameInput" type="text" placeholder="Enter name">
<button id="showBtn">Show Name</button>

<script>
  let input = document.getElementById("nameInput");
  let button = document.getElementById("showBtn");

  button.addEventListener("click", function () {
    console.log("Input value:", input.value);
  });
</script>

Input Debug Demo

Input value will appear here and in the console.

13. Common Console Errors

Syntax Error

Wrong code:

console.log("Hello"
Error: SyntaxError. The closing bracket is missing.

Correct code:

console.log("Hello");

Reference Error

Wrong code:

console.log(studentName);
Error: ReferenceError. studentName was never created.

Correct code:

let studentName = "Ravi";
console.log(studentName);

Type Error

Wrong code:

let name = "Ravi";

name.push("Amit");
Error: TypeError. push() works on arrays, not normal strings.

Correct code:

let names = ["Ravi"];

names.push("Amit");

console.log(names);

14. Console and typeof

typeof helps us check the data type of a value. 

let name = "Ravi";
let age = 16;
let isStudent = true;

console.log(typeof name);
console.log(typeof age);
console.log(typeof isStudent);
string number boolean

Common Type Problem

let a = "10";
let b = 20;

console.log(a + b);
1020

This happens because "10" is a string. 

console.log(typeof a);
console.log(typeof b);
string number

Fix:

let a = Number("10");
let b = 20;

console.log(a + b);
30

15. Console and DOM Debugging

DOM means Document Object Model. It is the browser’s object version of the HTML page.

Selecting an Element

<h1 id="title">Hello</h1>

<script>
  let title = document.getElementById("title");

  console.log(title);
</script>

Checking Text Inside an Element

let title = document.getElementById("title");

console.log(title.innerText);
Hello

Changing Text and Checking It

let title = document.getElementById("title");

console.log("Before:", title.innerText);

title.innerText = "Hello JavaScript";

console.log("After:", title.innerText);
Before: Hello After: Hello JavaScript

DOM Debug Demo

Original DOM text

DOM debug result will appear here.

16. Professional Console Habits

Bad Console Message

console.log(x);

This is unclear because we do not know what x means.

Good Console Message

console.log("Current value of x:", x);

Better Debugging Habit

Instead of this:

console.log(a);
console.log(b);
console.log(c);

Write this:

console.log("Price:", a);
console.log("Quantity:", b);
console.log("Total:", c);
Meaningful labels save time. They also help you understand your own code after a few days.

17. Complete Example: Student Result Debugging Program

<!doctype html>
<html>
<head>
  <title>Console Debugging Example</title>
</head>
<body>

  <h1>Student Result</h1>

  <script>
    console.clear();

    console.log("Program started");

    let studentName = "Ravi";
    let math = 80;
    let science = 75;
    let english = 85;

    console.group("Student Data");
    console.log("Name:", studentName);
    console.log("Math:", math);
    console.log("Science:", science);
    console.log("English:", english);
    console.groupEnd();

    let total = math + science + english;
    let percentage = total / 3;

    console.group("Result");
    console.log("Total:", total);
    console.log("Percentage:", percentage);

    if (percentage >= 33) {
      console.log("Status: Pass");
    } else {
      console.warn("Status: Fail");
    }

    console.groupEnd();

    console.log("Program ended");
  </script>

</body>
</html>

Run Complete Example

Open the console and click the button.

18. Console Methods Summary

Method Purpose
console.log() Normal message
console.info() Information message
console.warn() Warning message
console.error() Error message
console.table() Display array or object as a table
console.group() Start a group
console.groupEnd() End a group
console.count() Count how many times something happened
console.time() Start timer
console.timeEnd() End timer
console.assert() Show message if condition is false
console.trace() Show function call path
console.clear() Clear console

19. Practice Questions

Question 1

Print your name, city, and subject using console.log().

let name = "Amit";
let city = "Varanasi";
let subject = "JavaScript";

console.log("Name:", name);
console.log("City:", city);
console.log("Subject:", subject);

Question 2

Use the console to calculate total marks.

let math = 80;
let science = 90;
let english = 70;

let total = math + science + english;

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

Question 3

Use console.warn() when marks are below 33.

let marks = 25;

if (marks < 33) {
  console.warn("Student has failed");
} else {
  console.log("Student has passed");
}

Question 4

Display student data using console.table().

let students = [
  { name: "Ravi", marks: 80 },
  { name: "Amit", marks: 75 },
  { name: "Sita", marks: 92 }
];

console.table(students);

Question 5

Use console.time() to measure a loop.

console.time("My loop");

for (let i = 1; i <= 100000; i++) {
  // loop running
}

console.timeEnd("My loop");

20. Mini Assignment

Create a student report debugging program.

It should:

  • Store student name
  • Store marks in 3 subjects
  • Print all values using console.log()
  • Print student data using console.group()
  • Calculate total
  • Calculate percentage
  • Show warning if percentage is below 33
  • Show final result

Starter Code

console.clear();

let studentName = "Ravi";
let math = 80;
let science = 70;
let english = 90;

console.group("Student Information");

console.log("Name:", studentName);
console.log("Math:", math);
console.log("Science:", science);
console.log("English:", english);

console.groupEnd();

let total = math + science + english;
let percentage = total / 3;

console.group("Result");

console.log("Total:", total);
console.log("Percentage:", percentage);

if (percentage < 33) {
  console.warn("Result: Fail");
} else {
  console.log("Result: Pass");
}

console.groupEnd();

Final Understanding

The console is not only for printing messages. It is used for testing, debugging, checking variables, checking functions, checking loops, checking arrays, checking objects, checking errors, measuring performance, and understanding program flow.

A beginner writes code and guesses. A better programmer writes code and checks. The console is the first tool that teaches us how to check.