Read my book

I wrote books about Webpack and React. Check them out!

Saturday, February 16, 2013

Getting Most Out of JavaScript Console

Many JavaScript environments come with a console object. It provides a simple logging mechanism by default and then some. These days you can perform even profiling and get traces using it. Furthermore it is possible to style the output if you are hipster enough.

It is usually a good idea to stub console as it might not exist by default. Basically you just check whether the object exists in the global scope and if it doesn't you'll create a dummy one. Clint Harris shows one way to achieve this .You could use the same method to implement a production version of the console object to hide some of the output from the users.

Simple Logging

The most basic way to use console output is simply to invoke console.log. Besides this you might want to use console.warn or console.error depending on the context of the message. The inspector will style the message accordingly.

Sometimes rather than calling one of these directly you might want to apply or call it instead. There is one gotcha, though. You must provide console context to it. So instead of doing something like console.log.apply(undefined, ['foo', 'bar']) you must invoke console.log.apply(console, ['foo', 'bar']) for it to work.

Note that you can bind the context permanently using something like console.log = console.log.bind(console). You could easily produce prefixed versions simply by passing the prefix after the context (ie. console.log.bind(console, 'prefix')).

Grouping

Both Chrome and Firefox (via Firebug) support groups. Logs performed between group and groupEnd commands will show up in a nested way at your inspector. This can be handy for keeping your output nice and tidy. Chrome documentation provides a good example of this.

Profiling

Profiling works in the same manner. You just operate using console.profile and console.profileEnd. Execute something you want to profile between those invocations. Chrome documentation illustrates this as well.

Styling the Output

It can be handy to style the output a little bit to make it more readable. On browser environment you may use a bit of CSS and %c. Specifically it works like this: console.log('%cSo cool', 'color: white; background: black'). It is important to note that %c must be at the beginning. It simply won't work as you might expect otherwise.

As you might guess this doesn't quite work in the Node world. Instead you have to apply ANSI escape codes. For instance the following snippet would print out text in red: console.log('\033[31mso red\033[0m'). There's a color code in the beginning, actual content and a reset at end. Given the syntax isn't that quite nice you can find many packages solving this problem at NPM.

Conclusion

I hope this post gave you some new perspective to that good old JavaScript console. In case you want to know more about the topic I recommend checking out Chrome documentation and their API. If I managed to miss something obvious do let me know in the comments section!