console.log() needn’t be a slog

by Will McBrien (Software Development Profession)

Using console.log() to debug JavaScript on the front-end can be a pain as the default output is not particularly pretty. As lots of output can look stylistically similar, it can be difficult to spot what you’re looking for, which can make debugging harder than it should be.

The good news is that there are some tricks you can employ to make console.log() much easier to use! Here are some of the ones I have found to be most useful:

Add some cool styles:

console.log() can accept a CSS string as a second argument, which can be used to style output. This can help to catch your eye (well if you use some colourful styles):

console.log(‘%c < some artful logging >’, ‘color: white; background-color: #31a59f; text-decoration: underline;’);

Note the need to add %c before the text else it won’t apply the styles.

One especially useful way to use this is as before and end markers for non-css console.log() statements to help make it really obvious as to what you’re printing. For instance, say you’re printing a lot of output from a loop, it’s nice to clearly mark where the log begins and ends using this technique:

which outputs:

If you use this technique, I recommend creating a snippet in your editor of choice so that you don’t need to spend time thinking of how you want to style things — this also makes it easier to mix and match your styled console.log() output with the default. In Visual Studio Code you can create language specific snippets by using cmd + shift + p and searching for snippets then selecting the language you want to add a snippet to. My snippet for this looks like this:

You can then use it by selecting from the dropdown auto-completion as you type (i.e. slog or elog respectively). Other editors have similar functionality you can use to add these type of snippets.

Data tables:

When you `console.log()` an object it can be annoying to read it’s attributes using the standard log output. You get an output like the following:

Though this is obviously a really simple example, it is still not that easy to read. Thankfully, there is a useful method that can help with this issue, console.table(), which outputs a nicely formatted tabular representation of a javascript object:

Which is a really clear thing to view in my opinion.

Groups:

If you’re trying to log things from within a nested data structure or loop construct it can be difficult for your eye to spot the log you’re interested in, for instance:

Which outputs:

Here everything appears at the in the same vertical column, making it hard to differentiate output at a glance, as you can’t see nesting particularly clearly.

Instead why not try employing console.group() and console.groupEnd() as a way to differentiate between different nested levels:

This separates out your output into nested columns, which can be much easier to read:

Obviously this is another artificially simplified example, but this technique can be useful when outputting complicated nested structures that you would otherwise have to add hacky spaces to the left of console.log() string to get a similar output.

Another useful approach, use the debugger:

A more controlled approach is to use the JavaScript built in debugger, this creates a more familiar context if you’re used to pry in Ruby or other ‘stop execution’ debugging techniques. The debugger keyword opens up the browser’s debugging context at the point at which it is declared in your code.

However, although this approach is more powerful than console.log() I find that sometimes it is easier to just console.log() output if you want quick feedback without context switching into debugging mode, hence why I think the above techniques are still useful tools to have in you toolbox, despite dedicated debuggers being available :-)

If you enjoyed this article, please feel free to hit the👏 clap button and leave a response below. You also can follow us on Twitter, read our other blog or check us out on LinkedIn.

If you’d like to come and work with us, please check current vacancies on our job board!