JavaScript developer must know these Console methods.
Tags: javascript, beginners, debugging, tutorial
Published: 2019-12-21 02:18:15

---
title: JavaScript developer must know these Console methods.
published: true
description: Debugging is the key skill to become the JavaScript Ninja and console methods is the starting point to become great JS developer
tags: javascript, beginner, debugging, tutorial
cover_image: https://thepracticaldev.s3.amazonaws.com/i/0cfomg37ba62ociki6ya.jpg
---

In web browser Console is a tool that help us to log information associated with a web page like: error, warning, network request etc. In javascript, the console is an object which provides access to the browser debugging console.

The console object provides us several different methods, like :
     
### `console.table(tabledata, tablecolumns)`
*  It prints data in a tabular form. 
* **tabledata -** It should be either Object or Array.
* **tablecolumns -** It specify the name of the array property to print in table.It is an optional field and it's used only with Array of object. 
```javascript
console.table([{ name : "Nikhil", language : "Javascript" },
               { name : "Karkra", language : "Python" }]);
```
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/sm6xztyrtph1wtektiml.PNG)

* If you see the below example we are passing the `name` as the  tablecolumn. So, the table print only with `name` property.
```javascript
console.table([{ name : "Nikhil", language : "Javascript" },
               { name : "Karkra", language : "Python" }], ["name"]);
```
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/k2rpd2ykd3pbrr7n9gys.PNG)

### `console.time(label) & console.timeEnd(label)`
* `console.time()` method starts a timer in the console view.
* `console.timeEnd()` method is used to end the timer and display the result in the console.
* **label -** This parameter is use to give a name to the timer and it's an optional field.

```javascript
function callApi(){
console.time('API TIMMER')
fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then(response => response.json())
  .then(json => {
        console.timeEnd('API TIMMER') //prints time taken by the API
        console.table(json) // prints the response of API
  })
}
callApi()
```
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/sj9uql3r7wdpuib9rkms.PNG)

### `console.log(message)` 
* It prints message to the browser console. It is useful for testing.

```javascript
console.log('Hurray!! We are JS developer')
```
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/shqjt7ydexadu0gakvp7.PNG)

### `console.warn(message)`
* It prints a warning message to the browser console. It is very useful to warn for something like this API is deprecating in future or this attribute is required for accessibility.
```javascript
console.warn('img elements must have an alt prop, either with meaningful text, or an empty string for decorative images')
```
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/zg3t31lkgbyjecud1hmm.PNG)

### `console.error(message)`
* It prints an error message to the browser console.
```javascript
console.error('Server is not running!!')
``` 
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/xknuddsk4wfcnezhtx60.PNG)

### `console.info(message)`
* It prints an information message to the console.
```javascript
console.info('React 17 is available!!')
``` 
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/ks908cawzvh5yv1suy6r.PNG)

### `console.count(label)`
* It prints the number of time this `console.count()` is called. It is very helpful to make sure if your particular function is called once or twice.
You can add a label that will be included in the console. By default the label "default" will be added.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/k2vgsaqfy37zjscww54v.PNG)

### `console.clear()`
* It clears the console.Once this method get called it prints a message in the console: "Console was cleared".
```javascript
console.clear()
```
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/4m7iu9vlv94nnbuul5f4.PNG)

### `console.assert(expression, message)`
* It prints the message to the console if an expression evaluates to false
```javascript
console.assert(2>3, '2 is not greater than 3')
```
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/i3yhpk1319f00cyz4j2h.PNG)

### `console.group(label) & console.groupEnd(label)`
* `console.group()` It indicated the start of a message group
* `console.groupEnd()` It indicated the end of a message group
* **label -** This parameter is use to give a name to the group and it's an optional field.

```javascript
//First group
console.group("URL Details");
console.log("Request URL: https://dev.to");
console.log("Request Method: GET");
console.log("Status Code: 200")
console.groupEnd("URL Details");
//Second group
console.group("Author Details");
console.log('Author name: Nikhil karkra')
console.groupEnd("Author Details");
```
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/0ceon4s7wgou5durnuyq.PNG)

### `console.groupCollapsed(label)`
* This is similar to `console.group` but it prints the collapsed message group. All messages print inside the group.
```javascript
//First collapsed group
console.groupCollapsed("URL Details");
console.log("Request URL: https://dev.to");
console.log("Request Method: GET");
console.log("Status Code: 200")
console.groupEnd("URL Details");
//Second collapsed group
console.groupCollapsed("Author Details");
console.log('Author name: Nikhil karkra')
console.groupEnd("Author Details");
```
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/71dfm03vh7ejiyh707ox.PNG)

#### References
<hr/>
https://developer.mozilla.org/en-US/docs/Web/API/Console