DEV Community

loading...

Console.log with CSS Style

annlin profile image ann lin ・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

pic
Editor guide
Collapse
yaireo profile image
vsync

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

github.com/yairEO/console-colors