DEV Community

loading...

Console.log with CSS Style

ann lin
I am a spider, I build web.
・2 min read

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,

Discussion (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