Tag: devtools

Styled text in the JavaScript console

joemallerLeave a comment

Console.log() in Chrome, Safari and Edge all support styled output. Syntax is simple:

console.log("look, %cBig Red Letters", "font-size: 42px; color: red;")

big-red-numbers

The %c token is a placeholder for a CSS ruleset. Think of it as wrapping whatever comes after it in a span with the rule in a style attribute. So, the above command would function like this:

 

look, <span style="font-size: 42px; color: red;">Big Red Letters</span>

Additional style blocks can be added with more %c tokens, so long as there’s a corresponding ruleset. If no ruleset is provided “%c” will appear as text in whatever style preceded it.

console.log(
    "%cRed %cGreen %cBlue?", 
    "font-size: 42px; color: red;",
    "font-size: 42px; color: green;"
)

red-green-blue

Empty strings can be used to reset styles back to default.

console.log(
    "%cRed %cGreen %cNope?", 
    "font-size: 42px; color: red;",
    "font-size: 42px; color: green;",
    ""
)

red-green-nope