Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

Explain all Console Object in HTML

  • Last Updated : 18 Jan, 2022

The console object in HTML provides access to the browser’s debugging console and working of the object console varies from browser to browser, but there is some set of features that are typically provided. The console object is a property of the windows object. The console object can be accessed with: window.console or console. The console object can also be accessed or used from any global object.

Now let’s understand different console objects methods.

1. assert() Method: This Function helps in writing a message to the console if an assertion is entered False. If the assertion is true, nothing happens.

Syntax: 

console.assert(expression , message);
  • expression: It can be any expression that the user wants to enter and check the output. If the expression evaluates to false, a message is printed in the console.
  • message: The message is to be written in the console when the condition is false.

 
 

Javascript




<script>
let x = 3;
let y = 3;
console.assert(x + y == 10, "Expression returned 'false'");
</script>

Output:

Explanation: In the Output of your Console Window you could see the message printed “Expression returned ‘false’ as x + y = 6 which is not equal to 10.

2. clear() Method: It helps to clear the console. In the case of Chrome, a simple text will be printed like: ‘Console was cleared’, while in Firefox no message is returned. 

Syntax:

console.clear();

Example: 

 
 

HTML




<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
</head>
<body>
  <button onclick="myFunction()">
    Clear Console
  </button
  <script>
    console.log("Hello! Press the button to clear the console!");
     
    function myFunction() {
      console.clear();
    }
  </script>
</body>
</html>

Output:

3. count() Method: The method logs the number of times that this particular call to count() has been called.

Syntax:

console.count(label);

Example: Here in the below example: the default value of the label “Default” is used. But we can give other names to the label whatever you want like: console.count(“myCount”);

Javascript




<script>
    for (let i = 0; i < 5; i++) {
      console.count();
    }
</script>

Output:

4. Error() Method: It outputs an error message to the console on running the program. The console is very useful for testing purposes. By default, the error message will be highlighted with red color as shown below.

Syntax:

console.error(message);

Example: 

Javascript




<script>
    console.error("You have made a mistake");
</script>

Output:

5. group() Method: It helps to create a new inline group in the console. This indents console messages by an additional level until the console.groupEnd() is called in the program. All new messages will be printed inside this group as shown in the example below.

Syntax:

console.group(label);

Example: 

Javascript




<script>
    console.log("Hello");
    console.group();
    console.log("Hello again, this time you are inside a group!");
</script>
  

Output:

6. groupEnd() Method: It helps to Exits the current inline group in the console. So after using the Function groupEnd() we are able to exit the group we entered.

Syntax:

console.groupEnd();

Javascript




<script>
    console.log("Hello Guys!");
    console.group();
    console.log("hello from inside a group!");
    console.groupEnd();
    console.log("and we are back outside the group");
</script>

Output:

Explanation: As you can see the message ‘and we are outside the group ‘ is printed which indicates that we have successfully exited the console group.

7. info() Method: It gives an Output as a  informational message to the console. We can display any information using the info() method. In Firefox, a small ” i ” icon is displayed next to these items in the Web console’s log. 

Syntax:

console.info(message)

Example: Here we have printed ‘hello world’ in the below example you can print your full name, names of your favorite fruits, etc.

Javascript




<script>
    console.info("Hello world!");
</script>

Output:

8. log() Method: It prints and outputs a message to the console. The message may be a single string (with optional substitution values) or it may be anyone or more objects. The log() method is useful for testing purposes. We can put any type of variable in the log like string, array, object, boolean, etc.

Syntax:

console.log(message);

Example: 

Javascript




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

Output:

9. table() Method: It displays tabular data as a table in the console. This function takes one mandatory argument ‘tabledata’ , which can be an array or an object, and one additional optional parametertablecolumns’ as shown below:

Syntax:

 console.table(tabledata, tablecolumns );

If we don’t enter the ‘tablecolumns’ it takes  0,1,2,… as default index values  as seen in the example below.

Example: 

Javascript




<script>
    console.table(["Audi", "Volvo", "Ford"]);
</script>

Output:

10. Time() Method: This function helps to start a timer and shows how long a single operation takes to complete. The time() method also allows you to time code for testing purposes. Use the label parameter to name different timers so that timers are differentiated from each other.

Syntax: 

console.time(label);

Example:

 
 

Javascript




<script>
    console.time();
    for (let i = 0; i < 1000; i++) {
      // some code
    }
    console.timeEnd();
</script>

Output:

11. timeEnd() Method: It helps to stop a timer that was previously started by console.time() (as shown in the above example). The timeEnd() method also allows you to time code for testing purposes. Here you could see how we have used timeEnd() in the previous code to see the output. 

Syntax:

console.timeEnd(label);

Javascript




<script>
    console.time();
    for (let i = 0; i < 1000; i++) {
      // some code as previous one
    }
    console.timeEnd();
</script>

Output:


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!