DEV Community

Cover image for Something you may not know about console log in JavaScript
Brett Anda 🔥🧠 for Developer Bacon 🥓🥓

Posted on • Originally published at developerbacon.ca on

Something you may not know about console log in JavaScript

The normal stuff

The basics for the console.log() in JavaScript is just this:

console.log("Hello World!");
Enter fullscreen mode Exit fullscreen mode

Adding styles

But did you know that you can stylize the text you are logging? To add styles to the text you just need to add %c to the beginning of the text that you want to style. For an example of this in action, this is the welcome message for Developer Bacon.

console.log(
    "%cWelcome to the console of developer bacon",
    "color:pink;text-transform:uppercase;font-weight:bold;"
);
Enter fullscreen mode Exit fullscreen mode

Adding more styles

To add more styles to other text in the same console log you need to add the %c just before the second group of text. You can add as many of these indicators as you want you just need to add a new style group for each text group. Here is an example of multiple styling groups in action.

console.log(
    "%cThis text will be bold. %cThis text will be red. %c This text will be small",
    "font-weight:bold;",
    "color:red;",
    "font-size:8pt"
);
Enter fullscreen mode Exit fullscreen mode

Originally posted on developerbacon.ca

Top comments (9)

Collapse
 
helderberto profile image
Helder Burato Berto

Nice! I created a project some time ago I have used in my last projects.

Maybe could interest to you: github.com/codevor/logger.js

Collapse
 
cmario92 profile image
cmario

looks great, def trying it!

Collapse
 
helderberto profile image
Helder Burato Berto

Thanks! It's opened to contributions ✌🏻

Collapse
 
brettanda profile image
Brett Anda 🔥🧠

Thanks, I like you project I might use it in the future

Collapse
 
rajtslegr profile image
Petr Rajtslegr

Cool!

Collapse
 
elehas profile image
Lee Sonnenburg

Whoa I had no idea you could do this! Great post!

Collapse
 
leob profile image
leob

Wow that's nifty!

Collapse
 
zappellin profile image
Leon Guillaume

Fireship made a pretty good video on console.log, here's the link :

youtube.com/watch?v=L8CDt1J3DAw

Collapse
 
chonz0 profile image
chonz0

Man i am getting really tired of all this clickbait titles 😣

"How to add styles to console.log" would be more precise and useful