DEV Community

loading...
Cover image for You can do more than just console.log()

You can do more than just console.log()

Daryl Lukas
A full-stack developer who love learning and sharing knowledge. An open source enthusiast.
Originally published at daryllukas.me ・2 min read

The JavaScript console object has a number of methods that can be very useful for debugging. Below are a few examples:

Groups using console.group()

This method allows to you create new inline (and collapsible) groups in the console output. You can close/exit the inline group by calling console.groupEnd().

Here is a simple example.

console.group("Basic Info");
console.log("Name: Daryl Lukas");
console.log("Location: Lusaka, Zambia");
console.groupEnd();
console.group("Additional Info");
console.log("Twitter: @daryllukas");
console.log("Website: https://daryllukas.me");
console.groupEnd();
console.log("Outside of the groups...");
Enter fullscreen mode Exit fullscreen mode

Console Group

Note: Groups created using console.group() are expanded, by default. If you wish to create a new inline group that is collapsed, use console.groupCollapsed() instead.

Tables using console.table()

This method allows you to display tabular data as a table. It takes one mandatory argument data, which must be a collection of primitive data types (an array or an object).

console.table(['apples', 'bananas', 'cherries', 'dates']);
Enter fullscreen mode Exit fullscreen mode

Console Table: Array

console.table({
  firstName: 'Daryl',
  lastName: 'Lukas',
  occupation: 'Developer'
});
Enter fullscreen mode Exit fullscreen mode

Console Table: Object

This method is very useful when displaying arrays of objects, as it makes the output very readable. For example:

let students = [
{
name: 'Jonathan',
age: 26
},
{
name: 'Peter',
age: 24
},
{
name: 'Daniel',
age: 22
},
];

console.table(students);
Enter fullscreen mode Exit fullscreen mode

Console Table: Array of objects

Working with times

The console object also has timer methods that allow you to calculate the duration of a specific operation. To start a timer, call the console.time() method, giving it a unique name/label as the only parameter e.g., console.time("operationOne"). To check the current value of the timer, call the console.timeLog() method, giving the label of the timer which was started, e.g., console.timeLog("operationOne"). This will output the time, in milliseconds, that has elapsed since the timer started. And finally, you can stop the timer by calling console.timeEnd(), again using the same label, e.g., console.timeEnd("operationOne"). This will also output the elapsed time, in milliseconds.

See an example below.

console.time("operationOne");
alert("Click to continue");
console.timeLog("operationOne");
alert("Click again to continue");
console.timeEnd("operationOne");
Enter fullscreen mode Exit fullscreen mode

Console timer

Note: You can have up to 10,000 timers running on a given page.

Learn more

You learn more console methods here, from styling console output to string substitutions.

Discussion (13)

Collapse
stephanie profile image
Stephanie Handsteiner

console.trace() is also nice for debugging, clue is in the name, it outputs the stack trace to console. :)

Collapse
javacode7 profile image
JavaCode7

Thankyou. I never really thought about using more than console.log()!

Collapse
mahendranv profile image
Mahendran

That's a pretty nifty set of logging methods. Thanks.

Collapse
pavelee profile image
Paweł

wow, you made my day! <3

Collapse
vivekalhat profile image
Vivek Alhat

Excellent article. Thanks for sharing!

Collapse
spurwing profile image
Spurwing

Awesome, thanks for sharing!

Collapse
gauravkkush profile image
Gaurav Kushwaha

This is insightful, Thanks.

Collapse
dieunelson profile image
Dieunelson Dorcelus

Thanks for this tips 🙂

Collapse
conorluddy profile image
Conor

Nice. I never think to use console.table. very useful

Collapse
92xeeshan profile image
Zeeshan

Excellent 👌

Collapse
preetiwadhwani_ profile image
Preeti Wadhwani

Loved it, thanks for sharing!

Collapse
starpebble profile image
starpebble

Neat article. My little feedback: I'm not married to JS. Though it's nice features like this which encourage me to stick with it.

Collapse
cahuichealberto profile image
Alberto Cahuiche

Gracias, excelente info