console.log custom styling

December 1st, 2018

Have you ever wondered how Facebook displays this cool custom message in the browser’s console? Well, I did.

Facebook selfXSS alert

It happens that good old console.log can take a second parameter and use some string interpolation.

The basic one is with the %s for strings. For example

const name = 'John'
console.log('hello %s' , name) // prints hello John

But what is really cool, you can use %c for custom CSS in the console.log output. For example

const msg = 'Hello'
const css = 'font-size: 50px;color: #EDFFD9;text-shadow: 2px 2px black;;background: linear-gradient(to right, #DB9D47, #FF784F);padding:20px'
console.log('%c%s' , css, msg)

Example of custom console styling

But I think this might be cleaned up a bit

const msg = 'Hello'
const css = [
  'font-size: 50px',
  'color: #EDFFD9',
  'text-shadow: 2px 2px black',
  'background: linear-gradient(to right, #DB9D47, #FF784F)'
  'padding:20px'
].join(';')
console.log('%c%s' , css, msg)

So that’s how it’s made ;)

resources

Karol Świeca

My thougths on JavaScript, AWS Cloud and other aspects of being Software Engineer