The Console Object In Javascript
Tags: javascript
Published: 2021-06-27 20:02:25

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

```js
console.log(console);
```

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

![Console Object](https://webbrainsmedia.com/static/b22fe35b70ff6536c5b3aef3ae06e324/33b38/console-object.png '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:

```js
console.log('foo');
console.log(10);
console.log(null);
console.log(undefined);
console.log(['foo', 'bar']);
console.log({ foo: 'hello', bar: 'hi' });
```

#### Output:

![Console Log Object](https://webbrainsmedia.com/static/0ada54e4e5a333dcb5ac9415d7d77471/e9bf8/console-log.png '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:

```js
console.table(['foo', 'bar']);
```

#### Output:

![Console Table Object](https://webbrainsmedia.com/static/782e765abb4347841d48562cdf9c8e2e/ef6b9/console-table-array.png 'Console Table Object')

```js
console.table({ foo: 'hello', bar: 'hi' });
```

#### Output:

![Console Table Object](https://webbrainsmedia.com/static/da9d1641b31c09612ead64ce37cdfc6f/94829/console-table-obj.png '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:

```js
console.error('You Have Got An Error');
```

#### Output:

![Console Error Object](https://webbrainsmedia.com/static/5bb58dc05c221f7b50cedd3c8d54bc19/7c2a6/console-error.png '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:

```js
console.warn('You Have Got A Warning');
```

#### Output:

![Console Warn Object](https://webbrainsmedia.com/static/2d4817b76d3107e78bc4d8c9f747acf5/526ee/console-warn.png '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:

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

#### Output:

![Console Assert Object](https://webbrainsmedia.com/static/3d20a3f376b24a0c3fcafd8a8f9b362c/fbdcb/console-assert.png 'Console Assert Object')

## 6) console.count()

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

### Usage:

```js
console.count('foo');
console.count('foo');
console.count('bar');
console.count('bar');
console.count('bar');
```

#### Output:

![Console Count Object](https://webbrainsmedia.com/static/d895f0f8e9b24c21916d67ed6c5a86b3/e9bf8/console-count.png '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:

```js
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();
```

#### Output:

![Console Group Object](https://webbrainsmedia.com/static/1450c01d6052d8ebf7d6533490c0edf0/39e45/console-group.png '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:

```js
console.time('time');
let i = 0;
while (i < 100000) {
  i++;
}
console.timeEnd('time');
```

#### Output:

![Console Time Object](https://webbrainsmedia.com/static/5d9baedb6171363bf56bf24bb00130d6/7c2a6/console-time.png '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:

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

func1();
```

#### Output:

![Console Trace Object](https://webbrainsmedia.com/static/970859d72da8a35fcc0e4ed60ea84ffb/33b38/console-trace.png '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:

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

#### Output:

![Console Styling](https://webbrainsmedia.com/static/df7266a047fd06de663b19948de15980/9bb7a/console-styling.png 'Console Styling')

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