• Home
  • About
Post header banner
User's profile
Alish Giri Published on Jun 17 • 2 min read

Say no to console.log!

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"]);
Enter fullscreen mode Exit fullscreen mode

console.dir example

 

console.table()

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

console.table(["apples", "oranges", "bananas"]);
Enter fullscreen mode Exit fullscreen mode

console.table array example

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

console.table object example

 

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');
Enter fullscreen mode Exit fullscreen mode

console.group example

 

console.time() & console.timeEnd() 

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

console.time log

 

console.clear()

This will clear the console.

 
I hope this was helpful! 🚀