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.
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.
Right click in this page to see the console.log().
What does the
%c stand for?
d. None of the above