DEV Community

loading...
Cover image for Let's be fancy with a console signature

Let's be fancy with a console signature

basilebong profile image Basile Bong Updated on ・1 min read

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

Console log signature

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");
Enter fullscreen mode Exit fullscreen mode

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");
Enter fullscreen mode Exit fullscreen mode

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

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

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);
Enter fullscreen mode Exit fullscreen mode

Console signature example

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!

Discussion (16)

pic
Editor guide
Collapse
kodekrash profile image
James Linden

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

Collapse
aileenr profile image
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.
Collapse
ben profile image
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.

Thread Thread
kodekrash profile image
James Linden

LOL. True.

Collapse
kodekrash profile image
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)

Collapse
parkadzedev profile image
Michael Parkadze

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

Collapse
jozsefsallai profile image
József Sallai

I'd probably use something like this for Easter eggs

Collapse
dynamic75 profile image
Damian McCleod

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

Collapse
luispinheiro profile image
Luis Pinheiro

How did you set this cookie icon?

Collapse
basilebong profile image
Basile Bong Author

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

Collapse
luispinheiro profile image
Collapse
reza profile image
Reza Majidi

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

Collapse
kevinleebuchan profile image
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.

Collapse
httvhutceoscop profile image
Viet NT

It's funny, thank you

Collapse
jabawack81 profile image
Paolo Fabbri

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

Collapse
luispinheiro profile image
Luis Pinheiro

Haha

That's funny

Going to implement that om my portfolio