April 15, 2017

Styling the Console

If you have looked at your browser's console while on my site, you may have noticed this styled console statement:

A screenshot of the console tab of Firefox Developer Tools, showing a greeting in purple text and an emoji of a woman.

It only takes one line of JavaScript to accomplish this:

console.log("%c💁🏻 Hello there!", "color: #8971d0; font-size: 14px; font-weight: 700; padding: 4px; border: 2px solid #8971d0;");

The first argument includes the text I want to style (preceded by the "%c" directive), and the second argument includes the actual styles. Note that the %c directive in the first argument is important, because it marks the beginning of the styled span of text.

If you want to read more about styling your console (including using build-in methods other than console.log - such as console.error or console.info), check out Mozilla's console documentation.