DEV Community

loading...
Cover image for Something you may not know about console log in JavaScript
Developer Bacon 🥓🥓

Something you may not know about console log in JavaScript

brettanda profile image Brett Anda 🔥🧠 Originally published at developerbacon.ca on ・1 min read

The normal stuff

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

console.log("Hello World!");

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;"
);

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"
);

Originally posted on developerbacon.ca

Discussion (9)

Collapse
helderburato 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
mario c

looks great, def trying it!

Collapse
helderburato profile image
Helder Burato Berto

Thanks! It's opened to contributions ✌🏻

Collapse
brettanda profile image
Brett Anda 🔥🧠 Author

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

Collapse
rajcep profile image
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

Forem Open with the Forem app