console methods in JavaScript

Today we’ll explain the various console methods in JavaScript and how to use it with examples.

Checkout more articles on JavaScript

console methods

log()
info()
warn()
error()
clear()
table()
count()
time() and timeEnd()
group() and groupEnd()
Custom console logs

1. log()

Use the `log()` method to print any type of the value. It could be a string, integer, object, array, boolean, etc.

console.log('Clue Mediator');
console.log(304);
console.log(true);
console.log(undefined);
console.log(null);
console.log([1, 2, 3, 4]); // array
console.log({ x: 1, y: 2, z: 3 }); // object

console.log() - Clue Mediator

2. info()

Use the `info()` method to display logs as information.

console.info('Info log!');

console.info() - Clue Mediator

3. warn()

Use the `warn()` method to show the warning log in the console.

console.warn('Warn log!');

console.warn() - Clue Mediator

4. error()

Same as the above logs we can use the `error()` method to show the error log in the console.

console.error('Error log!');

console.error() - Clue Mediator

5. clear()

Run the `clear()` command to clear the console log.

console.clear();

console.clear() - Clue Mediator

6. table()

The `table()` method allows us to generate a table inside a console. The input must be an array or an object which will be shown as a table.

console.table({ 'x': 1, 'y': 2 });
console.table([['Clue'], ['Mediator'], ['The way to write your code!']]);

console.table() - Clue Mediator

7. count()

The `console.count()` method logs the number of times that this particular call to `count()` has been called.

console.count('Clue Mediator');
console.count('The way to write your code');
console.count('The way to write your code');
console.count('Clue Mediator');
console.count('The way to write your code');

console.count() - Clue Mediator

8. time() and timeEnd()

Use the `time()` method to start a timer you can use to track how long an operation takes. The `timeEnd()` method stops a timer that was previously started by calling `console.time()`.

console.time('timeExample');
const fn1 = function () {
  console.log('fn1 called!');
}
const fn2 = function () {
  console.log('fn2 called!');
}
fn1(); // calling fn1();
fn2(); // calling fn2();
console.timeEnd('timeExample');

console.time() and console.timeEnd() - Clue Mediator

9. group() and groupEnd()

Using the `group()`, your console logs are grouped together, while each grouping creates another level in the hierarchy.

console.group('Info');
  console.log('Clue Mediator');
  console.log('The way to write your code');
console.groupEnd('Info');
console.log('continue...');

console.group() and console.groupEnd() - Clue Mediator

10. Custom console logs

Use the style for custom console logs. We have to use the `%c` in the logs to add the style.

const size = '10px';
const style = `padding: 5px 7px; background-color: #f1efea; color: #454e5c; font-style: ${size}; font-weight: 600;`;
console.log('%cClue Mediator', style);

Custom console logs - Clue Mediator

I hope you find this article helpful.
Thank you for reading. Happy Coding..!! 🙂