Basile Bong

Posted on Dec 30, 2020 • Updated on Apr 13, 2021 • Originally published at basilebong.com

Let's be fancy with a console signature

#webdev #javascript #tutorial #beginners

Create a stylized console message and say hello to your fellow developers.

Let's get started

First you should know that a console message, which is the first argument of a console.log, can be formatted using other arguments.

console.log("I'm the message");

There are different ways to format a console message but the only one that is useful in this specific case is the %c formatter.

console.log("%cI'm the message");

%c applies to the console message CSS rules that are defined by the second argument.

console.log("%cI'm the message", "background: red;");

And that's already all you need to know to create your own console signature.

Example

var consoleSignatureStyle = "font-size: 16px;" +
  "background: linear-gradient(to right, #e66465, #9198e5);" +
  "color: white;" +
  "text-align: center;" +
  "padding: 10px 15px;" +
  "width: 100%;" +
  "border-radius: 20px;";

var consoleSignatureText = "%cDon't steal my cookies! 🍪";

console.log(consoleSignatureText, consoleSignatureStyle);

Note: It is also possible to print images into the console by using the background-image CSS property.

If you like my posts follow me on dev.to and twitter!

Oldest comments (16)

James Linden • Dec 30 '20

This is a cool gimmick, but the console is meant for debugging and utility. Keep the fancy in the web page please.

Michael Parkadze • Dec 30 '20

I do not see why the fancy can’t help with debugging and utility and still be fancy and fun.

József Sallai • Dec 30 '20

I'd probably use something like this for Easter eggs

Aileen Rae • Dec 30 '20

I have to disagree. I've seen a lot of useful examples of fancy console logs:

"We're hiring" messages on many commercial websites to advertise to developers.
Facebook's ASCII "Stop!" message, warning users if someone has told them to copy-paste something in the console they could be hacked.
On developer portfolios. Their audience is most likely other developers who may inspect a page to see how they've built something. It's a nice Easter egg, and something that may make them more memorable to a recruiter.

Ben Halpern • Dec 30 '20

Yup. Anything that can be programmed will be programmed. The console is something web devs are allowed to code against, so you sort of have to accept that they'll want to do so with the full extent of their creativity, regardless of the main intent of the feature.