colorful console.log in JavaScript

For javascript web developer console.log is the most important and use full tool to debug web application code.

Without a browser's developing console, it's too hard to resolve issues and debugging the code by the developer.

Generally, we used the build in browsers console logs like as console.log, console.error, console.warn, console.info to separate for coloring the console log.

sometimes, various console logging methods like log, info, error and warn are not enough, especially when you are debugging a big application with many of logs going on in the browser console.

Now for custom colorful console.log, you can apply your own styling and color to the log message by using CSS style properties.

=>You can use the console to perform some of the following tasks:
Output an ajax response to check ajax response data.
Output a timer to help with simple benchmarking.
Output an array or object in an easy-to-read format.

In modern browsers, you can add CSS in console.log messages to apply color and other styling options to the output with CSS.

=>Syntax of colorful console

->For single color
console.log("%c message","CSS style");

->For multiple color
console.log("%c message %c message %c message .....","CSS style","CSS style","CSS style",......);

Here, "%c" is one of the Formatting specifiers to applies the provided CSS.

=>Some Formatting specifiers is listed as bellow it is just for information

->%s - for replacing an element with a string
->%(d|i) - for replace an element with an integer
->%f -for replacing an element with a float
->%(o|O) -for the element is displayed as an object.
->%c -for Applies the provided CSS

For the print message in a single color, you can use "%c" before the text and as a second parameter pass stylesheet CSS.

For the print message in multiple colors you can use "%c" multiple places before the text and as a second, then third then fourth and so on as parameters to pass stylesheet CSS.

=>Ex : (For single color)

console.log('%cHello World','color:blue');
console.log('%cHello World','color:blue;background-color:pink');
Output:

=>Ex : (For multiple colors)

console.log('%cHello %cWorld','color:blue','color:green');
console.log('%cHello %cWorld','color:blue;background-color:pink','color:green;background-color:yellow');
Output:

Here you can use many other use full CSS properties for display message in stylish and in 3D text also.

=>Other Ex:

console.log('%cHellow %s',"color:blue", 'World');
console.log(`%cToday date is %c${new Date()}`,"color:green", "color:purple");
Output:

=> Ex : (Using more complex css3)

var styles = [
'background: linear-gradient(blue, green)'
, 'border: 1px solid #blue'
, 'color: white'
, 'display: block'
, 'text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3)'
, 'box-shadow: 0 1px 0 rgba(155, 200, 160, 0.4) inset, 0 5px 3px -5px rgba(0, 0, 0, 0.5), 0 -13px 5px -10px rgba(255, 255, 255, 0.4) inset'
, 'line-height: 40px'
, 'text-align: center'
, 'font-weight: bold'
].join(';');
console.log('%c laxman chavda blog Colorful JavaScript console.log demo', styles);
Output:

=> Ex : (Using animated full demo)

=> Ex : (Using multiple colors with animated full demo)

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
</head>
<body>
<script type="text/javascript">
myArray = ['red','green','blue'];
var i = setInterval(function() {
var rand1 = myArray[Math.floor(Math.random() * myArray.length)];
var rand2 = myArray[Math.floor(Math.random() * myArray.length)];
var rand3 = myArray[Math.floor(Math.random() * myArray.length)];
var rand4 = myArray[Math.floor(Math.random() * myArray.length)];
var rand5 = myArray[Math.floor(Math.random() * myArray.length)];
var rand6 = myArray[Math.floor(Math.random() * myArray.length)];
var rand7 = myArray[Math.floor(Math.random() * myArray.length)];
var rand8 = myArray[Math.floor(Math.random() * myArray.length)];
var rand9 = myArray[Math.floor(Math.random() * myArray.length)];
var rand10 = myArray[Math.floor(Math.random() * myArray.length)];
var rand11 = myArray[Math.floor(Math.random() * myArray.length)];
var rand12 = myArray[Math.floor(Math.random() * myArray.length)];
var rand13 = myArray[Math.floor(Math.random() * myArray.length)];
var rand14 = myArray[Math.floor(Math.random() * myArray.length)];
var rand15 = myArray[Math.floor(Math.random() * myArray.length)];
var rand16 = myArray[Math.floor(Math.random() * myArray.length)];

console.clear();
console.log("%c▁%c ▂%c ▄%c ▅%c ▆%c ▇%c █ %cHappy %cBirthday%c █%c ▇%c ▆%c ▅%c ▄%c ▂%c ▁","color : "+rand1,"color : "+rand2,"color : "+rand3,"color : "+rand4,"color : "+rand5,"color : "+rand6,"color : "+rand7,"color : "+rand8,"color : "+rand9,"color : "+rand10,"color : "+rand11,"color : "+rand12,"color : "+rand13,"color : "+rand14,"color : "+rand15,"color : "+rand16);
}, 100);
</script>
</body>
</html>

I hope, this post likes you and easy to understand. Thanks