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

• 7 JavaScript One-Liners that you should know
• Add days to a date in JavaScript
• How to copy text to the clipboard using JavaScript
• Convert a 12 hour format to 24 hour format using JavaScript
• string-and-add-ellipsis-in-javascript" title="Truncate string and add ellipsis in JavaScript">Truncate string and add ellipsis in JavaScript
• Find URLs in string and make a link using JavaScript

console methods

1. log()
2. info()
3. warn()
4. error()" title="error()">error()
5. clear()
6. table()" title="table()">table()
7. count()
8. time() and timeEnd()
9. group() and groupEnd()
10. 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..!! 🙂