The Intermediate Guide to Console method with Your Browser

Introduction

For everyone who can code, console.log() is the most famous method and basic method for debugging. It prints out the value from the location you want. However, you can expand the utilization of the console method more.

1. console.log()

this is the most basic one. It prints out everything inside the log()

index.js

console.log('abc');
console.log(1);
console.log(true);
console.log(null);
console.log(undefined);
console.log([1, 2, 3, 4]); // array inside log
console.log({ a: 1, b: 2, c: 3 }); // object inside log

result

2. console.error()

for the error, console.error() is more noticeable way to print out, because It’s Redish

index.js

console.error('This is a simple error');

result

3. console.warn()

There is no reason for using console.warn() for normal cases, but it is possibly used to distinguishing from a bunch of the log. It shows in yellow color.

index.js

console.warn('This is a warning.');

result

4. console.time() and console.timeEnd()

This is the easiest way to figure out the amount of time spent by a block or a function.

index.js

console.time('timer');
console.log('A is running..');
console.log('B is running..');
console.log('C is running..');
console.timeEnd('timer');

result

5. console.table()

Have you ever made a table from the basic console? Here is the answer.

index.js

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

result

6. console.group() and console.groupEnd()

group() and groupEnd() methods allow grouping contents in a separate indented block.

index.js

console.group('group');
console.warn('warning');
console.error('error');
console.log('log');
console.groupEnd('group');
console.log('new log outside group');

result

6. Styling console

Sometimes, for convenience or test for QA and Operation, we have to show the log on Devtools. For those cases, a normal console.log() is not easily readable for the others. Therefore, we can style the console in various ways.

index.js

console.log(
	'%cStyled Log',
	'background-color: gold ; color: #000 ; font-weight: bold ; padding: 4px ; font-size: 14px;'
);

result

Conclusion

This is it. Now you know, how to show the log in a more efficient way not just console.log(). Lastly, here is the example of console that I mentioned above. Try it!