DEV Community

loading...
Cover image for Let's go beyond console.log statements. (There is more to console object than what meets the eye. )

Let's go beyond console.log statements. (There is more to console object than what meets the eye. )

jrishabh55 profile image Rishabh Jain ・4 min read

consoel.log() is one of the most important and early learned debugging tool that we have when working with javascript. The tool become one of the most essential part of the development. Most developers start their debugging with console.log() statements.

Today in this tutorial let's go beyond the console.log() and learn what more console object can do for us and increase our productivity/proficiency with console.

Different type of logging.

With console object we have more than just log statements, some of them are warn and error.

console.warn()

console.warn() is very useful when you wanna signify that something is not right with the code but its not bad enough to be classified as error.

console.warn('This is a warning');
Enter fullscreen mode Exit fullscreen mode

image

console.error()

console.error() is a useful statement when we wanna signifies that something is broken in our code.

console.error('This is an error');
Enter fullscreen mode Exit fullscreen mode

image

console.assert()

console.assert() is a conditional error printer which can be helpful in verity of situations. it accepts 2 parameters 1st of which is our condition. If true the error message will not print. if false error message will be logged to the console.

console.assert(false, 'This error message will show up');

console.assert(true, 'This error message will not show up');
Enter fullscreen mode Exit fullscreen mode

image

console.count, console.countReset

console.count() is one of the more important functions that is provided by console object. It can be used as counter that is incremented by one every time its been called and console.countReset() can be used to reset the counter.

  1. We can use it to count a number of iterations in a loop.
  2. We can use it to see how many times a function has been called.
  3. etc
let x = 0;
const calculateSomeValue = x => x + 1;

while (x < 100) {
    x = calculateSomeValue(x);
    console.count('x');
}

console.countReset('x');
console.log('counter x has been reset');
console.count('x');
Enter fullscreen mode Exit fullscreen mode

image

image

console.time(), console.timeEnd()

console.time() and console.timeEnd() are very important functions provided to us by console object. The two functions can be used to start and stop a timer. The timer can be helpful in performance tests and more.

console.time('forLoopTimer');

for (let x = 0; x < 100000; x++) {
    console.count('forLoop');
}

console.timeEnd('forLoopTimer');
Enter fullscreen mode Exit fullscreen mode

console.group(), console.groupEnd()

console.group() and console.groupEnd() are fairly useful tools when you want to encapsulate some logs together.

console.group();
console.log('This is console.log 1');
console.log('This is console.log 2');
console.log('This is console.log 3');
console.log('This is console.log 4');
console.groupEnd();

console.group();
console.log('This is console.log 5');
console.log('This is console.log 6');
console.log('This is console.log 7');
console.log('This is console.log 8');
console.groupEnd();
Enter fullscreen mode Exit fullscreen mode

image

Now let's go crazy and nest them for helping in nesting we can pass labels in each group which will act as our identifiers.

console.group('Group1');
console.log('This is console.log 1');
console.log('This is console.log 2');
console.log('This is console.log 3');
console.log('This is console.log 4');

console.group('Group2');
console.log('This is console.log 5');
console.log('This is console.log 6');
console.log('This is console.log 7');
console.log('This is console.log 8');
console.groupEnd('Group2');

console.groupEnd('Group1');
Enter fullscreen mode Exit fullscreen mode

image

console.table()

Since the day i found out about console.table() i fell in love with it. Have an array you need to look at in a good symmetrical way?, have an object ? console.table() have you covered. It expects two arguments tableData and tableColumn . The first argument tableData is required but 2nd argument is optional and specifies which columns do you want to display.

console.table(['One', 'Two', 'Three']);

console.table({
    name: 'Rishabh Jain',
    designation: 'Sen Software Engineer',
    country: 'India'
});
Enter fullscreen mode Exit fullscreen mode

image

Now let's say from the above example we only wanna show name and country.

console.table([{
    name: 'Rishabh Jain',
    designation: 'Sen Software Engineer',
    country: 'India'
}], ['name', 'country']);
Enter fullscreen mode Exit fullscreen mode

image

console.trace()

A lot of times it happens that we need to know where a specific function is called or we need to know where a function is. console.trace() can be extremely useful when you wanna know when your functions are being called. You can also pass an optional label to the function.

const myFunc = () => console.trace();

const myNewHOF = () => myFunc();

myNewHOF();
Enter fullscreen mode Exit fullscreen mode

image

Format your output

With this trick you can style your output the way you want it to.

Specifier Output
%s Formats the value as a string
%i or %d Formats the value as an integer
%f Formats the value as a floating point
%o Formats the value as an expandable DOM element
%O Formats the value as an expandable JS Object
%c Applies CSS style rules to the output string
console.log('%c Lets change this to cool', 'font-weight: bold; color: blue; background: cyan');
Enter fullscreen mode Exit fullscreen mode

image

Did i miss something?, Let me know in the comments below...

Thank you for reading the article. Please let me know in comments how can i improve this and what else do you want me to write about.

Discussion (4)

pic
Editor guide
Collapse
andrewbaisden profile image
Andrew Baisden

Good article. It is true that console.log() is the most well known but the others are just as great too!

Collapse
jrishabh55 profile image
Rishabh Jain Author

Thanks...,

And yea there are just so many things that are less known but very useful in js.

Collapse
Collapse
jrishabh55 profile image
Rishabh Jain Author

Leta do it 😂, just kidding nice article brother, I didn't saw it earlier