DEV Community

ann lin
ann lin

Posted on

Console.log with CSS Style

I remember when I was young and naive, I accidentally right clicked on Facebook browser and saw this HUGE ASS WARNING. I thought it was cute. Guess who has the same warning. (Something that ends with plus)

Facebook's warning log

Spoiler alert, it's still there.

Most modern browsers support styling for console.log(), except for Safari. (Whut) Add %c before the text in the first parameter and CSS style in the next parameter.

      console.log(
        "%cStop!",
        "color:red;font-family:system-ui;font-size:4rem;-webkit-text-stroke: 1px black;font-weight:bold"
      );

Tip: Right click on this page and click on inspect. Paste the above code in the console now.
Another tip: This tutorial is meant to impress noob. If you already know this, move on with your life.

You can have multiple CSS styles in a console.log() by using the format below.

console.log('%cb %cb ', 'color:blue;border:1px solid black', 'color:black;border:1px solid black');

You may be able to use CSS style with other methods in Console. While I still enjoy misusing the good old console.log in my code, the right approach would be to use a debug module like https://www.npmjs.com/package/debug that allows you to show and hide the log easily.

Demo,


Right click in this page to see the console.log().

Question,

What does the c in %c stand for?
a. CSS
b. Custom
c. Character
d. None of the above

Reference:
https://developer.mozilla.org/en-US/docs/Web/API/console

New day new cringey video,

Top comments (4)

Collapse
 
programmerpiyush008 profile image
Piyush Panchal

Amazing article! does this work if i run the js file with node?

Collapse
 
nightdvlpr_50 profile image
Amir

Nope

Collapse
 
yaireo profile image
Yair Even Or

I've authored "console colors", a tiny package which allows easy fun coloring:

github.com/yairEO/console-colors

Collapse
 
nightdvlpr_50 profile image
Amir

I've published a tiny package about this topic, also.
npmjs.com/package/havecoolconsole