How to add a little bit of style to your console logs

#27

JS

August 01, 2019

alt text

Did you know you can apply some basic styling to your console logs ? You can change text color, background color, font size and some other basic properties. There is more than one method to achieve this, but in this tip we'll cover how to this using good ol' CSS.

You basically just need two pass two arguments to the console log function - the first will be string we want to log (put '%c' in the beginning of the string) and the second will be the CSS we want to apply. - Alternatively, you can also style different parts of the same string by doing as the third console log in the example.

console.log('-') console.log("%cThis is a collorful console log", "color: #45FCE4") console.log("%cThis is a console log with some background", "background-color: #8125E2; color:#FFF") console.log("%cThis log will different %c Than this one", "color:#8125E2", "color:#45FCE4;font-size:24px")

Hope this helps you step up your console log game 😎🔥 Have a nice one guys 😁