Styling console.log

Console.log is one of the simplest, and most powerful, tools frontend developers have.  Turns out, it's not quite as simple as we thought.  Console messages can be formatted using CSS.  You could, for example, make your error messages larger:

Screen_Shot_2013-04-01_at_8.13.39_PM

You could give your log messages a pleasant shadow:

Screen_Shot_2013-04-01_at_8.16.39_PM

The styles don't have to apply to the whole message:

Screen_Shot_2013-04-01_at_8.18.11_PM

Each %c resets the styles:

Screen_Shot_2013-04-02_at_12.08.37_PM

Add some formailty to your messages:

Screen_Shot_2013-04-02_at_12.19.58_PM

Text is boring, use images:

Screen_Shot_2013-04-02_at_12.43.48_PM

Include charts in your console logging:

Screen_Shot_2013-04-02_at_12.32.17_PM

Even better, anything you can draw on a canvas, you can draw in the console.

Zack Bloom

Written by Zack Bloom

Subscribe for updates

    New Call-to-action