DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 964,423 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Siddharth for ByteSlash

Posted on • Originally published at blog.siddu.tech on

7 console.log() alternatives

Sometimes while debugging you may use console.log or maybe console.warn too. But there are a lot more methods which can help you debug your code even better. Let's take a look at some of them:

console.table()

The handiest method on this list. Can be used to log any object or array in table form.

console.table([
  {
    "userId": 1,
    "id": 1,
    "title": "delectus aut autem",
    "completed": false
  },
  {
    "userId": 1,
    "id": 2,
    "title": "quis ut nam facilis et officia qui",
    "completed": false
  },
  {
    "userId": 1,
    "id": 3,
    "title": "fugiat veniam minus",
    "completed": false
  },
  {
    "userId": 1,
    "id": 4,
    "title": "et porro tempora",
    "completed": true
  },
  {
    "userId": 1,
    "id": 5,
    "title": "laboriosam mollitia et enim quasi adipisci quia provident illum",
    "completed": false
  },
  {
    "userId": 1,
    "id": 6,
    "title": "qui ullam ratione quibusdam voluptatem quia omnis",
    "completed": false
  },
]);

Enter fullscreen mode Exit fullscreen mode

This will give us a neat little table:

console.table()

Cool?

console.assert()

console.assert() is used to assert that something is truthy. If not, it will log a message to the console.

const isEven = n => n % 2 === 0;

for (let i = 0; i < 3; i++) {
    console.assert(isEven(i), '%s is not even!', i);
}
Enter fullscreen mode Exit fullscreen mode

This will log Assertion failed: 1 is not even! because well, one is not even! (Who told you that one is even?? Go to school and learn a thing or two)

console.count()

console.count() is used to check how many times this line has been called.

for (let i = 0; i < 3; i++) {
    console.count();
}
Enter fullscreen mode Exit fullscreen mode

This will log:

default: 1
default: 2
default: 3
Enter fullscreen mode Exit fullscreen mode

You can also label the count:

for (let i = 0; i < 3; i++) {
    console.count('outer loop');
    for (let i = 0; i < 3; i++) {
        console.count('inner loop');
    }
}
Enter fullscreen mode Exit fullscreen mode

This will log:

outer loop: 1
inner loop: 1
inner loop: 2
inner loop: 3
outer loop: 2
inner loop: 4
inner loop: 5
inner loop: 6
outer loop: 3
inner loop: 7
inner loop: 8
inner loop: 9
Enter fullscreen mode Exit fullscreen mode

console.group() and console.groupEnd()

console.group() and console.groupEnd() are used for grouping similar (or different ;) logs together.

console.group('group 1');
for (let i = 0; i < 3; i++) {
    console.log(i);
}
console.groupEnd('group 1');

console.group('group 2');
for (let i = 0; i < 3; i++) {
    console.log(i);
}
console.groupEnd('group 2');
Enter fullscreen mode Exit fullscreen mode

That should log two openable/closeable groups which can be handy when dealing with a lot of logs.

Inside the groups you can use any other console methods, even nested console.group()

You can also use console.groupCollapsed() to make the groups closed by default.

console.time() and friends

You can use console.time() and it's friends console.timeStart(), console.timeEnd(), and console.timeLog() to measure stuff.

console.time();

for (let i = 0; i < 1e9; i++) {
  // Intense stuff
}

console.timeEnd()
Enter fullscreen mode Exit fullscreen mode

This will log something like:

default: 9531ms - timer ended
Enter fullscreen mode Exit fullscreen mode

9531ms is the time between console.time() and console.timeEnd().

You can also label these timers so you can have multiple independent timers running at the same time:

console.time('first');

for (let i = 0; i < 1e9; i++) {
  // Intense stuff
}

console.timeLog('first'); // Logging how much time has passed

console.time('second');

for (let i = 0; i < 1e9; i++) {
  // Intense stuff
}

console.timeEnd('first');
console.timeEnd('second');
Enter fullscreen mode Exit fullscreen mode

This will log:

first: 8497ms
first: 17815ms - timer ended
second: 9318ms - timer ended
Enter fullscreen mode Exit fullscreen mode

console.trace()

When you are working with a lot of nested function calls or recursion at some point you will need to know which function called who. console.trace() is a handy way to do that:

const shallow = () => deep();
const deep = () => deeper();
const deeper = () => deepest();
const deepest = () => console.trace()

shallow()
Enter fullscreen mode Exit fullscreen mode

This will log this stacktrace:

console.trace()
    deepest debugger eval code:4
    deeper debugger eval code:3
    deep debugger eval code:2
    shallow debugger eval code:1
    <anonymous> debugger eval code:1
Enter fullscreen mode Exit fullscreen mode

Now we can easily see that shallow called deep, which called deeper which called deepest


That's the end of the list!

If you found this post helpful, spread the word! or follow me on twitter or over here to stay updated on my blog posts!

Top comments (5)

Collapse
 
thumbone profile image
Bernd Wechner

Lovely piece. Thanks. Small heads up that the table disappeared in your move of the article to dev.to. Might want to fix that. Of course could be my end broken? But all I see is:

WhatISee

Collapse
 
siddharthshyniben profile image
Siddharth Author

I can see the image though. It's on your end probably

Collapse
 
thumbone profile image
Bernd Wechner

Hey, it renders now ;-). No idea what lay behind that. The one issue I do have locally and know about is that I'm behind a DNSSEC secured DNS, meaning it refuses to resolve names that don't meet DNSSEC requirements. This means some sites very occasionally, it's very rare, don't load, and similarly inline images if they are loaded from such a domain. But given I changed nothing since yesterday, that's not a likely explanation.

Collapse
 
mrdulin profile image
official_dulin

An example of console.table: stackoverflow.com/a/57684959/6463558

Collapse
 
deninpaulv profile image
Denin Paul

Awesome article!! Also learned unique ways to debug :P

This post blew up on DEV in 2020:

js visualized

πŸš€βš™οΈ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! πŸ₯³

Happy coding!