When opening developer console in Facebook website, you might be wondering why that Facebook website developer console can display a special characters with special font and difference font size than we normally do. In this blog, we are going to discuss about it.
![Facebook Console Log](https://blog.jorcus.com/wp-content/uploads/2019/11/facebook-console-log.jpg)
Most modern browsers are supporting the CSS style in console.log()
. To test it out, you can add %c
before the text, then place your CSS style after the comma like this.
console.log("Hello, My name is %cJorcus.", "color: white; font-style: italic; background-color: purple;padding: 5px;font-weight:bold");
![Jorcus Console Log](https://blog.jorcus.com/wp-content/uploads/2019/11/jorcus-console-log.jpg)
As you can see, the style applied after the %c
. Not only that, we can also display Image Or GIF in console.log as well.
const consoleStyle = [
'background-image: url("https://media.giphy.com/media/xT9IgG50Fb7Mi0prBC/giphy.gif")',
'background-size: cover',
'padding: 100px 200px'
].join(';');
console.log('%c ', consoleStyle);
![Jorcus Console Log Gif](https://blog.jorcus.com/wp-content/uploads/2019/11/jorcus-console-log-GIF.jpg)
You can also add more than one style in your console.log() in this way.
const style1 = ['font-size: 12px',
'background: red',
'color: #fff',
].join(';');
const style2 = [
'font-size: 20px',
'text-shadow: 2px 2px',
'color: red'
].join(';');
console.log("%cMy name is %cJorcus!", style1, style2);
![My Name Is Jorcus](https://blog.jorcus.com/wp-content/uploads/2019/11/my-name-is-Jorcus.jpg)
Thanks for reading!I hope you enjoyed it, if you know something interesting too, please let me know! [email protected]