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)
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.
js
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.
js
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 (5)
Amazing article! does this work if i run the js file with node?
Nope
I've authored "console colors", a tiny package which allows easy fun coloring:
github.com/yairEO/console-colors
interesting!! the writeup and the subject. thanks champ.
I've published a tiny package about this topic, also.
npmjs.com/package/havecoolconsole