A few lines of code that console logs when the page content is loaded

Something you may not know about console log in JavaScript

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