DEV Community

loading...
Cover image for Sick Console Bro! How To Style Your console.log with CSS

Sick Console Bro! How To Style Your console.log with CSS

Jack Harner πŸš€
I'm Jack! I'm a Freelance Developer. I have experience with WordPress, Shopify, BigCommerce, React, Linux Admin, & More! Ask Me Anything!!
Originally published at harnerdesigns.com ・2 min read

Originally Posted On Harner Designs | Photo by Glenn Carstens-Peters on Unsplash

In Chrome and Firefox (>31) you can add CSS styles to your console.log() messages. It's fairly simple and straightforward.

All you need to do is include a %c string before your log message and then pass your CSS as a parameter to the console.log( ) function. Like so:

console.log("%c{{Log Message}}", "{{CSS}}");
Enter fullscreen mode Exit fullscreen mode

For example, this code runs on my portfolio:

console.log("%cHarner Designs", "color:#233E82; font-family:'Ubuntu'; display: block;font-weight:bold; font-size:48px; background:#fff;");
    console.log("%cLike to dig into the meaty bits of the website?\nThanks for looking! Hit us up on Twitter @harnerdesigns!", "color:#222; font-family:'Ubuntu'; font-weight:100; font-size:24px; background:#fff;");
    console.log("%cDid you know you can style your console output?!", "color:#333; font-family:'Ubuntu'; font-weight:100; font-size:18px; background:#fff;");
    console.log("%cCheck our blog to learn how: https://harnerdesigns.com/blog/style-your-console-log-with-css/", "line-height: 3em; padding: 0.5em; text-align: center; border: 1px dotted #aaa; background:#fff; font-size: 14px;");
Enter fullscreen mode Exit fullscreen mode

and outputs like this to the console:

Styling Multiple Strings In One Log

It's also possible to include multiple strings in one command and style them differently. Check it out:

console.log("%cString1" + "%cString2", "{{CSS for String1}}", "{{CSS for String2}}");
Enter fullscreen mode Exit fullscreen mode

Reusing Styles Across Log Messages

You can also store the CSS You want to apply to a variable and then pass that to multiple console.logs:

var consoleStyle = "{{Reusable CSS}}";
console.log("%cString1", consoleStyle);
console.log("%cString2", consoleStyle);
Enter fullscreen mode Exit fullscreen mode

Conclusion

Do you leave any little easter eggs in your console? Could you see a use case for this in your own projects? I'd love to know down in the comments! Show me some examples of cool things you've found in console messages.

Recent Blog Posts

Discussion (8)

Collapse
azza85 profile image
aaron

Nice one I've seen this on a couple of sites but had never looked into how to do it

Collapse
jackharner profile image
Jack Harner πŸš€ Author

I don't think I've ever stumbled across a styled console like this in the wild yet. At least not that I can remember.

I see ASCII Art all the time though. I.e. from Facebook:

Dev.to does it as well!

Collapse
daviddalbusco profile image
David Dal Busco

Not sure anyone still use IE <= v9 but if so, it would need the workaround described by Andy E on stackoverflow.com/questions/547293... in order to print to the console

Collapse
daviddalbusco profile image
David Dal Busco • Edited

Oh and of course a screenshot of our upcoming open source editor for presentations πŸ˜‰

Collapse
ijason profile image
Jason

This is awesome! Thanks for sharing

Collapse
jackharner profile image
Jack Harner πŸš€ Author

No problem!

Collapse
ben profile image
Ben Halpern
Collapse
jackharner profile image
Jack Harner πŸš€ Author

Love it!