Let's be fancy with a console signature

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!

Comments

[James Linden]

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

[Aileen Rae]

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]

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.

[James Linden]

LOL. True.

[James Linden]

You have some good points. But they should still be an exception. This just reminds me of the days of blinking status bar and title bar text. :o)

[Michael Parkadze]

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

[József Sallai]

I'd probably use something like this for Easter eggs

[Damian McCleod]

I like using console.table([1, 2, 3]) to group related values.

[Reza Majidi]

Great Tips. especially for Hiring New developers just like Medium did 😀

[Luis Pinheiro]

How did you set this cookie icon?

[Basile Bong]

Hi Luis, the cookie is an emoji.
Chrome supports emojis since version 41.
Here is a list of all supported emojis.

[Luis Pinheiro]

Thanks ;)

[KevinLeeBuchan]

This is fun. I'll use it to make important debugging messages pop but also as you described. No harm and plenty of fun.

[Luis Pinheiro]

Haha

That's funny

Going to implement that om my portfolio

[Paolo Fabbri]

this be useful by using different colors for each section of your code, for example, red for the API query code, blue for the animations

[Viet NT]

It's funny, thank you