in

Adding Color and Styles to Console Logs

Did you know you don’t have to settle for the default style in the browser console? That’s right. You can turn this

into

And it’s not difficult at all. You just need to know basic CSS and you’re good to go.

The trick is to use %c before the string in the first argument of your console.log.

console.log(‘%cBOSS’);

And then add the styles you want in the second argument of the console.log.

console.log(‘%cBOSS’, ‘font-size:40px; color:black; border:2px solid orange; padding: 8px; border-radius:9%’);

Try it out yourself. Just paste the code below in the browser console. In Google Chrome, you can open the console by using Ctrl Shift J if you’re on a PC or Ctrl Option J on a Mac.

console.log(‘%cThis is green.’, ‘color:green’);console.log(‘%cThis is red’., ‘color:red’);console.log(‘%cThis is blue.’, ‘color: blue’);

This is a fun trick, but can also be really useful if you want to distinguish between different error logs or warn your advanced users if they’re doing something you don’t want them to.

If you like this content, check out my YouTube channel Terrible Whiteboard at https://www.youtube.com/channel/UCpLC2ohmappF2iUsWYRnsxg where I post answers to algorithm questions multiple times a week. This will help you in your job search since most coding jobs will give you at least one algorithm question in your interviews.

This post was created with our nice and easy submission form. Create your post!

What do you think?

Written by Terrible Whiteboard

If you like this content, check out my YouTube channel Terrible Whiteboard at https://www.youtube.com/channel/UCpLC2ohmappF2iUsWYRnsxg. I post answers to algorithm questions and web development tips and tricks multiple times a week.

Javascript Sleep

adonis-mysql-error

Adonis JS No MYSQL Module Error Fix