JavaScript Console - Debug Your Code

In this tutorial, you will learn about the JavaScript console, types of console methods with examples of how to use them.

What is console in javascript?

The console is an object in javascript which is used for debugging and logging results.

Console is a web tool for developers to debug their code. It is used to display information about the code, such as the values of variables, the results of expressions, and the results of function calls. It is also used to display errors and warnings.

Console is a global object so it is available in every scope. It is also available in the global scope of the browser window. You can use it as window.console or direct console.

Example:

window.console.log("Hello World!"); // with window
console.log(123); // without window since it is global
console.log(10*5);
console.log(Math.PI);

Javascript Console Methods

Javascript console object has multiple methods which give you the ability to log out objects in different ways and to get other related information.

Console in javascript has 8 different methods. Among all console methods, the log method is most commonly used.

The 8 console methods are:

1. console.log()
2. console.assert()
3. console.clear()
4. console.count()
5. console.dir()
6. console.error()
7. console.table()
8. console.time()

1. console log

console.log() method is the most commonly used console method. It is used to output a message in the console.

It can output all kinds of objects like string, number, boolean, array, HTML elements, etc.

Syntax:

console.log(msg1, msg2, ..., obj1, obj2, ...)

Example:

console.log(123); //number
console.log("Hello World!"); //string
console.log(10 + 20); //expression
console.log(new Date()); //object

2. console assert

The console.assert() method asserts (claim) a condition and if the condition is false then output a message in the console. If the assertion is true then nothing happens.

Syntax:

console.assert(assertion, message, obj1, obj2, ...)

Example:

console.assert(false, "Statement is false");
var num = 10;
console.assert(num > 20, "Number is less than 20");
console.assert(25 === '25', "25 is not equal to '25'", { "SomeObject": 12345 });

3. console clear

The console.clear() method clears the console if it is allowed by the environment.

console.log(10);
console.log("Hello World!");
console.clear();
console.log("All above logs cleared");

4. console count

The console.count() method logs the number of time count() method has been called.

The count() method accepts an argument which is a label to the output, it is logged every time count() function is called. It is optional, its default value is "default".

for (let i = 0; i < 5; i++) {
  console.count("Count number");
  console.log(i);
}

Output:

5. console dir

The console.dir() method displays an interactive list of all the properties of a specified object.

It is presented as a hierarchical listing of methods and properties of an object with closure triangles. Simply console.dir() let us see all the properties of a specified Javascript object.

const arr = [1,2,3,4,5];
console.dir(arr);
console.dir(document.location);

6. console error

The console.error() method outputs an error message to the console.

The error() method of the console object is used to output the error in the console.

You can output error message or some object on error using console.error().

Syntax:

console.error(msg1, msg2, ..., obj1, obj2, ...)

Example:

let num1 = 10, num2 = 0;
if (num2 !== 0) {
  console.log(num1 / num2);
}
else {
  console.error("divided by 0");
}

7. console table

console.table() is used to display data in form of a table.

The method takes 1 mandatory argument data, which must be an array or an object.

Each element in the array becomes a row in the table.

The first column of the table is labeled as an index. For objects index will be property name and for array index are the actual index of array elements.

const arr = ["a", "b", "c", "d", "e"];
console.table(arr);
const user = {
  name: "Henry",
  id: "iuA98",
  age: 22
}
console.table(user);

8. console time

console.time() can be used to track how long does an operation takes to execute.

To use console.time() you have to give a timer a unique name then execute the javascript codes and when you call console.timeEnd() with the same name then the browser will output the time since timer with the same name started.

console.time("trackLoop");
for (let i = 0; i < 10000; i++) { }
console.timeEnd("trackLoop");

Conclusion

The console object is a very useful tool to use in your Javascript code. It can be used to display information, log messages, and track execution time.

You can use console.log(), console.dir(), console.error(), console.table(), console.time() and console.timeEnd() to display information, log messages, error messages, display data in form of a table, track execution time and track execution time.

Frequently asked questions

1. How do I open the JavaScript console?

   You can press F12 or you can open the developer tools in your browser. You can also use the shortcut Ctrl + Shift + J or Cmd + Opt + J(in Mac).

2. Why console is used in JavaScript?

   The JavaScript console is used for debugging purposes and to display output or some results of your code.