Blog - HubSpot Product Team

Styling console.log

Written by Zack Bloom | Apr 2, 2013

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:

You could give your log messages a pleasant shadow:

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

Each %c resets the styles:

Add some formailty to your messages:

Text is boring, use images:

Include charts in your console logging:

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