Exploring JavaScript console.log object
Tags: javascript, webdev, beginners, tutorial
Published: 2022-05-01 10:20:41


**If you like what I write and want to support me, please follow me on [Twitter](https://twitter.com/TheDailyTechTa1) to learn more about programming and similar topics ❤️❤️**
## JavaScript Console

>The console object provides access to the browser's debugging console (e.g. the Web console in Firefox). The specifics of how it works varies from browser to browser, but there is a de facto set of features that are typically provided.

Most developers usually use `console.log()` to debug JavaScript code, but `console` provides us with such a powerful set of features it would be shame not to use them, or at least know what they do.



- `console.log()` For general output of logging information.
- `console.info()` Informative logging of information.
- `console.warn()` Outputs a warning message.
- `console.error()` Outputs an error message to the Web console.

Using other logging besides `console.log()` will provide you with more informative and clearer logs.

![console logging example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4rh74jy8pa4thcj7duem.png)

## Lets start by exploring console object

![console](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0kwlj6wc7wgj0e8q7gqa.png)

As we can see Console object has plenty of methods. Lets explore some of more useful ones.


## console.clear()

The `console.clear()` clear the console.

## console.dir()

`console.log()` prints the object in its string representation while `console.dir()` recognizes the object as an object and prints it’s properties in the form of a clean expandable list.

``` javascript
const dog = {name: 'Rex', age: 7, friends: ['cat', 'dog', 'duck']};
console.dir(dog);
```

![console.dir()](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e0uarwub9qbw15xjf90r.PNG)

## console.table()


With `console.table()` we can create beautiful tables. This is probably my favourite `console` method.


![console.table](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1eka7eaofk3p3twymy0g.PNG)


## console.time(), console.timeLog() and console.timeEnd()

Use `console.time()` to start a timer.
Use `console.timeLog()` to print time elapsed since the timer started.
Use `console.timeEnd()` to print the total amount of time since `console.time()` started.

![console.table()](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/01eoysbgw6q8uw7r7025.PNG)

## console.group() and console.groupEnd()

>The console.group() method creates a new inline group in the Web console log. This indents following console messages by an additional level, until console.groupEnd() is called.

![group](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zvyy14yey3zykvxy37rm.PNG)

## console logging with CSS

This works with most console method such as `.log()`, `.warn()`, `.error()` etc.

*__Please note that we have to use '%c' for css to work!__*

``` javascript
console.log(
        "%cTheDailyTechTalk!",
        "color:red;font-family:system-ui;font-size:4rem;-webkit-text-stroke: 1px black;font-weight:bold"
      );
```

![group](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zxl8cpeg8znxtypzpubb.PNG)

*I recently started a new blog [TheDailyTechTalk](https://thedailytechtalk.com) where I create free content. If you liked this post and would like to read more posts about javascript please check it out 🎉🎉
🥰*