4 methods to know about the console API in JavaScript

In this list, I won't insult you by presenting methods like console.log(), console.warn() or console.error().

Instead, I'll present methods that can save you time during your debugging phases, either by offering a formatting that's easier to read, or by giving you access to specific information.

Let's go discover 4 methods of the Console API in Javascript!

console.time

This method allows you to measure the execution time (in ms) of a block of code that you'll have defined and to display it directly in the console.

This method allows you to avoid creating a timer in Javascript simply for debugging and optimization purposes.

console.time("test-alert");
alert("Waiting..."); //Alerting stops the execution but timer keeps running
console.timeEnd("test-alert");

/*
Result :
test-alert : 3145ms - timer ended
*/

Link to MDN documentation: https://developer.mozilla.org/en-US/docs/Web/API/Console/trace

console.table

When you want to display the content of a small one-dimensional array in the console, a simple log can be enough, but when you have dozens of columns, it becomes useful to be able to see the index relative to each column.

Even better, if you're working with two-dimensional arrays, the possibility of displaying the result in the form of an actual table becomes almost magical!

let 2dArray = [[1,2,3],[4,5,6]];
console.table(2dArray);

/*
Result :
┌─────────┬───┬───┬───┐
│ (index) │ 0 │ 1 │ 2 │
├─────────┼───┼───┼───┤
│    0    │ 1 │ 2 │ 3 │
│    1    │ 4 │ 5 │ 6 │
└─────────┴───┴───┴───┘
*/

Link to MDN documentation: https://developer.mozilla.org/en-US/docs/Web/API/Console/trace

console.trace

The "stack trace" corresponds to the list of all the functions previously called in order to reach a given line of code.

The trace is displayed automatically when you use the error() method on an object of type Error, but here you can choose to display it even without having to generate an error!

/* Previous Code */
console.trace();
/* Next code */

/*
Result :
Trace
    at repl:1:9
    at Script.runInThisContext (vm.js:116:20)
    at REPLServer.defaultEval (repl.js:404:29)
    at bound (domain.js:420:14)
    at REPLServer.runBound [as eval] (domain.js:433:12)
    at REPLServer.onLine (repl.js:715:10)
    at REPLServer.emit (events.js:215:7)
    at REPLServer.EventEmitter.emit (domain.js:476:20)
    at REPLServer.Interface._onLine (readline.js:316:10)
    at REPLServer.Interface._line (readline.js:693:8)
*/

Link to MDN documentation: https://developer.mozilla.org/en-US/docs/Web/API/Console/trace

console.group

This method allows you to group several logs in order to spot them more easily, but also to collapse them all in one click.

The display depends on the environment; in NodeJS, groups will simply be represented by indentations, while they'll be interactive in certain browsers.

console.group();
console.log("group-1");
console.group();
console.log("sub-group-1");
console.group();
console.log("sub-sub-group-1");
console.log("sub-sub-group-2");
console.groupEnd();
console.groupEnd();
console.groupEnd();

/*

Result :
| group-1 ▼
|    sub-group-1 ▼
|      sub-sub-group-1
|      sub-sub-group-2

*/

Link to MDN documentation: https://developer.mozilla.org/en-US/docs/Web/API/Console/group