#Ways to Format Console Output in JavaScript – CloudSavvy IT

JavaScript developers are familiar with the humble console.log() function. Although console logging may appear straightforward, there’s much more available within the console object. Let’s look at how you can enhance your log messages with advanced formatting.

The Basics

Let’s recap the most-used console functions:

• console.log(data, ...args) – Logs data to the console. Any other arguments passed will also be emitted on the same line.
• console.info(data, ...args) – Equivalent to console.log() but normally with emphasised formatting – Chrome, for example, adds a blue background and an information “i” icon.
• console.error(data ...args) – The same as console.log(), except the output is directed to the stderr (error) stream. Most browsers automatically format the output with a red background to convey that an error occurred.
• console.warn(data, ...args) – The same as console.error(), except a yellow background is normally applied to indicate the less severe warning status.

Format Specifiers

Developers usually only pass a single argument to the above commands. Nonetheless, they all accept multiple arguments, which are automatically concatenated in the final output.

You can also use arguments with printf-compatible format specifiers defined by a string in data:

const value = 10;
const available = "available";
console.log("There are %d options", value, available);
// Logs "There are 10 options available"

The available format specifiers are as follows:

• %s – Format as a string.
• %i – Format as an integer.
• %f – Format as a floating point value.
• %O – Format as a JavaScript object.
• %o – Format as a DOM element.
• %c – Format as a CSS rule, which is applied to the emitted log line.

Support for the last two varies by JavaScript engine. They’re available in modern browsers but not necessarily in other execution contexts.

Adding Images

Using the CSS format specifier, it’s possible to include images in console output! This works in browsers but won’t be supported in CLI environments such as Node.js.

const css = [
    "background-image: url(https://example.com)",
    "background-size: cover",
    "height: 100px",
    "padding: 15px",
    "width: 100px"
];
console.log("%cI'm An Image!", css.join(";"));

We hijack CSS’ background-image rule to render the image. While it may seem lighthearted, this could have practical use cases if your debugging involves working with images. You can check the images being retrieved without actually emitting them to the page.

Tabulated Output

JavaScript includes built-in support for emitting tabulated data to the console. Use console.table() with an array of uniform objects. The column headers will be determined automatically, based on the properties common to each object.

const objects = [{a: 1, x: "a"}, {a: 2, x: "b"}];
console.table(objects);

This can be extremely useful when you’re working with objects in bulk. Instead of having to iterate an array and call console.log() with each item, just use console.table() and benefit from the automatically formatted output.

Conditional Output

You can use the console.assert() function to condition output on the value of an expression. This reduces the code you need to write compared with prefacing a console.log() with an if statement.

Your message will only be logged if the expression evaluates to false. An expression evaluting to true will result in nothing being emitted.

console.assert(true, "I never appear");
 
console.assert(false, "I will be logged");

The console.assert() function does not affect runtime. No error will be thrown if the assertion fails; your expression is used solely to determine whether to log to the console.

Message Groups

You can visually group sections of output together with console.group(). This will apply an automatic indent to subsequent lines using a predefined number of spaces.

To close the group, call console.groupEnd(). This restores the previous indentation.

You may call console.group() multiple times before console.groupEnd() to create deeply nested output. console.groupEnd() reverts the indentation by one step at a time, so you’ll need to match the number of group() and groupEnd() calls before you get back to the default level.

Counters

Use console.count(label) to create an internal counter with a given name:

console.count("my-counter");
// my-counter: 1
console.count("my-counter");
// my-counter: 2

This gives you a straightforward way to emit incrementing values. You don’t have to specify a name – the default counter will be used automatically. You can reset counters to 0 using console.countReset(label).

Timers

The console has built-in support for operation timing. Elapsed time is measured in milliseconds and emitted in seconds (e.g. “1.234s”); it’s not guaranteed to be high-accuracy.

console.time();
// ...some time later...
console.timeEnd();
// Emits the elapsed time ("1.234s")

Timers support optional labels in the same way as counters. This lets you manage multiple timers simultaneously when timing different aspects of your code.

Utility Methods

The console object includes several utility methods which help you manage your output.

• console.clear() – Clears the console of all visible output. The effects will vary by execution environment.
• console.dir(obj, options) – Emits a list of all the enumerable property/value pairs of the object obj. You can customise the recursion depth using the depth property of the options object.
• console.trace() – Emits a stack trace to the current point in your code, enabling straightforward debugging of the execution path taken.

There are other non-standardised methods which are engine-dependent. An example is console.profile(), which is widely available but with differing implementations. In browsers, it generally invokes high-accuracy profiling to help you diagnose performance issues.

Conclusion

There’s much more to JavaScript’s console than the basic console.log()! Taking the time to learn the available functions can drastically accelerate debugging, particularly when working with complex objects or fast-moving output.

The available features do depend on the JavaScript engine you’re working with. Generally, you’ll get the most advanced styling from an up-to-date browser, although Node.js also supports most of the techniques we’ve described here.