Say no to console.log!

#javascript

Do you always use console.log in your projects during development?

And even though we will keep using console.log, there are other alternatives that will make your development more fun and productive.

NOTE: If you are viewing log in a terminal especially if you are a backend developer then you can try JSON.stringify(your_data, null, 2) and use console.log() on the result. This will make sure that you don't get {... value: [Object, Object]} in the log and the log will also be formatted making it easier to read.

console.dir()

For hierarchical listing of arrays and objects.

console.dir(["apples", "oranges", "bananas"]);

console.table()

For rows and columns listing of arrays (might not be suitable for objects).

console.table(["apples", "oranges", "bananas"]);

console.table({"a": 1, "b": 2, "c": 3});

console.group()

console.log('This is the top outer level');

console.group('Task 1');
console.log('Task activity 1');
console.log('Task activity 2');
console.groupEnd();

console.group('Task 2');
console.log('Task activity 3');
console.log('Task activity 4');
console.groupEnd();

console.log('Back to the top outer level');

console.time() & console.timeEnd()

try {
  console.time("record-1");
  await someAsyncTask();
} catch (error) {
   // handle error
} finally {
  console.timeEnd("record-1");
}

console.clear()

This will clear the console.

I hope this was helpful! 🚀

Top comments (50)

Samuel Rouse • Jun 18

Great list! When I'm debugging I often put a console.trace() within a console.group(). This lets me provide identifying information at the group label, and be able to open the group to get to the detailed trace information without it blowing up the console.

Alex • Jun 19

Haven’t heard about console.trace(), that’s a gem! The more you know…

modelair • Jun 21

the article of 2024. 🤦‍♂️

Syed Muhammad Ali Raza • Jun 19

There are many like

console.error
console.assert()
console.trace()
console.groupEnd()

Allan Bonadio • Jun 21

There's also console.info() which is increasingly almost exactly the same as console.log(). Yes, now it seems, exactly the same on Chrome. Gets a blue icon in Safari. And gets a ⓘ icon in Firefox. (I usually use emojis to mark different log msgs - more variety.)