Javascript Console Styling

Styling console is not necessary for development. If we are in fun mode we show a stylish message in our console. We can write CSS code for our console.

For Development purpose you can check Playing with Javascript Console

Colorful Message

console.log("%c%s",
            "color: red; background: yellow; font-size: 24px;","WARNING!");

Wow, colorful warning message. In this code, there are two code segments. In the first part, we use reference. These references should be types (%s = string, %i = integer, %o = object, %f = float, %c=style).

And the second part we use corresponding value for the references.

Image(PNG, GIF,…) In Console

Here we view a gif file in our console with the help of CSS.

let css = `
background: url(http://demo.icanbecreative.com/animate-along-svg-path/svg-animate-along-path-600.gif)
left top no-repeat;
font-size: 260px;`
console.log('%c', css)