Styling console.log() output in inspection tool using CSS

You can style console.log() output in the console tab of the Inspection tool window. You need to append %c before the message string as the first parameter and CSS property and values combination as the second parameter.

For example, if you want to show an error styled message. You can use the below code in the console window.

 console.log("%c ERROR MESSAGE", 'color: red; font-size: 30px; font-weight: bold');

A warning message can be shown in the console using the below code

console.log("%c WARNING MESSAGE", 'color: #ffd072; font-size: 30px; font-weight: bold');

For the success message, you can use javascript code

console.log("%c SUCCESS MESSAGE", 'color: green; font-size: 30px; font-weight: bold');

Console.table()

You can output your result into table format using the console.table(). As if there is an array and you want it to show as table output you can use the below code

var arr = ["hello", "world"]
console.table(arr);

Console.error()

To show an error message in the console window you can use console.error(). For example,

console.error("Error occured in the process");

Console.warn()

To show a warning message in the console window you can use console.warn(). For example, if you want to show a warning message on button click in javascript you can use the below code for that.

var button = document.getElementById("warning_button");
button.addEventListener("click", function() {
   console.warn(This is a warning message);
});