Console methods that you might not know but can change how you debug your code
Tags: webdev, frontend, debugging, javascript
Published: 2021-09-29 17:24:04

>
“A problem well stated is a problem half solved.” --John Dewey

Howdy JavaScript Developers 👋

We all love to write code, right? Most of us just follow 👇
![eat sleep.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1632889545186/eK3dQbqGY.png)

Until we get some bugs in our code and we have to break our routine and most of it changes like this 👇
![Eat.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1632890108390/UEXbMxUav.png)

I am going to help you here write the magical code which will never have any 🐞.

Hehe! ok, I am kidding there is no one in this heavenly earth who can teach you to code without bugs. 
But there are some ways we can reduce our time to debug and help us understand the 🐞 and source of it.

I hope you are guys are still with me, if you are good, let's get started -

As JavaScript Developer we all have used the console inside the dev tool way often. 
Our first approach to test or debug our code is to log it to the console.

But do you know there are different console methods that we can use to differentiate between our logs?

## console.log("hello world!")

🔸 The most commonly used console method is `console.log()` which prints anything passed to it as arguments on the console

🔸 Multiple arguments can be passed.

🔸 It can be strings, variables, objects, functions, or HTML elements.

![carbon.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1632890947608/J3p5UIZHv.png)

## console.assert(expression, message);

🔸 It is used to make conditional log statements on the console.

🔸 It prints the message (passed as the second argument) if the expression (passed as the first argument) is false.

🔸 If the assertion is true nothing is printed on the console.

![Screenshot 2021-09-27 at 7.59.45 PM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1632891730271/LH3eeaPn7.png)

## console.warn()

🔸 It prints a warning message onto the console.

🔸 The message would be highlighted with yellow color.

🔸 It gives us the call stack for the warning log as well which helps to trace the warning in the call stack.

![Screenshot 2021-09-27 at 8.02.22 PM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1632891867344/w3P3GT3Nx.png)

## console.error()

🔸 Just like the `console.warn()` it prints the error message on the console.

🔸 The message is highlighted with red color.

🔸 We get the error call stack for easy debugging.

![error.jpeg](https://cdn.hashnode.com/res/hashnode/image/upload/v1632892521788/XqMCbqQy5.jpeg)

## console.count(label);

🔸 It prints the number of times the count method has been called for the argument passed to it.

🔸 If no argument is passed to it, it counts for the `default` label.

🔸 Argument can only be a string.

![Screenshot 2021-09-27 at 8.15.16 PM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1632892732043/cWZRY7j67.png)

## console.table(data)

🔸 It prints arrays and objects into tabular form.

🔸 It needs to have an array or an object as the mandatory argument.

🔸 First column is labeled as `index`. 

🔸 For arrays, the first column is the indices of the elements 

![Screenshot 2021-09-27 at 8.28.43 PM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1632892958659/cE2VqR11B.png)

& for objects, its keys.

![table.jpeg](https://cdn.hashnode.com/res/hashnode/image/upload/v1632892997852/fwVdKRYsL.jpeg)

## console.time(label) & console.timeEnd(label)

🔸 `console.time(label)` starts the timer to track the time taken by a task.

🔸 `console.timeEnd(label)` stops the timer for that label and prints the total time taken since it started.

![Screenshot 2021-09-27 at 8.35.18 PM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1632893791333/a3hzAWr76.png)

🔸 `label` argument has to be the same and once we call `console.timeEnd(label)` the timer is removed from the stack.

## console.timeLog(label)

🔸 It logs the time elapsed since the timer had started after running the `console.time(label)` method.

🔸 Needs to have the same `label` argument as the `console.time(label)` method.

![timeLog.jpeg](https://cdn.hashnode.com/res/hashnode/image/upload/v1632894073406/lfJade8lY.jpeg)
🔸 If called after `console.timeEnd(label)` it gives the warning message stating `Timer Label does not exist` because `timer` gets popped out of the stack.

## console.group() & console.groupEnd()

🔸 `console.group()` groups the logs with an indentation

🔸 `console.groupEnd()` closes the group started before.

🔸 can be used to batch errors and warnings together or print similar information together.

![Screenshot 2021-09-27 at 8.53.59 PM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1632894530058/UvQSrTbBq.png)

## console.trace()

🔸 It shows a complete call stack when debugging from the point it is called.

🔸 It can very handy when debugging a complex code with multiple files and modules.

![trace.jpeg](https://cdn.hashnode.com/res/hashnode/image/upload/v1632894774080/CzJmVh_wv1.jpeg)

## console.clear()

🔸 When the console gets too cluttered, you can use `console.clear()` method to clear the console.

## Bonus Tip

You can print log statements with your own custom styles. There are a bunch of `string substitutions` that you can use to manipulate the log statement. 
But it does work only with console methods that accept strings as arguments.

Check how using `%c` with our string in `console.log()` changes the output of the log statements.

![Screenshot 2021-09-29 at 11.46.58 AM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1632896233585/-wTmLgVpe.png)

## Wrapping up

Alright! that's the end of today's post. I hope you guys liked it and maybe you would start using the above console methods in proper use-cases instead of using just `console.log()` for all your debugging.

> 
“If your only tool is a hammer then every problem looks like a nail.”
-- Abraham Maslow 

If you are someone who is interested in Frontend development and wants to know more about it, consider following me 👇

[@Twitter](https://twitter.com/LalitSinghShahi) 

[@LinkedIn](https://www.linkedin.com/in/lalitshahi/) 

[@Dev.to](https://dev.to/shahilalit) 

[@Hashnode](https://blog.lalitshahi.com/)

Feedbacks, good or bad are appreciated 🧡

Until next time, keep coding, keep learning and KEEP DEBUGGING. 😁

Cheers!

Lalit