DEV Community

Cover image for The Console Object In Javascript
Sahil Jain
Sahil Jain

Posted on • Originally published at webbrainsmedia.com

The Console Object In Javascript

Original Post Link => https://webbrainsmedia.com/blogs/the-console-object-in-javascript

Javascript provides a global object called console which gives us the ability to access the browser's debugging console. If you have ever worked with javascript you must have used it with its log property. But it is not limited to that, try running the below command

console.log(console);
Enter fullscreen mode Exit fullscreen mode

You will see the capabilities that this console object comes with.

Console Object

Let's take a look at some useful ones:

1) console.log()

This is the most commonly used property. It is used to print out anything to the web console that we put inside of log().

Usage:

console.log('foo');
console.log(10);
console.log(null);
console.log(undefined);
console.log(['foo', 'bar']);
console.log({ foo: 'hello', bar: 'hi' });
Enter fullscreen mode Exit fullscreen mode

Output:

Console Log Object

2) console.table()

This property allows us to visualize data as tables inside our web console. The input data must be an array or an object.

Usage:

console.table(['foo', 'bar']);
Enter fullscreen mode Exit fullscreen mode

Output:

Console Table Object

console.table({ foo: 'hello', bar: 'hi' });
Enter fullscreen mode Exit fullscreen mode

Output:

Console Table Object

3) console.error()

This property is used to log error message to the web console. By default, the error message will appear in red color. Mainly used at the time of code testing.

Usage:

console.error('You Have Got An Error');
Enter fullscreen mode Exit fullscreen mode

Output:

Console Error Object

4) console.warn()

This property is used to log warning message to the web console. By default, the warning message will appear in yellow color.

Usage:

console.warn('You Have Got A Warning');
Enter fullscreen mode Exit fullscreen mode

Output:

Console Warn Object

5) console.assert()

This property gives an error message to the web console only if the first argument is false. If assertion is true, it prints out nothing.

Usage:

let obj = { name: 'Sam', age: '20' };
console.assert(obj['birth'], `obj doesn't contain birth key`);
Enter fullscreen mode Exit fullscreen mode

Output:

Console Assert Object

6) console.count()

This property logs the number of times the same instance of count() is called.

Usage:

console.count('foo');
console.count('foo');
console.count('bar');
console.count('bar');
console.count('bar');
Enter fullscreen mode Exit fullscreen mode

Output:

Console Count Object

7) console.group()

This property is used to group the output in level indented blocks in our web console. To define the group start, use console.group() and to define the end, use console.groupEnd().

Usage:

console.log('Outer Log');
console.group('Outer Group');
console.log('Level 1');
console.group('Inner Group');
console.log('Level 2');
console.error('Level 2');
console.groupEnd();
console.log('Level 1');
console.groupEnd();
Enter fullscreen mode Exit fullscreen mode

Output:

Console Group Object

8) console.time()

This property is used to keep track of the time that is passed between two console logs. To start the timer, use console.time('label') and to stop the timer, use console.timeEnd('label'). Remember to use the same label in both time() and timeEnd().

Usage:

console.time('time');
let i = 0;
while (i < 100000) {
  i++;
}
console.timeEnd('time');
Enter fullscreen mode Exit fullscreen mode

Output:

Console Time Object

9) console.trace()

This property logs the stack trace in the web console. Very useful feature when working with nested functions.

Usage:

const func1 = () => {
  const func2 = () => {
    console.trace();
  };
  func2();
};

func1();
Enter fullscreen mode Exit fullscreen mode

Output:

Console Trace Object

10) Styling In Console

We can also style our logs using CSS in our web console. We just need to pass our styles as a parameter and they will get applied to the logs.

Usage:

console.log(
  '%cWebBrainsMedia',
  'background-color: black; color: orange; font-style:  italic;  font-size: 2em; padding: 10px;'
);
Enter fullscreen mode Exit fullscreen mode

Output:

Console Styling

Original Post Link => https://webbrainsmedia.com/blogs/the-console-object-in-javascript

Top comments (0)