Styling the Browser Console

code

One of those "kinda interesting" facts: you can use CSS rules on browser dev console messages.

If you open your browser's developer console while on this page, you'll notice a styled console statement.

You can do this as well with a modified console.log statement:

console.log(
  "%c👻 Hello!",
  "color: #cbe6d6; background-color: #4E05EB; font-family: 'Papyrus', monospace; font-size: 20px; font-weight: bold; padding: 20px;"
);

The first argument includes the text I want to style, and the second argument includes the actual style rules. The %c directive marks the beginning of the styled text.

See Mozilla's console documentation.