Console Logging Options

Placeholders

•  %s Takes string

console.log('Hello %s and %s, how are you doing?', 'Foo', 'Baz');

result

Hello Foo and Baz, how are you doing?

•  %o Takes an object (That is not zero)
•  %d It is for a decimal or integer

console.log('+%d for %s and %o to have methods which helps in debugging.', 10, 'JavaScript', window.console);

result

•  %c is for CSS values.

console.log('Hello red %cButton', 'background-color: red; color: white;');

console.dir()

While this works similar to log() but a bit different. When using dir(), the output is more objecty way of looking at the output. It is more effective when we use it on html elements.

console.table()

As the method name suggests, it is output the data in tabular format. The output becomes much neater and readable in comparison of simple logging for array.

Instead of console.log a json object we can console.table it to see data in a clear way.

console.group()

we can use this to group the console items. This means, we can nest the console items and make it look like one group. Let's have a look at it by implementation.

var counter = 0;
console.group('Outside code block');
console.log('counter is ', counter);
console.group('Loops...')
for(var i = 0; i < 10; i++){
    console.log('Looping for ', i);
    counter++;
}
console.groupEnd();
console.log('Total count: ', counter);
console.groupEnd();
console.log('All console completes here');

result

console.time()

console.time("MyTimer");
console.timeLog("MyTimer", "Starting application up…");
// Perhaps some code runs to bootstrap a complex app
// ...
console.timeLog("MyTimer", "UI is setup, making API calls now");
// Perhaps some fetch()'s here filling the app with data
// ...
console.timeEnd("MyTimer");

---

See also : https://console.spec.whatwg.org/