Console Log Deep Dive

If you have developed an application for the web, you have almost certainly used console.log(), but did you know there are quite a few more options available for printing data to the console? Despite working in Web Development for several years, I did not know if this until fairly recently, so I thought this would be an excellent opportunity to take a deep dive into the subject.

Message Types

Starting off simple with a simple one. You can print different types of messages to the console using the following code. You can filter these messages in the browser console by type.

• console.info() Informational messages displayed in blue.
• console.warn() Warning messages displayed in yellow.
• console.error() Error message displayed in red.

Timmer

This is one of my personal favorites. It is fantastic for monitoring performance. Simply wrap the code you wish to time with console.time() and console.timeEnd(). You can also add stamps at any point in between using console.timeLog().

console.time('Timer name'); // Start the timer
for (let i = 0; i < 100000; i++) {
  // some code
}
console.timeEnd('Timer name'); // End the timer

Output:

Timer name: 0.35986328125 ms

Style Logs

Are you feeling decorative? You can add styles to your console logs. It is very similar to CSS. Add %c at the start of your string, followed by some styles. See example:

console.log('%cHello World', 'color: blue; font-size: 20px');

Pretty snazzy, right?

Tables

This is another cool one. You can format objects into tables. It keeps things neat and scannable.

console.table({
    'index': 'value', 
    'a': 1,
});

Grouping

Another organizational tool is grouping. Add console.group('Optional name) to start a group and console.groupEnd() to end it. You can also nest groups with console.groupCollapsed(). See example:

console.group('Post');
console.log(title);
console.group('Author');
    console.groupCollapsed('Post Meta');
        console.log(category);
        console.log(tags);
    console.groupEnd();
console.groupEnd();

Assert

Assert can be used as a conditional error message. If the first argument is false, the second argument will be printed to the console.

console.assert(1 * 1 == 2, "1 * 1 does not equal 2...");

Output:

Assertion failed: 1 * 1 does not equal 2...

Sorry, I couldn't resist lol.

Clear

This one is self-explanatory. You can clear everything in the console before you print your messages. Use console.clear() to do so.

Count

It is common to console log the i variable in a loop to see how many times it runs. You can use console.count() to do this automatically. It will print the number of times it has been called with the same label.

for (let i = 0; i < 5; i++) {
    console.count('Loop');
}

Output:

Loop: 1
Loop: 2
Loop: 3
Loop: 4
Loop: 5

Trace

This one is great for debugging. You can trace the origin of a function call. It will print the stack trace to the console.

function frunctionTree() {
console.trace();
}

function functioTwo() {
frunctionTree();
}

function functionOne() {
functioTwo();
}

functionOne()

Output:

console.trace
    frunctionTree    @    VM523:4
    functioTwo    @    VM523:8
    functionOne    @    VM523:12
    (anonymous)    @    VM523:15
    submitTryit    @    tryit.asp?filename=t…f_console_trace:851
    onclick    @    tryit.asp?filename=t…f_console_trace:747

I hope this article inspires you to try out some of these console methods in your next project. I mainly covered console techniques you can use in the browser, but there are also some for Node.js that I did not cover. Node.js is outside my wheelhouse, but I encourage you to check them out.

Thanks for reading!