Stop Using console.log() In JavaScript

There are better options

Harsha Vardhan
Oct 25 · 4 min read
Image for post
Image for post
Photo by Hugo Rocha on Unsplash

Are you a JavaScript developer who uses console.log() often to debug your code? There is nothing wrong in it. But if you are unaware, there are so many other methods of console object which are quite amazing. In this article, I would like to explain the effective usage of these methods.

Why Is console Object Used?

The console object in JavaScript provides access to the browser debugging console, where you can print values of the variables which you’ve used in your code. Oftentimes, this can be used to debug if the right value is being passed in your code.

I’m pretty sure most of us developers have used console.log() to print values in our browser console. log is just one method of the console object. There are several other methods that are very useful.

1. console.log()

This method is mainly used to print the value passed to it to the console. Any type can be used inside the log(), be it a string, array, object, boolean etc.

console.log('JavaScript');
console.log(7);
console.log(true);
console.log(null);
console.log(undefined);
console.log([1, 2, 3]);
console.log({a: 1, b: 2, c: 3});
Image for post
Image for post
Output

2. console.error()

This method is useful while testing code. It is used to log errors to the browser console. By default, the error message will be highlighted with red color.

console.error('Error found');
Image for post
Image for post
Output

3. console.warn()

This method is also used to test code. Usually, it helps in throwing warnings to the console. By default, the warning message will be highlighted with yellow color.

console.warn('Warning!');
Image for post
Image for post
Output

4. console.clear()

This method is used to clear the console. It is often used if the console is clogged with messages/errors. The console will be cleared and a message Console was cleared will be printed in the console.

console.clear()
Image for post
Image for post
Output

5. console.time() and console.timeEnd()

Both these methods are used in conjunction with each other. Whenever we want to know the amount of time spent by a block or a function, we can make use of the time() and timeEnd() methods. Both these functions take a string as a parameter. Make sure you use the same string for both these functions to measure the time.

console.time('timer'); const hello =  function(){
console.log('Hello Console!');
}
const bye = function(){
console.log('Bye Console!');
}
hello(); // calling hello();
bye(); // calling bye();
console.timeEnd('timer');
Image for post
Image for post
Output

6. console.table()

This method generates a table inside a console, for better readability. A table will be automatically generated for an array or an object.

console.table({a: 1, b: 2, c: 3}); 
Image for post
Image for post
Output

7. console.count()

This method is used to count the number that the function hit by this counting method. This can be used inside a loop to check how many times a particular value has been executed.

for(let i=0; i<3; i++){
console.count(i);
}
Image for post
Image for post
Output

8. console.group() and console.groupEnd()

These methods group() and groupEnd() allows us to group contents in a separate block, which will be indented. Just like the time() and the timeEnd() they also accept a label, of the same value. You can expand and collapse the group.

console.group('group1'); 
console.warn('warning');
console.error('error');
console.log('I belong to a group');
console.groupEnd('group1');
console.log('I dont belong to any group');
Image for post
Image for post
Output

Bonus : Styling your logs

You can also add Styling to the console logs in order to make logs look fancy. It is very simple. You just need to add CSS styling as a second parameter to the log() function, while starting the first parameter with %c. The styles will replace the %c in the logs.

const spacing = '10px'; 
const styles = `padding: ${spacing}; background-color: white; color: red; font-style: italic; border: 1px solid black; font-size: 2em;`;
console.log('%cI am a styled log', styles);
Image for post
Image for post
Output

Conclusion

The console object is very much useful for the developers to debug the code. We as developers often use only the log function. Let’s start using the console object to its fullest potential so that it’s easier to debug and to view the browser logs vividly. I hope this article was helpful.

Thank you for reading!

JavaScript In Plain English

New JavaScript + Web Development articles every day.

Harsha Vardhan

Written by

Engineer, Photographer, Tech Blogger. Builds products and writes for developers. I love to code and love to help others code :)

JavaScript In Plain English

New JavaScript + Web Development articles every day.

Harsha Vardhan

Written by

Engineer, Photographer, Tech Blogger. Builds products and writes for developers. I love to code and love to help others code :)

JavaScript In Plain English

New JavaScript + Web Development articles every day.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store