Lalit Shahi
Lalit Shahi

Lalit Shahi

Console methods that you might not know but can change how you debug your code

Console methods that you might not know but can change how you debug your code

โ€œA problem well stated is a problem half solved.โ€ --John Dewey

Subscribe to my newsletter and never miss my upcoming articles

Howdy JavaScript Developers ๐Ÿ‘‹

We all love to write code, right? Most of us just follow ๐Ÿ‘‡ eat sleep.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

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

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

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

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

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

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

& for objects, its keys.

table.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

๐Ÿ”ธ 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 ๐Ÿ”ธ 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

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

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

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

@LinkedIn

@Dev.to

Feedbacks, good or bad are appreciated ๐Ÿงก

Until next time, keep coding, keep learning and KEEP DEBUGGING. ๐Ÿ˜

Cheers!

Lalit

ย 
Share this