Console.rules(💪)
How to level up your console appearance
Foreword
If you are using Chrome and you would like to have a dark console like mine go to the dev tools ‘Settings’ and choose dark theme in ‘Preferences’.
Now let’s have fun with the console 🌴.
Interpolated
‘%s’ allows you to replace that space with other stuff.
// interpolatedconsole.log('hello %s!', '💩');
The result is:
Ok you have a nice poo, I know, but what’s the advantage in using this syntax?
‘%s’ is like an invisible placeholder in which you can put a variable or, better, a function.
Let’s have fun with a random emoji greeting!
// interpolated with funconst emoji = ['💩', '👯', '😸', '🏄', '🚀', '🔥', '🎉', '😄', '🦁'];function randomEmoji() {
let random = Math.floor(Math.random() * emoji.length);
return emoji[random];
}console.log('hello %s!', randomEmoji());
The result when you refresh is:
Styled
‘%c’ allows you to inject CSS starting from where you decide to put it.
// styledconsole.log(
'%cHave a nice day!',
'font-size: 20px; background-color: yellow; color:red; margin-left: 20px;'
);
The result is:
The style depends from the ‘%c’ position.
// styledconsole.log(
'Have a %cnice day!',
'font-size: 20px; background-color: yellow; color:red; margin-left: 20px;'
);
The result is:
But..there is a better way to add style!
I like to store the style in an array using join(‘;’) to keep a better readability.
const style = [
'background: #000',
'color: #fff',
'padding: 10px 20px',
'line-height: 35px'
].join(';');console.log('%c Coded with ♥️', style);
The result is:
You can use different backgrounds.
Gradients
const style = [
'background: linear-gradient(to right, #5433ff, #20bdff, #a5fecb);',
'color: #fff',
'padding: 10px 20px',
'line-height: 35px'
].join(';');console.log('%cHi there!', style);
The result is:
Images
const style = [
'background-image: url("https://media.giphy.com/media/3o85xoi6nNqJQJ95Qc/giphy.gif")',
'background-size: cover',
'color: #fff',
'padding: 10px 20px',
'line-height: 35px'
].join(';');console.log('%cHi there!', style);
The result is:
Add more than one styles
You can add more ‘%c’ to add more styles in your console in this way:
const style1 = [
'background: red',
'color: #fff',
].join(';');const style2 = [
'font-size: 40px',
'color: red'
].join(';');console.log('%cHi %cthere!', style1, style2);
The result is:
Add a style without having text
Maybe you want to add some style, an image for example, without a text. You can, only remember to add a space after ‘%c’ for making it work.
const style = [
'background-image: url("https://media.giphy.com/media/3o85xoi6nNqJQJ95Qc/giphy.gif")',
'background-size: cover',
'color: #fff',
'padding: 10px 20px',
'line-height: 35px'
].join(';');console.log('Hi there!%c', style); // it doesn't work
The result is:
But it works with space.
const style = [
'background-image: url("https://media.giphy.com/media/3o85xoi6nNqJQJ95Qc/giphy.gif")',
'background-size: cover',
'color: #fff',
'padding: 10px 20px',
'line-height: 35px'
].join(';');console.log('Hi there!%c ', style); // it works!
Animations
I found this guy erik who made this discovery: SVG animations in the browser console are possible! You can read his article here if you are interested in it. This is all I found searching a way to have animation into console.
I tried different ways to use CSS Keyframe Animations but it doesn’t seem possible. If someone knows a way to do it please contact me, I love to put CSS everywhere 😄.
Fake animation
It is hard to give up and that’s why I create this fake animation, a simple appearance and disappearance of things.
const textStyle = [
'color: red',
'font-size: 30px',
].join(';');const imageStyle = [
'background-image: url("https://media.giphy.com/media/sXOj0wtpyELdu/source.gif")',
'background-size: cover',
'padding: 150px 300px'
].join(';');// it's just a joke 😸console.log('%cYou have 6 seconds to count all the cats', textStyle);setTimeout(function() {
console.log('%c ', imageStyle);
}, 3000);setTimeout(function() {
console.clear();
}, 9000);
The result is:
Hope you enjoy those console.log() experiments.
If you know something nice about them please contact me 😎!